GoogleMpasAPIを操作してみよう

v3は、API KEYが不要になり、パフォーマンスがよくなったらしい。

 

API v2

API v3

基本的な地図の表示

API KEYの取得を含む

基本 

移動とズームのコントローラ(大)をつける

移動とズームのコントローラ(大)

 

移動とズームのコントローラ(小)をつける 

移動とズームのコントローラ(小) 

 

移動とズームのコントローラを表示しない 

 

移動とズームのコントローラ非表示

ポインタをつける 

ポインタ 

ポインタ 

ポインタをクリックすると吹き出しが出る 

ポインタをクリックすると吹き出し 

 

自作ポインタ(PNG)をつける 

自作ポインタ(PNG)

 

自作ポインタ(GIF)をつける 

 

 

マップ/サテライト切り替えボタンをつける
(地図/航空写真を切り替えられる)  

マップ/サテライト切り替え

 

JSONから複数ポイントの位置を取得しポイント表示 

 

JSONから複数ポイントの位置を取得しポイント表示

 

 

 

 

 

1.API KEYを取得する

GoogleよりAPI KEYを取得する。

詳細工事中
取得したサンプルコードはこんな感じ
「sensor=true」「sensor=false」って何だろう?
 

<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=取得したAPI KEY" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng( 37.4419, -122.1419), 13); } } //]]> </script>

【サンプル表示】KEY取得時のサンプルを使ってGoogleMapを表示してみる(sensor=true)
【サンプル表示】KEY取得時のサンプルを使ってGoogleMapを表示してみる(sensor=false)

3.ポインタをつける

自作ポインタ(GIF)をつけてみる
【サンプル表示】自作ポインタ(GIF)をつけてみる




参考

Google Maps API の Key を取得する
Google Map を使いこなす
Google Maps APIの導入方法
Google Maps Code Generator - Googleマップ自動生成ツール
緯度経度 検索(住所や施設説明からGoogle Mapなどで利用する世界測地系とYahoo!地図情報で利用する日本測地系を同時に検索)