menu

gMapsSandbox

Javascript API V3 Geocoding API Other Contents
gMapsSandbox / Javascript API V3

Google Maps API V3 基礎の基礎

基礎の基礎。ただマップに地図を表示するだけ。
たったそれだけでも、会社概要に掲載する地図が作れるもんね。カンタン、カンタン。

まずはHTML要素として、地図を表示するためのDIVを配置。あとでJavaScriptからコントロールするので、適当にIDを振っておきましょう。

ここでワンポイント! 地図を表示するためのボックス(この場合は div#map-canvas)に heightが未設定だと、0pxのボックスになっちゃいます。忘れずに設定しましょう。今回は style 属性で指定していますが、CSSに記述するほうがスマートです。

それからあとは、JavaScriptで。
下のコードでGoogle Maps APIを呼び出します。

YOUR_API_KEY という部分は、Maps JavaScript API を利用する上で必要な API キーです。
取得に関しては、公式ドキュメントの キーの取得、認証 を参照してください。

で、この末尾にある callback=initMap という部分が、「API が読み込み完了したら、initMap という関数を実行してね」って意味です。

というわけで、地図を描画するための関数 initMap を作成しましょう。ざっくり以下のとおり。

これで地図が表示されます。

マーカーを1つだけ追加するには、var marker = ... で始まる4行を追加してください。

これまでに書いたコードをまとめると以下のとおり。

以上で完了。カンタンでしょ?