夢みるゴリラ
夢みるゴリラ
  • 最終更新日：

Google Maps APIを使った地図の埋め込みと、カスタマイズ方法

Google Maps APIを使った地図の埋め込みと、カスタマイズ方法

今回はGoogle Maps APIを使った地図の埋め込みと、カスタマイズ方法を紹介します。

実装内容は以下。

  • GoogleMap APIは取得済み
  • ブログではなく、企業ホームページに埋め込み
  • 地図の色やアイコンをカスタマイズ

説明する環境は以下。

  • macOS Catalina v10.15.5
  • Visual Studio Code v1.46.1
この記事の目次

Google Maps APIを使った地図の埋め込みと、カスタマイズ方法

GoogleMapをカスタマイズして企業ホームページに表示させる場合はAPIキーが必要になります。APIキーの設定方法はこちらの記事を参考にしてみてください。

参考
Google MapsのAPIキーを取得する
ねんでぶろぐ

表示させる地図のイメージ

一般的にカスタマイズが多そうな表示を選びました。

  • 白黒で表示
  • アイコンはオリジナルのものを使う
  • マウススクロールで拡大縮小の禁止
  • ストリートビューは表示させない

以下はイメージになります。

HTMLに書くこと

GoogleMapを表示させたい箇所に以下のコードをコピペします。

<script src="//maps.googleapis.com/maps/api/js?key=ここにAPIキーを入力する"></script><!-- APIキーを入力 -->
  <script type="text/javascript">
  function googleMap() {
    var latlng = new google.maps.LatLng(00.000000,000.00000);/* 座標を入れる */
    var myOptions = {
      zoom: 18, /*拡大比率 値が大きいと詳細に表示され、値が小さいと俯瞰*/
      scrollwheel: false, /* スクロールを無効化 */
      streetViewControl:false, /*ストリートビューを表示させない*/
      center: latlng, /*表示枠内の中心を軸にする*/
      mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
    };
    var map = new google.maps.Map(document.getElementById('js-access-map'), myOptions);
    /*アイコン設定*/
    var markerOptions = {
      position: latlng,
      map: map,
      icon: {
            url: '/images/sample/icon-demo-pin.png', /*アイコンまでのパス*/
            scaledSize : new google.maps.Size(40, 40) /*アイコンのサイズ*/
        },
      title: 'サンプル',/*タイトル*/
      //animation: google.maps.Animation.DROP /*アニメーションしたいなら*/
    };
    var marker = new google.maps.Marker(markerOptions);
    /*地図の表示をカスタマイズ 以下は白黒の例*/
    var styleOptions = [
   {
    'stylers': [{
     'gamma': 0.8
    },
    {
     'saturation': -100
    },
    {
    'lightness': 20
    }]
    }
    ];
    var styledMapOptions = { name: 'サンプル' }/*地図左上のタイトル*/
    var originalType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
    map.mapTypes.set('style', originalType);
    map.setMapTypeId('style');
  };
  google.maps.event.addDomListener(window, 'load', function() {
      googleMap();
  });
  </script>
  <div id="js-access-map" class="p-access__map"></div><!-- このクラス名にスタイルをあてる -->

地図の高さや幅などは、クラス名p-access__mapに対して、cssで指定してください。APIキーの設定が正しくできていれば地図は表示されます。

コードの説明をする

上のコードに中に説明も書いていますが、もう少し詳しく説明します。

APIキーを入力する

<script src="//maps.googleapis.com/maps/api/js?key=ここにAPIキーを入力する"></script><!-- APIキーを入力 -->

１行目には必ず取得したAPIキーを入力します。

緯度、経度を入力する

var latlng = new google.maps.LatLng(00.000000,000.00000);/* 座標を入れる */

４行目では表示させたい場所の座標を入れます。以下のサイトで、ピンを立てたい住所を入力すれば、緯度と経度を調べることができます。

参考
Google MAPS APIを使い、住所から緯度経度を取得
外部サイト

地図操作を設定する

