Google Maps API

ボクが設置した例。
このように、サイト内にgoogle mapの表示ができる。
ショップmapとかに便利。
コメントも入れられます。

このAPI使うにはgoogleのKeyの取得が必要。
Key取得はここから。
無料です。
Key取得には無料のGoogleアカウントも必要。
同時に取得できます。

■使用にあたっての注意ポイント
・XHTMLで
・文字コードはUTF-8で
・埋め込むページがHTMLやShift-JISの場合、iframe要素を使い、map専用ページを読み込むのがベター

<div id="map" style="width: 760px; height: 350px"></div>

<script type="text/javascript" src="http://maps.google.co.jp/maps?file=api&amp;v=1&amp;key=あなたの登録したKEY"></script>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.06983375549316, 36.39061987098032), 1);
var point = new GPoint(139.06983375549316, 36.39061987098032);
var marker = new GMarker(point);
map.addOverlay(marker);
var offset = new GSize(0, -20);
map.openInfoWindow(map.getCenterLatLng(), document.createTextNode("Le Confort"), offset);
//]]>
</script>

■各パラメーターの説明
●header内のジャバスクリプト
google map登録時の最後に吐き出すソースにはheader内にかかれているが、このようにbody内でもOK。
DWのテンプレートなどで、ヘッダーがっちり固めちゃってる時など、body内に書いちゃおう。

●<div id="map" style="width: 760px; height: 350px"></div>
ここで地図表示サイズの指定。ピクセル指定。

●map.addControl(new GSmallMapControl());
地図左に表示されるコントローラーパラメーター。
GLargeMapControlと変更すると、スライドバーも表示される。
記述無しで、コントローラーは表示されない。

●map.addControl(new GMapTypeControl());
地図右上に表示されるマップ/サテライト切り替えボタンの表示。
地方だとサテライトはほぼ機能しないので、なくていいかも。
記述無しで、切り替えボタンは表示されない。

●map.centerAndZoom(new GPoint(139.06983375549316, 36.39061987098032), 1);
中心点の緯度、経度の指定。
経度と緯度の算出はこちらのサンプルを使うと便利。
「1」はデフォルトの縮尺。「0」が最大ズームとなる。

●var point = new GPoint(139.06983375549316, 36.39061987098032);
●var marker = new GMarker(point);
●map.addOverlay(marker);
マーカー表示。
マーカー表示させるポイントの緯度、経度を指定し、マーカー設置パラメーターにて表示。

●var offset = new GSize(0, -20);
●map.openInfoWindow(map.getCenterLatLng(), document.createTextNode("Le Confort"), offset);
オフセットは(x座標、y座標)指定。
マーカーの黒丸の位置を設定できる。これはデフォルトで問題ないでしょう。

"Le Confort"の""内の文字列が、インフォメーションウインドウに表示される。
テキストへのマークアップは「map.openInfoWindowHtml()」を使う。
ex.)

map.openInfoWindowHtml(map.getCenterLatLng(), '<div style="width: 200px;"><a href="http://www.lecon.jp/" target="_top">Le Confort</a><br />群馬県前橋市本町<br />北欧家具メインなインテリアショップです。</div>', offset);