GoogleMap API V3
先月まで仕事でとあるページにGoogleMapを実装させていたのでソレにまつわるTipsをいろいろ
まずGoogleMapを表示させるには
headタグ内
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
headタグ内でgooglemapのAPIをロードします。
URL最後のfalseはPC向けページならfalse、スマホやGPS搭載機向けページならtrueを使用します。(現在地表示ができるようになります)
標準的にjQueryと併用する方も多いので、jQueryのAPI読み込み後に記述して下さい。
<script type="text/javascript"> // jQuery書き出しのお約束 jQuery(function($) { // すでにonload属性で何かJavaScriptが動いていたとしても // 気にせず地図表示させるためのページ表示イベントリスナー google.maps.event.addDomListener(window, 'load', function() { // 地図を表示させる位置(DIV)の取得 var mapdiv = document.getElementById("map_canvas"); // 表示する地図のオプション mapOptions = { zoom: 11, //地図の縮尺 center: new google.maps.LatLng(xx.xxxx, yy.yyyy), 地図の中心地点(緯度と経度) mapTypeId: google.maps.MapTypeId.ROADMAP, 地図の種類(後述) }; // 地図を所定の位置に書き出す呪文 map = new google.maps.Map(mapdiv, mapOptions); }); }); </script>
地図を表示するだけならこれだけで表示できます。
地図の種類ですが、文末の「ROADMAP」を以下に書き換えるだけで、いろんなタイプの地図を表示することができます。
- ROADMAP
- デフォルトの2DMapを表示します。
- SATELLITE
- 空撮写真地図を表示します。
- HYBRID
- 空撮写真とデフォルトの地図レイヤを組み合わせて表示します。
- TERRAIN
- 等高線を引いたような地図を表示します。