var myOptions = {
      zoom: 18, /*拡大比率 値が大きいと詳細に表示され、値が小さいと俯瞰*/
      scrollwheel: false, /* スクロールを無効化 */
      streetViewControl:false, /*ストリートビューを表示させない*/
      center: latlng, /*表示枠内の中心を軸にする*/
      mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
};

５〜１１行目は、地図操作のパラメーターです。trueとfalseで有効・無効と表示・非表示を操作することができます。

操作する対象パラメーター
マウスホイールscrollwheel
ドラッグdraggable
ダブルクリックdisableDoubleClickZoom
移動コントロールpanControl
拡大縮小バーzoomControl
ストリートビューstreetViewControl
航空写真切替mapTypeControl
スケールscaleControl

アイコンの設定する

/*アイコン設定*/
var markerOptions = {
    position: latlng,
    map: map,
    icon: {
          url: '/images/sample/icon-demo-pin.png', /*アイコンまでのパス*/
          scaledSize : new google.maps.Size(40, 40) /*アイコンのサイズ*/
    },
    title: 'サンプル',/*タイトル*/
    //animation: google.maps.Animation.DROP /*アニメーションしたいなら*/
};

14〜２３行目までがアイコンの設定になります。用意したアイコン画像までのパスと、そのサイズを指定することで独自のアイコンを設定できます。デフォルトのアイコンでよければ、iconの部分を消すだけです。

WordPressの場合は、icon画像までのパスは以下のように書く必要があります。

icon: {
      url: '<?php echo esc_url( get_template_directory_uri() ); ?>/images/sample/icon-demo-pin.png', /*アイコンまでのパス*/
      scaledSize : new google.maps.Size(40, 40) /*アイコンのサイズ*/
      }

地図を装飾する

/*地図の表示をカスタマイズ 以下は白黒の例*/
var styleOptions = [
 {
  'stylers': [{
     'gamma': 0.8
   },
   {
     'saturation': -100
   },
   {
     'lightness': 20
   }]
 }
];

明るさや彩度を調整することで白黒にしています。地図の色は以下のサイトにあるサンプルから選ぶと便利です。

参考
snazzy maps
snazzy maps

googleMapを出力する

<div id="js-access-map" class="p-access__map"></div><!-- このクラス名にスタイルをあてる -->

id名js-access-mapがある要素に、googleMapを表示させます。このid名と１２行目にあるid名は同じにしておく必要があるので注意しましょう。以下は１２行目です。

 var map = new google.maps.Map(document.getElementById('js-access-map'), myOptions);

googleMapの横幅と高さを調整する

<div id="js-access-map" class="p-access__map"></div><!-- このクラス名にスタイルをあてる -->

クラス名p-access__mapに、widthとheightをcssで指定して、googlemMapのサイズを調整します。

WordPressでgoogleMapを埋め込みたいなら？

WordPressであればプラグインを使ったほうが、地図の色もピンの変更も管理画面から行えるので便利です。「Google Maps Easy」が特にオススメ。

「Google Maps Easy」については以下の記事に書いたので参考にしてみてください。

WordPressでGoogleMapプラグインを選ぶならEasy Google Mapsがおススメ

GoogleMapが表示されないときは？

埋め込んだGoogleMapが表示されない原因のほとんどはAPIキーの設定ミスです。以下の記事も書いたので表示されない場合は参考にしてみてください。

GoogleMapが表示されない４つの原因と解決方法 - APIキーの設定ミスが9割

さいごに

今回はGoogle Maps APIを使った地図の埋め込みと、カスタマイズ方法を紹介しました。

Google Maps APIを使った地図の表示は有料化されましたが、１日900アクセスくらいなら無料枠内で収まります。課金されたくない場合はアクセス制限の設定が必要です。

またAPIキーはだれからも見れる状態なので、APIキーを悪用させないためにGoogle Maps PlatformからHTTPリファラーの制限をかけておくようにしましょう。

こちらの記事も読まれています