ウェブのあれこれ
ウェブを活用したいひとのためのブログ
オリジナルのGoogleMapを埋め込んでカスタマイズ!Google Maps JavaScript API V3の使い方
2016/03/18 Google

オリジナルのGoogleMapを埋め込んでカスタマイズ!Google Maps JavaScript API V3の使い方

GoogleMapsAPIを利用すればWEBサイトにGoogleMapを埋め込んでピンを表示したり吹き出しを表示したり、更には地図の色を変えたりなど、様々なカスタマイズができます。

GoogleMapsAPIを利用する手順

1.Google Developer Consoleに登録

GoogleMapsAPIを利用するには、Google Developer Consoleに登録する必要があります。
Google Developer Consoleにアセスしてみましょう。

2.プロジェクトの作成


ダッシュボードが表示され、ヘッダーの「Select a project」の部分をクリックすることで新規プロジェクトを作成することができます。


プロジェクト名(半角英数字)を入力してプロジェクトを作成しましょう。
プロジェクトの作成が完了すると、作成したプロジェクトのダッシュボードが表示されます。


3.APIを有効化

ダッシュボードの中にある「GoogleAPIを利用する」をクリックして、利用するAPIを有効化します。


「Google Maps JavaScript API 」を選択し、有効にするボタンをクリックします。

4.APIキーを取得する

有効になったら認証情報を作成するために「認証情報に進む」をクリックしましょう。


APIを呼び出す場所に「ウェブブラウザ(Javascript)」を選択し「必要な認証情報」をクリックします。


すると、キーの名前(任意の名称)と利用するWEBサイトのドメインを入力する欄が表示されます。

利用するWEBサイトを特定しない場合は「*」でワイルドカードを指定します。
入力が完了したら、「APIキーを作成する」をクリックしてAPIキーの作成は完了です。


発行されたAPIキーを保存しておきましょう。

Google Maps APIを利用してみよう!

1. スクリプトの読み込み

APIキーの発行が完了したら、WebページにGoogleMapsAPIのスクリプトを読み込ませましょう!
読み込ませるスクリプトは以下のとおり。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=「APIキー」&sensor=false"></script>
「APIキー」の部分を自身が発行したAPIキーに書き換えて読み込ませてください。
sensorの部分をtrueにすると、携帯などでGPSなどのセンサーを利用することができるようになります。

2. Googleマップを埋め込み

Googleマップを表示させる要素を作成し、その要素にGooleMapを埋め込みます。
Jqueryで要素を指定する場合は以下のようになります。
<div id="map"></div>
<script>
var map = new google.maps.Map($('#map').get(0));
</script>
「google.maps.Map」というメソッドでGoogleMapを作成します。
第二引数を利用することで、表示する座標やズームなどの調整ができます。
詳しい引数の内容などはリファレンスを参照してみてください。
google.maps.Mapリファレンス

いろんなカスタマイズが可能

Google Maps APIのリファレンスに詳しいAPIの内容が記載されているのでいろいろと試してみてください。地図にピンを立てたり、経度・緯度を取得したり、住所を検索したり、地図に図形を描画したりもできます。

更にはマップスタイルを利用して、地図の色や表示を変えることなんかもできちゃいます。マップのスタイルは専用のジェネレータもあるのでぜひ使ってみてください。

Provided by Revolme inc.
revolme.co.jp