Google Maps JavaScript APIでプラスαなコーディングするのに役立ちそうなサンプルコード集まとめたよ

f:id:fwww:20180326231743p:plain

どうもふうや(@fwww0707)です!

最近は仕事柄、Google Maps JavaScript APIで色々とコーディングしてました。

そしてGoogle Maps JavaScript APIは意外と用意されているオプションも多彩で思うようなコーディングが出来満足できました!

そこで役に立ったオプション設定や外部ライブラリを含めサンプルコードを備忘録代わりに残しておきます!

Google Maps JavaScript APIを利用した時に役に立った外部ライブラリとサンプルコードをまとめるよ

マップのタイプを変更することの出来るコントロールボタンを非表示にする

f:id:fwww:20180326214802p:plain

マップの左上に表示されるこのコントロールボタン。

非表示にするには、new google.maps.Mapクラスを生成するときのオプションに、mapTypeControl:falseとすれば動きます。

gist60632f319d2e88722ece4f7b1f6be8ae

 

コントロールキー(コマンドキー)を押しながらや日本指でないと地図を操作できない設定を解除する

Google Maps JavaScript APIのバージョンが上がった際に地図の操作性を良くするためにデフォルトで追加された設定ですが、これもnew google.maps.Mapクラスを生成する際のオプションで解除可能です。

gistda5912344e6491d2f9f3aef094a41057

 

住所から経度緯度を求める

通常地図にマーカを立てる際に必要な情報として軽度と緯度の値が必要ですが、これをnew google.maps.Geocoderクラスで求めることが出来ます。

gistcd86112fb3c32bf09b43adb6848b3d1a

実際の住所はaddressの箇所に入力します。

経度緯度情報はresults[0].geometry.locationに入っています。

この経度緯度情報でマーカを立てるなり、センターの位置を決めるなり色々カキカキしてみてください!

 

infowindowを拡張する外部ライブラリの利用

Google Maps JavaScript APIにはマップ上でマーカーを立てた場所でのイベント発火時にその場所の詳細を表示させることが出来るinfowindowがデフォルトでサポートされています。

そのinfowindowを拡張する外部ライブラリを利用することで、DOM管理ができるという優れものです。

github.com

 

まずinfoboxライブラリの呼び出しはこちらから↓

gist3582d32e3faf7213cbd85a7ba0766048

 

infoboxを生成する際の最低限のオプションと生成まで。

gist04fb0947144e9aec3826d1510793e195

 

詳しいオプションに関しては公式リファレンスを参考にして下さい!

InfoBox公式リファレンス

 

infoboxを操作するために最低限必要なメソッドを紹介します。

本当に最低限です笑

ごめんなさい!笑

gistc5c6da68605f389e88694bd4530afd0f

 

Google Maps JavaScript APIでよく利用するイベント発火の方法一覧

 マウスホバー時やマウスホバー解除時のイベント発火方法などなどサンプル程度に使って下さい笑

gistd67bb4d92a598f1a96f156611760483b

 

 マーカークリック時には先ほど紹介したinfoboxを表示させてもいいですね。

ホバー時、ホバー解除時にinfoboxを開閉するのも出来ますよ!

まとめ

Google Maps JavaScript APIは仕事柄で利用したためサンプルコード程度になりましたが、応用すればマップ外のDOM要素をクリック時、ホバー時にマップ内にイベントを発火させたりなどなど、考え方次第でページの表現性は無限大です!

 ありがとうございました!