最近はWebサイトのアクセスマップなどにGoogleMapが使われていることが多くなってきました。
このGoogleMap、ただWebサイトに設置するだけではなくデザインや機能をカスタマイズ出来ることはご存知でしょうか？
せっかくこだわってデザインしたサイトもGoogleMAPがそのままではもったいないですよね。
そこで、今回はGoogleMapをサイトに設置する方法から、デザインや機能をカスタマイズする方法をご紹介いたします。
準備
まずはheadタグ内にGoogleMap APIを取得するスクリプトを貼り付けます。
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
bodyにはGoogleMapを表示するためのスクリプトを呼び出すonloadイベントと、Mapを表示するDIVタグを用意します。
<body onload="initialize();">
<div id="map_canvas" style="width:100%; height:90%;">
</div>
</body>
これでWebサイトにGoogleMapを表示する準備は完了です。
WebサイトにGoogleMapを表示する
まずはそのままWebサイトにGoogleMapを表示してみましょう。
地図を表示するために必要な情報は、最初に表示する緯度・経度と地図の倍率、地図の種類です。
表示するために必要な最低限のスクリプトがこちらです。
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(35.415272, 136.758887); //緯度・経度
var myOptions = {
zoom: 18, //拡大倍率
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP //地図の種類
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //地図を表示
}
</script>
緯度と経度
緯度と経度はGoogleマップで住所を入力して検索をすると、検索結果のURLに緯度と経度が表示されるのでこれをコピーしてきます。
地図の倍率
地図の倍率は数値で指定します。数値が小さいほど広域の地図になり、数値が大きいほど詳細な地図になります。
最小値は0です。最大値は詳細な地図が追加されるたびに大きくなっていきますが、現時点では21が最大になります。
地図の種類
HYBRID：航空写真上に主要な道路の透明なレイヤを表示します。
ROADMAP：市街地図を表示します。
SATELLITE：航空写真を表示します。
TERRAIN：地形的特徴を持つ地図を表示します。
デモページ
マーカーを表示する
マーカーの表示はgoogle.maps.Markerを使って表示します。
必要な情報は先ほど取得した緯度・経度とマーカーを表示する地図です。
//地図上にマーカーを配置する
var marker = new google.maps.Marker({
position : latlng, //緯度・経度
map : map //表示する地図
});
デモページ
マーカーのアイコンを変える
マーカーのアイコンを変える場合はgoogle.maps.MarkerImageを使って、マーカーを表示する時に使うgoogle.maps.Markerにiconの引数を追加します。
//地図上にマーカーを配置する
var marker = new google.maps.Marker({
icon: new google.maps.MarkerImage(
'icon.png', //画像ファイルのパス
new google.maps.Size(51,41), //アイコンの表示サイズ(縦,横)
new google.maps.Point(0,0)
),
position : latlng,
map : map
});
デモページ
マーカーの場所に地図を移動させる
地図の表示場所を変更する場合はgoogle.maps.MapのpanToという関数を使います。
今回はリンクをクリックすると指定した場所に地図の表示が移動するようにしてみます。
地図を表示するDIVタグのすぐ上にAタグを追加し、onclickイベントにpanToの関数を書きます。関数の引数は移動先のマーカーの緯度と経度だけです。
岐阜オフィスへ移動 //クリックするとマーカーの場所に地図が移動するリンク
デモページ
拡大・縮小する
拡大・縮小はgoogle.maps.MapのsetZoomという関数を使います。
拡大しか出来なさそうな名前ですが、縮小もsetZoomを使って行います。
引数はマップを表示する時に指定した倍率と同じもので、0が一番広域の地図で21が最も詳細な地図になります。
拡大と縮小は標準のマップについている[+]と[-]のボタンや、マウスのホイールでも可能ですが、setZoomを使うことで一気に拡大・縮小が出来ます。
弊社の岐阜オフィスを詳細表示するリンクと、日本全国を広域で表示するリンクで拡大・縮小をやってみたいと思います。
岐阜オフィスを拡大表示
日本全国を表示
function zoomIn() {
map.panTo(new google.maps.LatLng(35.415272,136.758887)); //マーカーの場所を中心に表示
map.setZoom(20); //倍率
}
function zoomOut() {
map.panTo(new google.maps.LatLng(35.415272,136.758887)); //マーカーの場所を中心に表示
map.setZoom(5); //倍率
}
デモページ
マーカーをクリックして情報ウィンドウを表示する。
複数の支店や店舗がある場合はマーカーだけでなく、店舗名や連絡先などを表示したい時もあります。
そのような場合はマーカーをクリックして情報ウィンドウを表示することが出来ます。
まずは下準備として、マーカーがクリックされた時の動きを記載します。今回はクリックされたらオフィスの名前と電話番号が表示されるようにします。
function infoWindowOpen(){
infoWnd.setContent("岐阜：本社オフィスTEL 058-267-1430");
infoWnd.open(map, marker);
}
続いて、マーカーをクリックした時のイベントをgoogle.maps.event.addListenerを使って追加します。
//情報ウィンドウの作成
infoWnd = new google.maps.InfoWindow();
//マーカーがクリックされたら、情報ウィンドウを表示
google.maps.event.addListener(marker, "click", infoWindowOpen);
addListenerの引数は３つあり、上記はマーカーをクリックした時にinfoWindowOpen関数を呼び出すという意味になります。
デモページ
情報ウィンドウのデザインを変える。
先ほどsetContentの中でBRタグを使っていたので気付いた方も見えたかもしれませんが、setContentの中はhtmlタグが記載できます。
cssなども適用できますので、通常のWebサイトを制作するイメージでデザインが可能です。
function infoWindowOpen(){
//店舗名の背景を黒くして文字を白くする。
infoWnd.setContent("
岐阜：本社オフィス
TEL 058-267-1430
“); infoWnd.open(map, marker); }
デモページ
このようにGoogleMAPは自由にデザインや機能をカスタマイズすることが出来ます。皆さんもぜひ試してみてください。
