【Google Maps API】よく使うカスタム事例のまとめ。3/3

上級編
まとめ

上級編

ルートを辿るアニメーションを付与（直線）

ルートを表示するマップにアニメーションを追加します。
任意の地点を直線で結ぶので、近場のルートを示すのにおすすめです。

DirectionsServiceで得られるルートでないので、Googleも知らない自分の道をマップに展開できます。
次に、DirectionsServiceを使ったルートのアニメーションを作成します。

ルートを辿るアニメーションを付与（道なり）

APIで提供される交通手段は車・徒歩・自転車になります。
残念ながら、電車や飛行機を使う経路や発着時間を指定しての検索はできません。

response.routes[0].overview_path
に経路の全ての情報が入っています。

これを使えば道なりに沿ったアニメーションが実装できます。

アイコンを常にセンター表示する

レスポンシブサイトで、ウィンドウサイズが変わってもマップのアイコンを中央に保ちます。
日本のへそと呼ばれる兵庫県西脇市にある「日本へそ公園」を中心に保ちます。

$(window).on({
	resize:function(){
		googlemap.panTo(new google.maps.LatLng(34.999939, 134.998755));
	}
});

これ初級でしたね。（笑）
けどリサイズしたらアイコンの位置がずれているサイトは結構見かけます。
レスポンシブサイトを名乗るならばカスタムしておきたいですね。

Google Maps API徹底活用ガイド

まとめ

Googole Maps APIは色々できすぎて、地図のカスタムの要望の難易度が上がってきています。
前までは地図を表示する場合はiframe貼り付けて終わりだったんですが、最近は細かな色まで指定などあり、大変でした。
今回様々なカスタム例をまとめたことによって、お客さんが望んだ一歩上の地図を展開できるようになりました。

今回このページで使ったjsファイルです。ご自由にお使いください。
1971.js