Google Maps APIを使って地図を表示させてみよう!

2014/05/17

googleMapsApi

こんにちは!
今回はGoogle Maps APIを使って地図を表示させてみたいと思います。

Google Maps APIを使うとGoogle Mapを表示したりカスタマイズする事ができます。

 

準備

まずはheadの中に下記のスクリプトを埋め込みます。
※最後のtureは位置情報を使うか使わないかでtureかfalseを入力します。

 

次にbodyタグにonloadをつけ、地図を表示したい場所に下記のコードを書きます。
※widthとheightの数値はお好みに変更してください。

 

地図を表示させてみよう!

Javascriptのファイルを作り読み込ませて、下記のスクリプトを書きます。

※二行目に経緯度を書きます。経緯度の取得の仕方がわからない方は下に載せていますので参考にして下さい。

DEMOページを見る

 

経緯度の取得の仕方

Google Mapを開き、住所を入れてマーカーの所で右クリックし、この場所についてを選択します。

googleMapsApi1

 

左上の住所の下に経緯度が表示されます。

googleMapsApi2

 

地図を表示させる基本はこんな感じになります。

以上でGoogle Maps APIを使って地図を表示させてみようでした。

topへ戻る