MapsJavaScriptAPIで現在地アイコンと現在地取得ボタンを実装した

アイスコールドコカ・コーラ全国版マップの改修してたら位置情報のアイコンとボタンの実装が標準で提供されていなかったので、自前で実装した。

MapsJavaScriptAPIは相変わらず痒いところに手が届かない。。。

環境情報

vue@3.4.30

※Vueのバージョンでvue-cliのバージョンじゃないよ！

現在地を表示するアイコンのソースに関しては以下の記事のソースをほとんど丸パクリ。

Google Maps JavaScript APIで現在地用の青丸のアイコンを表示する - Qiita

Google Maps JavaScript APIには地図アプリによくある現在地を示す青丸のアイコンを表示する機能が提供されていないみたいですね。自力で作るしかなさそうです。ドキュメントを読む…

こんな感じに実装。

// 現在地を示すマーカー（青い円形）
                (vm.currentLocationMarker = new google.maps.Marker({
                  position: { lat, lng },
                  map: vm.map,
                  icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    fillColor: "#115EC3",
                    fillOpacity: 1,
                    strokeColor: "white",
                    strokeWeight: 2,
                    scale: 7,
                  },
                })),
                  (vm.currentLocationCircle = new google.maps.Circle({
                    strokeColor: "#115EC3",
                    strokeOpacity: 0.2,
                    strokeWeight: 1,
                    fillColor: "#115EC3",
                    fillOpacity: 0.2,
                    map: vm.map,
                    center: { lat, lng },
                    radius: 100,
                  }));

latとlngには緯度経度をそれぞれ入れてあげる。

currentLocationMarkerにmarkerもcircleも両方入れてあげることできるが、両方入れた状態で、marker.setMap(null)が上手く動かなかったので、別々の変数に分けて入れてる。

完成イメージはこんな感じ。

現在地のアイコンと周辺の円表示はサンプルソースがあるから簡単だったが、現在地ボタンの実装がめんどかった。

といっても、ChatGPTに作らせたので、そんな手間ではなかった。

フリー素材から現在地ボタンぽい素材を落としてきて、その素材を使うように指定し、ボタンサイズとかを拡大縮小などのボタンの大きさに合わせてあげて四角形にすればそれっぽくなった。

完成の画像を載せたいが、フリー素材のアイコンの再配布に抵触しちゃう可能性があるので、興味ある人はサイト見に行ってください。

const locationButton = document.createElement("div");
          locationButton.style.width = "40px"; // ボタンのサイズを画像に合わせる
          locationButton.style.height = "40px";
          locationButton.style.backgroundImage = `url(${currentLocationIcon})`; // 画像のパスに置き換え
          locationButton.style.backgroundSize = "cover"; // 画像がボタンにフィットするよう調整
          locationButton.style.backgroundColor = "#fff"; // 背景色（必要であれば設定）
          locationButton.style.border = "none"; // 枠線をなくす
          locationButton.style.borderRadius = "0%"; // 四角にする
          locationButton.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.3)"; // 影の設定
          locationButton.style.cursor = "pointer";
          locationButton.style.margin = "10px";
          locationButton.title = "現在地を表示"

// ボタンをマップ右下に追加
          vm.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(locationButton);

一応、それっぽくはできたから一旦はこのままで行く。

位置情報の取得に相変わらず時間かかるのが課題なのでなんとかしていきたい。

アイスコールドコカ・コーラ全国版マップ