今更だけどGoogle Maps Javascript API V3
ちなみに今回参考にしたサイトは下記のサイトです。
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~から始まるアドレスを全て選択しメモ帳なりにペーストして下さい。
長いアドレスの中から「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するという内容みたいです。
もし一つのマップに複数のマーカーがあり、クリックすることで新しい吹き出しが表示され、
それまで開いていたマーカーを消す事も、ココで設定すれば可能です。
上記内容がうまくいけばサンプル用意したページのマップを掲載することが可能となります。