ZENRIN DataCom

Googleマップを使ってみよう!【APIキー取得からサンプルコードまで】

自社のwebサイトに地図を載せると、利用者にとってはより親切ですよね。そんなときに役に立つのがGoogleマップです。
ですが、2016年6月22日より新規のWebサイトでGoogleマップを使用する場合、「Google Maps API」で使用するAPIキーが必要になりました。ここではGoogle Maps APIの詳細から、使用するためのAPIキーの取得方法、サンプルコードでの動作確認までをご説明します。

地図を使ったサービスの開発に便利な「Google Maps API」とは?

「Google Maps API」とは、Google社が提供している高機能で世界中の地図データを扱っているGoogleマップを、さまざまなサービスで利用できるようにしたものです。AndroidやiOS向けアプリやWebサービスにGoogleマップを使用することができます。

「Google Maps API」は単に地図を載せるだけではなく、目的の場所や建物にマーカーを配置したり、さまざまなデータをインポートしてGoogleマップ上でデータを可視化するなど、高度で多彩な使い方も可能となります。

地図を使った開発をしてみよう!APIキーの取得方法

APIキーを取得するためには、まず、Google Maps APIのページにアクセスします。

https://developers.google.com/maps/documentation/javascript/ 別ウィンドウで開く

画面右上の「キーを取得」をクリックします。

「Maps Web APIの初期化」画面より「Yes」にチェックを入れて「CREATE AND ENABLE API」をクリックします。

しばらく待つと「YOUR API KEY」にAPIキーが表示されます。APIキーはメモしておきましょう。

APIキーは取得できました!それではさっそく取得したAPIが有効か確認するために、実際にGoogle Maps APIを使用してみましょう。

取得したAPIキーを使って地図を表示してみよう!

Google Maps APIの「スタートガイド」にアクセスします。

https://developers.google.com/maps/documentation/javascript/tutorial 別ウィンドウで開く

スタートガイドで公開されているAPIのソースコードをエディタにコピーして、「YOUR_API_KEY」の箇所に取得したAPIキーを入力します。

APIキーを入力したら、map.htmlとして保存してサーバにアップロードし、htmlファイルを表示させます。

Googleマップの画面が表示されれば成功です。

なお、誤ったAPIキーを入力して、htmlファイルを実行すると、以下のようにエラー画面が表示されます。この場合はhtmlファイルを見直してください。

表示した地図の場所を変更してみよう!

サンプルのソースコードでは、オーストラリアのシドニーを中心に表示されていますが、日本の東京を表示させたい場合は、スクリプトタグで囲っている箇所のinitMap()関数を編集します。

ソースコードでlat(緯度)、lng(軽度)で設定している値を東京都渋谷区の緯度経度に設定してみます。

詳しい使い方や使用できるライブラリについては、Google Maps APIのページを参考にしてください。

地図をサイトにアップしてみよう!

作成したGoogle Maps APIを実際にWebサイトに適用するには、サンプルで紹介したhtmlファイルのbodyタグに記載しているGoogleマップの情報を埋め込む必要があります。

具体的には以下のdivタグ情報と、Googleマップの情報を記述しているscriptタグ、取得したAPIキー情報を、対象のWebサイトのhtmlファイルに埋め込みます。

<div id="map"></div>
    <script>
    var map;
    function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
	    center: {lat: 35.661777, lng: 139.704051},
	    zoom: 8
	});
    }
    </script>
<script src = "APIキー情報" async defer></script>

Googleマップの表示は難しくない!

「Google Map API」を使用すれば、簡単に地図を表示できそうですね。
Googleマップはまだまだ可能性を感じるサービスなので、これからも楽しみです!利用に関してご不明な点がありましたら下記お問い合わせより是非ともご連絡いただければと思います。弊社営業担当より、お客様にあったプランのご紹介なども行っておりますので、お気軽にお問い合わせください!

関連の法人向けサービス