2017/06/04

グーグルマップの表示をカスタマイズする方法

BootStrapのテンプレートに実装されているグーグルマップをカスタマイズする方法の備忘録。

必要なもの

Start BootStrap

BootStrapのフリーテーマに実装されているグーグルマップ表示用のjavascriptコードをベースにカスタマイズを行います。
Start BootStrapのフリーテーマ:Grayscale

Google Maps JavaScript API

グーグルマップ表示で使用するAPIキーを取得します。Google Maps JavaScript APIを無料で使用できる回数は25000回/日までです。これ以上の回数は有料登録しないと使えません。

参考(詳細確認):Google Maps API > 価格とプラン

グーグルマップをjavascriotでサイトに表示させるためには、Google API Consoleで以下の設定が必要になります。

・Google Maps JavaScript APIの有効化
・APIキーの発行

Google API Console

※APIキーを発行してもGoogle Maps JavaScript APIが有効になっていないとエラーとなり、マップは表示されません。

カスタマイズ

APIキー

Google API Consoleで発行したAPIキーを設定します。

APIキーを発行してHTTPリファラー(ウェブサイト)にチェックを入れています。また、対象のウェブサイトにはワイルドカードである「*」を設定して開発環境でもマップが表示されるように設定しています。

開発が終了したら「*」は削除して使用する対象ドメインのみ設定します。

BootStrapフリーテーマのGrayscaleに製作者のAPIキーが設定されていますがリクエスト回数制限でマップが表示されなくなります。

自分のAPIキーを設定しましょう。

APIキーはindex.htmlファイルの以下の記述部分に設定します。

スタイル

グーグルマップのスタイルを変更して表示を変更します。
修正ファイル:grayscale.js

変更箇所

Snazzy Maps – Free Styles for Google Mapsで変更スタイル選んで取得することができます。

※index.htmlではgrayscale.min.jsがインクルードされているのでgrayscale.jsに変更すること。

マップマーカー

マップマーカーを好きなデザインに変更することができます。
修正ファイル:grayscale.js

画像の変更

map-marker.pngを別の画像ファイルに指定すると変更することが可能です。

マップマーカーを提供してくれているサイトもあるので好きなものを取得して変更することもできます。

参考:iconfinder

吹き出し

マップマーカーをクリック時に情報を表示するテロップを追加できます。
『//Info Window』以下のコードが吹き出しのコードいなっています。
修正ファイル:grayscale.js

座標

表示する地図の座標を指定します。
修正ファイル:grayscale.js

変更箇所

google.maps.LatLngの設定は3箇所あります。すべて同じ設定に変更してください。

緯度、経度はGeocodingで調べられます。

まとめ

グーグルマップの埋め込み表示では変更できないカスタマイズをjavascriptのライブラリを使えばできるようになりました。オリジナルのマップ表示をしたい方は挑戦してみて下さい。

資料: Google Maps API ウェブ向け Maps JavaScript API
参考:http://so-zou.jp/web-app/tech/web-api/google/map/
参考:http://www.tam-tam.co.jp/tipsnote/javascript/post7755.html

(Visited 881 times, 1 visits today)