Google Mapsを使ってみる

11月 19th, 2006

Google Mapsをカスタマイズしてサイトで使うための覚え書き。
オリジナルマーカー、ラージコントローラサンプル↓





いろんなツールもあるようですが、使うとしたらほぼこのパターンだと思うので
手書きの修正の方が早いかな。

1.まずはGoogleMaps APIを取得
http://www.google.com/apis/maps/signup.html


2.所在地の緯度経度を取得
http://www.geocoding.jp/

3.prototype.jsをゲットしてアップ。(windowsIEエラー対策)


4.マーカーアイコンを用意(透過PNG)

5.以下のソースをAPIキーなど適宜修正して貼り付け
 ※1行目は表示範囲をピクセルで指定


<div id=”map” style=”width: 400px; height: 400px”></div>

<script src=”http://maps.google.com/maps?file=api&v=2&key=APIキー” type=”text/javascript” charset=”utf-8″></script>

<script src=”prototype.jsへのパス”></script>


<script type=”text/javascript” >
//<![CDATA[

Event.observe(window, ‘load’, function () {

var map = new GMap(document.getElementById(‘map’));
//所在地の座標設定
var lon = 136.899067 ;//経度
var lat = 35.185574;//緯度
var myoffice = new GPoint(lon,lat);
// 数値でデフォルトの拡大範囲を変更。0-17
map.centerAndZoom(myoffice , 0);

//Mapコントロール(GSmallMapControlで小さいコントローラ)
map.addControl(new GLargeMapControl());

var baseIcon = new GIcon();

// マーカーアイコン画像サイズ
baseIcon.iconSize = new GSize(150, 54);
// マーカーアイコン表示位置(所在地点からの相対位置)
baseIcon.iconAnchor = new GPoint(15, 25);

var icon = new GIcon(baseIcon);

// マーカーアイコン画像のパス
icon.image = ‘icon.png’;

var marker = new GMarker(myoffice,icon);
map.addOverlay(marker);
});
//]]>
</script>



※WindowsIE対策を追記

Related Posts