今更だけどGoogle Maps Javascript API V3

top2012_0430.jpg
先日久々にGoogleMap apiを使う作業がありました。
その時の率直な感想として「手軽になった。」と感じました。
以前Googlemapをよく利用していた時はkeyが必要だったバージョン2を使用していました。
今更ですがGoogle Maps Javascript API V3を使用するにあたって簡易的な事を書き留めておこうと思います。
 
※JSが分かる方はもっとシンプルでスマートソースになると思います。
 

ちなみに今回参考にしたサイトは下記のサイトです。
Google Maps API V3の特徴や基本的な設置方法知ることができます。

■新APIの基本の使い方を解説
手軽になった!Google Maps API V3
http://ascii.jp/elem/000/000/424/424032/#ixzz1rYqCtXyh


■Google Maps入門(Google Maps JavaScript API V3)
http://www.ajaxtower.jp/googlemaps/

 地図へマーカーを配置/削除
 http://www.ajaxtower.jp/googlemaps/gmarker/index4.html


■GoogleDevelopers-Google Maps JavaScript API V3
https://developers.google.com/maps/documentation/javascript/?hl=ja
※リファレンスにプロパティや解説が記載(英語表記。日本語もほしいですねー)

オフィシャルのリファレンスはこちら
https://developers.google.com/maps/documentation/javascript/reference?hl=ja

それではGoogle Maps JavaScript API V3の設置ついて書き留めいこうと思います。

1)はじめにヘッダー部分にscriptを読み込みます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

※sensorが必須となりtrueもしくはfalseでの指定。ちなみにこのsensorですが公式ドキュメントだと下記の様な役割があるそうです。

このアプリケーションがユーザー位置情報取得にセンサーを使用するかどうかを示すための sensor パラメータを設定する必要があります。この例では、パラメータの値を true または false に明示的に設定する必要があることを強調するために、true_or_false を変数のままにしてあります。

2)次にhtml内にGoogleマップを表示する為のソースを追加します。

3)表示用のjavascriptを記載。※今回はヘッダー内に書きます。

	google.maps.event.addDomListener(window, 'load', function() {
	var mapdiv = document.getElementById('GoogleMapArea');//div要素のid
	var myOptions = {
		zoom: ズーム,
		center: new google.maps.LatLng(緯度, 経度),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scaleControl: true,
	};
	var map = new google.maps.Map(mapdiv, myOptions);
});

4)緯度、経度を準備

・googleへアクセスしひとまず住所を入力します。
・表示された場所で問題無い事を確認したら画面左上のリンクマークをクリックします。
・「このリンクをメールに貼り付けて地図を共有できます。」という画面が表示されたらhttp~から始まるアドレスを全て選択しメモ帳なりにペーストして下さい。

20120410_img1.gif

長いアドレスの中から「35.66303,139.707706」みたいな値を取得してください。
※場合によっては2つ同じ様な値があることもあるみたいです。どちらか正しい方の値を使用しましょう。

5)javascript内に緯度と経度を記載する。

6)ココまでで、一旦表示確認をしてみましょう。

うまく表示されたらひとまずこれで完了です。

■マーカーと吹き出しを使いしてみよう
はじめに下記のソースを追加しよう。(追加する場所はvar map の下)

var map = new google.maps.Map(mapdiv, myOptions);

var marker1 = new google.maps.Marker({
	position: new google.maps.LatLng(経度, 緯度),
	map: map, 
	title: 'マーカーにマウスを合わせた時に表示されるテキスト'
});

var infowindow1 = new google.maps.InfoWindow({
	content: '吹き出しに内に表示する内容。ココにはhtmlのタグも使用できます
改行されます。' }); google.maps.event.addListener(marker1, 'click', function() { infowindow1.open(map,marker1); });

1)マーカーの設定
マーカーの設置には下記のコードを追加します。
※今回は基本的なマーカー

var marker1 = new google.maps.Marker({
	position: new google.maps.LatLng(経度, 緯度),
	map: map, 
	title: 'マーカーにマウスを合わせた時に表示されるテキスト'
});

・position: new google.maps.LatLng(経度, 緯度)
マーカーが表示される位置

・map: map
マーカーを表示するマップを指定
※var map = new google.maps.Map(mapdiv, myOptions);
上記 map と合わせる必要がある。例えば1ページ内に複数のマップを表示する時は
ここが被っているとうまく表示されないことがあります。自分みたいにJSがよく分かって
いない者の解釈としては、1ページ内で複数のマップを表示する時は、ここが一緒にならないに
気をつけるという間隔です。

・title: 'マーカーにマウスを合わせた時に表示されるテキスト'
マップ上のマーカーにマウスを合わせた時に表示されるテキスト

2)吹き出しの設定
吹き出し内に表示する内容です。

var infowindow1 = new google.maps.InfoWindow({
	content: '吹き出しに内に表示する内容。ココにはhtmlのタグも使用できます
改行されます。', size: new google.maps.Size(200, 111) //吹き出しの大きさ });

・content: '吹き出しに内に表示する内容。ココにはhtmlのタグも使用できます<br>改行されます。'
吹き出しを表示際に表示される内容です。タグにcssの設定も使用できるみたいです。

・size: new google.maps.Size(200, 111)
吹き出しのサイズを設定。※自分が設定した際はcontent内の内容によって変化しました。

3)吹き出しを表示に関するクリックイベント
吹き出し設定部分の下に下記を追加します。※吹き出しとワンセットな感覚があります。

google.maps.event.addListener(marker1, 'click', function() {
	infowindow1.open(map,marker1);
}); 

クリックイベントを使用して、引き出しをopneするという内容みたいです。
もし一つのマップに複数のマーカーがあり、クリックすることで新しい吹き出しが表示され、
それまで開いていたマーカーを消す事も、ココで設定すれば可能です。

上記内容がうまくいけばサンプル用意したページのマップを掲載することが可能となります。