ページにGoogle Mapを表示させる方法

今更ながら、ページにGoogle Mapを表示したいという要望にお応えしたいと思います。

なぜ今更なのかという意見もありますが、

過去にマッシュアップという技術手法から、かなり久しく、

Google Mapもその時からよく利用されていたからです。

そもそもマッシュアップとは、

外部のサービスを使い、カスタマイズして表示するような手法のことであり、

もっとも使われている外部サービスがGoogleのサービスです。

今回は、Google Cloudで提供されている位置情報APIを使い、

試しにGoogle Mapを表示してみようと思います。

Google Mapを表示するためには、

少なくともGoogleアカウントが必要となります。

まだ持っていない方は、Googleサイトにてアカウントを作成しましょう。

アカウント作成後に、次のサイトにアクセスします。

Google Maps Platform

https://cloud.google.com/maps-platform/?hl=ja

余談ですが、最近はGoogle Cloudに変わったんですね。

Cloudなので、もちろんアクセスの量に応じて課金が発生します。

でも安心してください。無料トライアルとして使用できるので、

少なくとも1年間は無料でAPIなどを利用することができます。

では、アクセス後に画面右上の「使ってみる」を押しましょう。

すると、Google Maps Platformの有効化が表示されます。

有効化には下の画面に表示されている通り、

1) 使用したいサービスを選択

2) プロジェクトを選択

3) 請求先情報を設定

の手順を踏みます。

使用したいサービスでは、今回はマップだけを選択して「続行」を押します。

以降、画面に従って設定を進めていくと、最終的にAPIコードが表示されます。

このAPIコードはどこかに控えておいてください。

尚、APIコードを確認したい場合は、

Google Cloud Platform ダッシュボード

https://console.cloud.google.com/home/dashboard?hl=ja

からログインし、

左上のハンバーガーアイコン－＞「APIとサービス」－＞「認証情報」

の順にクリックします。

これでようやくGoogle Mapをページに表示させる準備が整いました。

では試しにGoogle Mapを表示させます。

<!DOCTYPE html>
<html>
  <head>
    <meta chatset="utf-8">
    <title>Sample</title>
<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var locate = {lat: 36.5780443, lng: 136.6481714};
        var map = new google.maps.Map(document.getElementById('map'), {
          center: locate,
          zoom: 16
        });
        var marker = new google.maps.Marker({position: locate, map: map});
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=[API Key]&callback=initMap"
    async defer></script>
  </body>
</html>

CDNを使い、https://maps.googleapis.com/maps/api/jsにあるJavaScriptライブラリを使います。

この時に、[API Key]の部分には先ほど控えて置いたAPI Keyを指定します。

この例では、石川県金沢駅を中心に表示するようなことをしていますが、

緯度・経度はどうやって取得しているのかというと、

実際に石川県金沢駅を検索して、Google Mapにアクセスすると、アドレスバーには次のURLが表示されます。

https://www.google.com/maps/place/金沢駅/@36.5780443,136.6481714,15z/data=(ry

この時の@以降に表示されている"36.5780443,136.6481714"の部分がそれぞれ緯度、経度に当たります。

実行結果

冒頭で、カスタマイズして表示できるとお伝えしましたが、

もちろんカスタマイズして表示させることもできます。

ではカスタムしてみましょう。scriptタグの内容を次のようにしてみます。

    <script>
      function initMap() {
        var locate = {lat: 36.5780443, lng: 136.6481714};
        var map = new google.maps.Map(document.getElementById('map'), {
          center: locate,
          zoom: 16
        });
        var infoWindow = new google.maps.InfoWindow({
          content: '<div style="color: green; font-size: 20px; font-weight: bold;">Hello!</div>',
          position: locate
        });
        infoWindow.open(map);
      }
    </script>

こうすることで、画面表示のタイミングでちょっとしたポップアップが表示されます。

実行結果

Google Mapの表示が簡単に表示できました。

他にも利用できるものがありますので、

Google Map APIのドキュメントやチュートリアルで確認してみてください。

デジタル忍者ブログ

デジタル忍者ブログ

ページにGoogle Mapを表示させる方法