主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

Google Map API v2 を使って、ページに地図を表示する(マーカー付けて)

<script src="http://maps.google.co.jp/maps?file=api&hl=ja&v=2&key=取得したAPIキー" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(地図の座標),19);

var marker = new GMarker(new GLatLng(マーカーの表示場所));
map.addOverlay(marker);
}
}
GEvent.addDomListener(window, "load", load);
GEvent.addDomListener(window, "unload", GUnload);
//]]>
</script>

あとは、出したいところに

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


2010/7/30追記:

コメントでご指摘いただきました。

上記は、Google Map API v2です。今後のことを考えると、Google Map API v3で実装するのが良いようですが、ちょっと「v2」のところを「v3」に書き方を変えるだけ、とかではなさそうなので、取り急ぎ、下記、参考リンクを書いておきます。

なんか、はてなっぽい感じになってきました。笑

参考:手軽になった!Google Maps API V3