Googleマップでピンのアイコン（マーカー）をオリジナルに変更して表示する

Googleマップのピンのアイコン、マーカーを変更してお店などのロゴを表示する方法をご説明します。

GoogleのAPIを有効にする

以下２つのAPIを有効にする必要があります。

• Maps JavaScript API
• Geocoding API

手順は以下の通りです。

1. Google Cloud Platformにログインします
2. 初めての方は、「$300 相当の無料トライアルをご利用ください。」という文言が（現時点では）上部に出ていると思うので、それを有効化します（※）
3. Maps JavaScript APIとGeocoding APIをそれぞれ検索窓で検索して有効化します
4. Maps JavaScript APIを選択肢、左側のメニューで「認証情報」を選択します
5. 上部のメニューで「認証情報を作成」を選択します
6. 認証情報（APIキー）を作成するとAPIキーの表示が可能となるので、それを用います

※GoogleマップのAPIは2022年7月10日時点、無料期間終了後も、一定のアクセスを超えない限りは料金は発生しません。一定のアクセスを超えれば料金が発生します。Googleの料金は変わることも多いので、詳しくはGoogleサービスの情報を参照ください。

Googleマップを表示する画面でAPIキーを読み込ませる

以下のコードに対して、APIキーと書いているところに、上記ステップ6で得たAPIキーを記述した形にして</body>の直前に書きます。これにより、発行したAPIキーが読み込まれ、認証が通るという仕組みです。

<script src="https://maps.googleapis.com/maps/api/js?key=APIキー&amp;callback=initMap" async="" defer=""></script>

Googleマップのカスタマイズ

JavaScriptで以下の記述をすることでマップの中央位置と、アイコンの変更が可能です。

緯度、経度と書いているところはGoogleマップなどで得た数字を入れてください。アイコン（マーカー）の位置がずれる場合は、ここの数字をいじって調整します。

「アイコンのある場所（URL)」と書いているところは、表示したいアイコン画像のURLを記載してください。

function initMap() {
  //マップの中央位置
  const latlng = new google.maps.LatLng( 緯度, 経度 );
  const map = new google.maps.Map(document.getElementById('gmap'), {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

  //マーカー設置、変更
  const marker = new google.maps.Marker({
      position:latlng,
      map:map,
      icon: 'アイコンのある場所（URL）'
  });
}

まとめ

Googleマップのアイコンをオリジナルの画像に変更する方法をご案内しました。