Google Maps JavaScript APIには地図アプリによくある現在地を示す青丸のアイコンを表示する機能が提供されていないみたいですね。
自力で作るしかなさそうです。
ドキュメントを読むのがめんどくさかったので、結局はチャットGTPに聞きました。
下記の2つの質問で皆さんも答えはゲットできちゃうと思います。
プロンプト:
google map apiで現在地によくある青丸のアイコンを表示したい
青丸の周りに円形の薄い青の影を表示したい
一応コードも共有します。
作るもの
・青丸表示
薄い青丸の縁をマップに追加し、その中央に濃い青丸のマーカーを表示する感じです。
引数のmapにはGoogle Maps JavaScript APIを使用して作成される地図オブジェクト、
positionには用事する位置の緯度と軽度のオブジェクト({lat: 緯度, lng: 軽度})を渡してください。
function setCurrentLocationMaker(map, position){
//縁の薄い青丸
new google.maps.Circle({
strokeColor: '#115EC3',
strokeOpacity: 0.2,
strokeWeight: 1,
fillColor: '#115EC3',
fillOpacity: 0.2,
map: map,
center: position,
radius: 100
});
// 中央の濃い青丸
new google.maps.Marker({
position: position,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#115EC3',
fillOpacity: 1,
strokeColor: 'white',
strokeWeight: 2,
scale: 7
},
});
}
現在地に移動するボタンも必要に応じて追加すると便利だと思います。
(APIでは提供されていないため、自力で作りました。)
私が作った際には誰も記事化していなかったので、どなたかのお力になれれば幸いです。