JavaScript

Javascript

Google Maps API Ver.3 で地図を表示

久しぶりにGoogleMap APIを利用しようとして、

今更なんですが、

「Ver.2終了してる」ってなってませんか?

 

私は今日なりました。

 

Ver.3に切り替わろうとしている事は知っていたんですが、

なんせ最近はたまたまですが、あまりAPIの利用機会が無かったもんで↓↓

 

といこうとで、

早速Ver.3でGoogleMapを表示させて見ることに!!

 

取り敢えず、東京駅周辺の地図を表示させてみます。

 

ソースはこんな感じです↓

簡単に説明すると、

まずinitialize()という関数を呼び出します。

 

その中で、
geocode()メソッドを使ってaddressに設定した住所の座標を取得します。

 

さらに、
geocode()の第2オプションに設定したコールバック関数(今回は「callback」としておきます)が呼び出されます。

 

そうすると、
コールバック関数にはresultsとstatusが返されるので、

 

statusがOKの場合、

results[0].geometry.locationに座標を入れてくれます。

 

あとは、

optsという変数に地図の表示オプションを設定して、

canvasというidを指定してやった場所に地図を表示させてやるだけです。

 

今回は、ついでにマーカーも表示させてやっていますが、

吹き出しを表示させたい場合などは自分で調べてください。

 

「google.maps.InfoWindow」と検索すれば、

情報は腐るほど出てくると思います。

 

最後に、

念の為「status」に応じたエラーコードも忘れずにしてください。

 

ちなみに、

今回は

http://www.nanchatte.com/map/getAddressByLatLng.html

を参考にさせて頂きました。

関連記事

  1. JavaScript

    Javascript

    setInterval()とsetTimeout()

    Javascriptでタイマー設定する時に使用する関数にsetTime…

  2. JavaScript

    Javascript

    「jQuery ui Datepicker」の基本的な使い方

    先日フォームの作成依頼があった際に、日付欄はユーザーに直接入力させ…

  3. JavaScript

    Javascript

    IE10でLightboxが。。。

    自作の画像ギャラリーが動作しなくなったと報告がありました。&nbs…

  4. JavaScript

    Javascript

    videoタグを使用する際には、html5mediaもご一緒に!!

    動画をサイト上に載せる場合、HTML5でのコーディングがメインにな…

  5. JavaScript

    Javascript

    GoogleMap APIでAPIキーの発行が必須に!!

    久しぶりにGoogleMap APIを利用した案件の対応を行ったんです…

  6. JavaScript

    Javascript

    getPanoramaByLocation()メソッド

    前回の続きで、ストリートビュー未対応地域を想定した…

最近の記事

  1. PHP
  2. Python
  3. Python
  4. PHP
  5. 宅建
PAGE TOP