1
3

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-05-24

Google Maps JavaScript APIには地図アプリによくある現在地を示す青丸のアイコンを表示する機能が提供されていないみたいですね。

自力で作るしかなさそうです。

ドキュメントを読むのがめんどくさかったので、結局はチャットGTPに聞きました。
下記の2つの質問で皆さんも答えはゲットできちゃうと思います。
プロンプト:

google map apiで現在地によくある青丸のアイコンを表示したい
青丸の周りに円形の薄い青の影を表示したい

一応コードも共有します。

作るもの
・青丸表示
スクリーンショット 2023-05-24 17.25.32.png
薄い青丸の縁をマップに追加し、その中央に濃い青丸のマーカーを表示する感じです。
引数の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では提供されていないため、自力で作りました。)
スクリーンショット 2023-05-24 17.25.38.png

私が作った際には誰も記事化していなかったので、どなたかのお力になれれば幸いです。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3