実務において「Google Map」の埋め込みにより地図を表示することが一般化してきました。
販売店のホームページなら店舗へのアクセスページ、企業のページなら会社概要のページで地図の表示がほぼ必須といった感じですね。
現在では単純に地図を埋め込むだけでなく「地図の色を変えたい」「マーカーの色を変えたい」「マーカーのアイコンを変えたい」「マーカーを複数設置したい」など様々な要望を聞くようになりました。
要望に応えるには「Google Maps API」を使用する必要があります。
ただ、「Google Mapで埋め込みたい箇所のiframeコードをコピーしてソースにペーストする」だけで対応できた単純な地図の埋め込みはと違い、APIを使用する場合はJavaScriptの知識をある程度要求されます。
経験の浅いコーダーが実装する際はてこずる可能性があることをディレクターは認識したほうが良いかもしれません。
ツールを使ったGoogle Mapのカスタマイズ
一応、ツールを使用すれば色の変更くらいはできます。
しかし、ツール上で生成したコードをコピペしただけでは実装できません。
あらかじめ「Google Map」におけるスクリプトの基本形を用意しておき、そこにツールで生成したコードを追記してく感じとなります。
加えて、仕様も定期的こ変わるので常に最新の情報を入手する必要がありそうです。
ツールで作成したデモページは下記になります。
参考にさせていただいたページ
http://blog.prostaff1.com/google/1150/
https://liginc.co.jp/web/service/other-service/62242
Google Maps APIを使った実装例
今回作成したデモページでは3つのGoogle Mapを埋め込み、それぞれ2つのオリジナルマーカーを設置しています。
■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) // sizeGoogle Maps APIではオプション・メソッド・イベントが大量に用意されているので様々な要望を実現化できますね。
参考にさせていただいたページ
https://syncer.jp/Web/API/Google_Maps/JavaScript/
定期的に変わるGoogle Maps APIの仕様
以前はAPIキーが無くても表示可能でしたが、現在はローカルでのみAPIキーが無くても表示できる仕様に変わりました。サーバーにアップする場合だとAPIキーがないと表示できないようです。
※2016年10月現在
スポンサーリンク