Google Mapsを使ってみる

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対策を追記