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

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

GoogleのAPIを有効にする

以下2つの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マップのアイコンをオリジナルの画像に変更する方法をご案内しました。

著者のイメージ画像

BringFlower|稲田 高洋

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。