プログラミング

Google Maps APIを使ってWebサイトに地図を表示する

Google Maps APIを使ってWebサイトに地図を表示する方法を紹介します。

住所を検索したら共有ボタンがあるので、そのボタンをクリックして表示されるHTMLタグを貼り付けるだけでも簡単に地図を埋め込むことができますが、Google Maps APIを使うと、サイトのデザインに合わせて色を変えたり、マーカーをオリジナルの画像に変えたりということができます。

なお、Googleアカウントが必要なので、そちらは事前に登録しておいてください。

Maps JavaScript APIを有効化

Google Maps API

Google Maps Platformの公式サイトで、「使ってみる」をクリック。

Google Maps API

使うのは「Maps JavaScript API」です。

Google Maps API

「有効にする」をクリック。

APIキーを取得

Google Maps APIを使って地図を表示するにあたり、APIキーを取得する必要があります。

Google Maps API

Google Maps API

Google Cloud Platformの管理画面で新しいプロジェクトを作成しておきます。

Google Maps API

次に「APIとサービス」→「認証情報」をクリック。

Google Maps API

「認証情報を作成」から「APIキー」を選びます。

Google Maps API

これでAPIキーは作成できましたが、このままだと誰でもこのAPIキーを使えてしまうので、使用範囲を制限しておきます。

黄色いビックリマークが表示されているのはそのためです。

Google Maps API

アプリケーションの制限で「HTTPリファラー(ウェブサイト)」を選択します。

Google Maps API

また、ウェブサイトの制限よりリファラーを設定しておきます。

リファラーは「*https://kubogen.com/*」のようにドメイン前後に「*」をつけておきます。

APIキーを使ってグーグルマップを表示

まず取得したAPIキーを含む、以下のスクリプトをHTMLで読み込みます。

<script src=”https://maps.googleapis.com/maps/api/js?key=APIキー=ja”></script>

取得したAPIキーは「APIキー」に記述します。

次にグーグルマップを表示させたい箇所に以下のタグを書きます。

<div id=”map”></div>

以下のようなスクリプトでグーグルマップを表示させます。

<script>
 var MyLatLng = new google.maps.LatLng(緯度, 経度);
 var Options = {
  zoom: 15,
  center: MyLatLng,
  mapTypeId: ‘roadmap’,
  disableDefaultUI: true,
 };
 var map = new google.maps.Map(document.getElementById(‘map’),Options);
</script>

緯度と経度は、地図上の目的の場所を右クリック「この場所について」をクリックするとわかります。

あとはオプションの説明になりますが、「zoom」は地図の縮尺値、「center」は地図の中心座標、「mapTypeId」は地図の種類、「disableDefaultUI」はコントローラーの非表示です。

他にも色々オプションがあるので、必要に応じて使ってください。

Maps JavaScript API ドキュメント

Leave a Comment