【GoogleAPI v3】GoogleMapを表示する。
Googleの地図を表示するのにversion3になってかなり便利になりました。
詳細については、Google先生で「Google Map v3」とか「Google Map v2 v3 違い」とかで検索すれば詳しい説明を載せてくれているサイトへ導いてくれます。
ひとまず、Googleの地図を表示するサンプルを載せたいと思います。
詳しい説明については他のサイトを見てくださいってことで、簡単に説明します。
html 6行目
GoogleAPIのURLを指定し、事前に取得しておいたAPIキーを設定します。
javascript 5行目～9行目
表示する地図の初期設定を連想配列で作成しています。 (MapOptionsの詳細については→こちら)
center:地図の中心座標
zoom:地図の表示精度レベル(1(広域)～18(狭域))
mapTypeId:表示する地図のタイプ(ROADMAP = 道路地図)
javascript 10行目
地図オブジェクトを作成し、第1引数のDOMオブジェクト内に表示します。
余談...
javascript 10行目のgoogle.maps.Mapオブジェクト生成の第1引数はjQueryの書き方ではダメでした。
($('div#map_canvas')ではエラーとなる。)
後々地図にマーカーや吹き出しを付けたり動的に表示を変更する場合は、
google.maps.Mapオブジェクトをグローバル変数宣言したほうが何かと便利です。
