【API】Google Maps APIの実装まとめ

実務において「Google Map」の埋め込みにより地図を表示することが一般化してきました。
販売店のホームページなら店舗へのアクセスページ、企業のページなら会社概要のページで地図の表示がほぼ必須といった感じですね。
現在では単純に地図を埋め込むだけでなく「地図の色を変えたい」「マーカーの色を変えたい」「マーカーのアイコンを変えたい」「マーカーを複数設置したい」など様々な要望を聞くようになりました。

要望に応えるには「Google Maps API」を使用する必要があります。
ただ、「Google Mapで埋め込みたい箇所のiframeコードをコピーしてソースにペーストする」だけで対応できた単純な地図の埋め込みはと違い、APIを使用する場合はJavaScriptの知識をある程度要求されます。
経験の浅いコーダーが実装する際はてこずる可能性があることをディレクターは認識したほうが良いかもしれません。

ツールを使ったGoogle Mapのカスタマイズ

一応、ツールを使用すれば色の変更くらいはできます。
しかし、ツール上で生成したコードをコピペしただけでは実装できません。
あらかじめ「Google Map」におけるスクリプトの基本形を用意しておき、そこにツールで生成したコードを追記してく感じとなります。
加えて、仕様も定期的こ変わるので常に最新の情報を入手する必要がありそうです。

ツールで作成したデモページは下記になります。

>> DEMOはこちらから！

参考にさせていただいたページ
http://blog.prostaff1.com/google/1150/
https://liginc.co.jp/web/service/other-service/62242

Google Maps APIを使った実装例

今回作成したデモページでは3つのGoogle Mapを埋め込み、それぞれ2つのオリジナルマーカーを設置しています。

>> DEMOはこちらから！

■JavaScript

var map = new google.maps.Map(document.getElementById("gMap01"), {
zoom: 17,
center: new google.maps.LatLng(34.669179,135.500814),
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

// マーカー1
new google.maps.Marker({
position: new google.maps.LatLng(34.669179,135.500814),
map: map,
title : "MAP01",
icon: new google.maps.MarkerImage(
'image/icon_map_01.gif', // url
new google.maps.Size(40,40) // size
)
});

// マーカー2
new google.maps.Marker({
position: new google.maps.LatLng(34.668960,135.501661),
map: map,
title : "MAP02",
icon: new google.maps.MarkerImage(
'image/icon_map_02.gif', // url
new google.maps.Size(40,40) // size
)
});

var map = new google.maps.Map(document.getElementById("gMap02"), {
zoom: 17,
center: new google.maps.LatLng(35.169710, 136.906588),
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

// マーカー3
new google.maps.Marker({
position: new google.maps.LatLng(35.170008, 136.905533),
map: map,
title : "MAP03",
icon: new google.maps.MarkerImage(
'image/icon_map_03.gif', // url
new google.maps.Size(40,40) // size
)
});

// マーカー4
new google.maps.Marker({
position: new google.maps.LatLng(35.169710, 136.906588),
map: map,
title : "MAP04",
icon: new google.maps.MarkerImage(
'image/icon_map_04.gif', // url
new google.maps.Size(40,40) // size
)
});

var map = new google.maps.Map(document.getElementById("gMap03"), {
zoom: 16,
center: new google.maps.LatLng(33.589154, 130.398158),
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

// マーカー5
new google.maps.Marker({
position: new google.maps.LatLng(33.590097, 130.398127),
map: map,
title : "MAP05",
icon: new google.maps.MarkerImage(
'image/icon_map_05.gif', // url
new google.maps.Size(40,40) // size
)
});

// マーカー6
new google.maps.Marker({
position: new google.maps.LatLng(33.589154, 130.398158),
map: map,
title : "MAP06",
icon: new google.maps.MarkerImage(
'image/icon_map_06.gif', // url
new google.maps.Size(40,40) // size
)
});
JavaScript

デモページでは地図本体を設置するためにMapクラスを2つ、マーカーを設置するにはMarkerクラスを6つ設置しています。記述の意味は簡単にまとめるとこのようになります。

// キャンパスの要素を取得する
var map = new google.maps.Map(document.getElementById("gMap01")

// 中心の位置座標を指定する
position: new google.maps.LatLng(35.169710, 136.906588)

// スクロールでの拡大縮小禁止
scrollwheel: false

// マーカーの画像・サイズ設定
icon: new google.maps.MarkerImage(
'image/icon_map_06.gif', // url
new google.maps.Size(40,40) // size
JavaScript

Google Maps APIではオプション・メソッド・イベントが大量に用意されているので様々な要望を実現化できますね。

参考にさせていただいたページ
https://syncer.jp/Web/API/Google_Maps/JavaScript/

定期的に変わるGoogle Maps APIの仕様

以前はAPIキーが無くても表示可能でしたが、現在はローカルでのみAPIキーが無くても表示できる仕様に変わりました。サーバーにアップする場合だとAPIキーがないと表示できないようです。
※2016年10月現在

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。