Google Maps API Documentaion サクっと基本部分だけ

/web/javascript

Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

Google Mapsのドキュメントから基本部分だけサクッと抜粋。この辺押さえておけば、普通に使う分には大丈夫でしょう。あとは必要に応じてリファレンス浚う感じで良いかな～、とか。

  1. 基本ソース
  2. 対応ブラウザ・チェック
  3. 基本部分
  4. 移動（アニメーション）
  5. コントロール・ボタン追加
  6. マーカー設置
  7. 線を引く
  8. イベント・リスナー
  9. 情報ウィンドウを開く
  10. マーカーの上に情報ウィンドウを開く
  11. 情報ウィンドウ（タブ付）を開く
  12. オリジナル・アイコンを設置する
  13. ドラッグ可能なマーカーを設置する
  14. XMLファイルを利用する
  15. メモリー・リーク対策
  16. 関連記事、公式資料

サンプル用意したほうが良いかな？ 催促されたら考えよう。 → ということで、用意してみた

基本ソース

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  6. <title>Google Maps JavaScript API Example</title>
  7. <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg"></script>
  8. <script type="text/javascript">
  9. //<![CDATA[
  10.  
  11. function load() {
  12. if (GBrowserIsCompatible()) {
  13. var map = new GMap2(document.getElementById("map"));
  14. map.setCenter(new GLatLng(37.4419, -122.1419), 13);
  15. }
  16. }
  17.  
  18. //]]>
  19. </script>
  20. </head>
  21. <body onload="load()" onunload="GUnload()">
  22.  
  23. <div id="map" style="width: 500px; height: 300px"></div>
  24.  
  25. </body>
  26. </html>

Google のお手本。必ずしも onload で呼び出す必要はないけれど、実行タイミングによってはエラーが出たりするので気をつけよう。コードは function なりオブジェクトなりでカプセル化してやると良いように思う。

ちなみに、API Keyはディレクトリ単位で入手する必要がある。「http://archiva.jp/」で入手したAPI Keyは「http://archiva.jp/web/」では使えない。サブドメインも不可。

対応ブラウザ・チェック

  1. if (GBrowserIsCompatible()) {
  2. var map = new GMap2(document.getElementById("map"));
  3. map.setCenter(new GLatLng(37.4419, -122.1419), 13);
  4. }

»対応ブラウザのリスト

基本部分

  1. var map = new GMap2(document.getElementById("map"));
  2. map.setCenter(new GLatLng(35.319031, 139.550703), 14);

マップを表示するボックスを指定。初期表示位置とズーム値を設定する。目的地の座標を取得するには、Geocodingなんかが便利。

移動（アニメーション）

  1. window.setTimeout(function() {
  2. map.panTo(new GLatLng(37.4569, -122.1569));
  3. }, 1000);

指定した座標まで移動する。

コントロール・ボタン追加

  1. map.addControl(new GSmallMapControl());
  2. map.addControl(new GLargeMapControl());
  3. map.addControl(new GMapTypeControl());
  4. map.addControl(new GSmallZoomControl());
  5. map.addControl(new GScaleControl());
  6. map.addControl(new GOverviewMapControl ());

スライダーとかズームコントロールとか、航空写真への切り替えとか。

マーカー設置

  1. var point = new GLatLng(35.673020,139.552449);
  2. map.addOverlay(new GMarker(point));

マップに刺さってるピンみたいなやつ。

線を引く

  1. var points = [];
  2. points.push(new GLatLng(35.314937,139.546167));
  3. points.push(new GLatLng(35.319857,139.551422));
  4. points.push(new GLatLng(35.320093,139.552432));
  5. map.addOverlay(new GPolyline(points));

経路表示とかに使われてるライン。基本は配列なので、以下のように書くこともできる。

  1. var polyline = new GPolyline([
  2. new GLatLng(35.314937, 139.546167),
  3. new GLatLng(35.319857, 139.551422),
  4. new GLatLng(35.320093, 139.552432)
  5. ], "#FF0000", 10);
  6. map.addOverlay(polyline);

なお、「IEで見るためには以下の記述を付けろ」とのこと

  1. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

イベント・リスナー

  1. GEvent.addListener(map, "moveend", function() {
  2. var center = map.getCenter();
  3. document.getElementById("message").innerHTML = center.toString();
  4. });
  5. map.setCenter(new GLatLng(37.4419, -122.1419), 13);

イベントを付加する。上記はマップ移動後の座標を示し、下記はマーカーをクリックで設置／撤去の切り替える。

  1. GEvent.addListener(map, "click", function(marker, point) {
  2. if (marker) {
  3. map.removeOverlay(marker);
  4. } else {
  5. map.addOverlay(new GMarker(point));
  6. }
  7. });

»GMap2 events

情報ウィンドウを開く

  1. map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world"));

吹き出しメモみたいなやつ。

マーカーの上に情報ウィンドウを開く

  1. function createMarker(point, number) {
  2. var marker = new GMarker(point);
  3. GEvent.addListener(marker, "click", function() {
  4. marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");
  5. });
  6. return marker;
  7. }
  8. map.addOverlay(createMarker(point, 1));

マーカーをクリックで、その場所についての情報を表示。

情報ウィンドウ（タブ付）を開く

  1. var infoTabs = [
  2. new GInfoWindowTab("Tab #1", "This is tab #1 content"),
  3. new GInfoWindowTab("Tab #2", "This is tab #2 content")
  4. ];
  5. var marker = new GMarker(map.getCenter());
  6. GEvent.addListener(marker, "click", function() {
  7. marker.openInfoWindowTabsHtml(infoTabs);
  8. });
  9. map.addOverlay(marker);
  10. marker.openInfoWindowTabsHtml(infoTabs);

吹き出しにタブ切り替えを付ける。

オリジナル・アイコンを設置する

  1. var icon = new GIcon();
  2. icon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
  3. icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
  4. icon.iconSize = new GSize(12, 20);
  5. icon.shadowSize = new GSize(22, 20);
  6. icon.iconAnchor = new GPoint(6, 20);
  7. icon.infoWindowAnchor = new GPoint(5, 1);
  8.  
  9. var point = new GLatLng(35.314937,139.546167);
  10. var marker = new GMarker(point, icon);
  11. map.addOverlay(marker);

マーカーの画像を自分で用意するときに。オブジェクトの継承を利用して以下のように書けば、、複数のアイコンを使いまわすことができる。同じ大きさ／形で色だけ違う場合とか。

  1. var icon2 = new GIcon(icon);
  2. icon2.image = "http://www.google.com/mapfiles/marker2.png";
  3. var marker = new GMarker(point, icon2);

ドラッグ可能なマーカーを設置する

  1. var point = new GLatLng(35.314937,139.546167);
  2. var marker22 = new GMarker(point, {draggable: true});
  3. map.addOverlay(marker22);

XMLファイルを利用する

  1. <markers>
  2. <marker lat='35.31945' lng='139.551371' shop='イワタコーヒー店'><![CDATA[ <a href="./shop.html">イワタコーヒー店</a><br />（カフェ） ]]></marker>
  3. <marker lat='35.319857' lng='139.551422' shop='なると屋＋展座'><![CDATA[ <a href="./shop.html">なると屋＋展座</a><br />（和食） ]]></marker>
  4. <marker lat='35.320093' lng='139.55243' shop='長兵衛'><![CDATA[ <a href="./shop.html">長兵衛</a><br />（居酒屋） ]]></marker>
  5. ... goodness ...
  6. </markers>

上記のようなXMLファイルから、情報を取得する場合は以下のようになる。

  1. var request = GXmlHttp.create();
  2. request.open("GET", "/shops.xml", true);
  3. request.onreadystatechange = function() {
  4. if (request.readyState == 4) {
  5. var xmlDoc = request.responseXML;
  6. var markers = xmlDoc.documentElement.getElementsByTagName("marker");
  7.  
  8. for (var i = 0; i < markers.length; i++) {
  9. var lat = parseFloat(markers[i].getAttribute("lat"));
  10. var lng = parseFloat(markers[i].getAttribute("lng"));
  11. var point = new GLatLng(lat,lng);
  12. var html = markers[i].firstChild.nodeValue;
  13. var shop = markers[i].getAttribute("shop");
  14. var marker = createMarker(point,html,shop);
  15. map.addOverlay(marker);
  16. }
  17.  
  18. }
  19. }
  20. request.send(null);

XML HTTP Requestを知っていれば判りやすい。XHRに関しては以前書いた記事を参照のこと。

以下は、もうちょいシンプルなメソッド。ただしHTTP GET リクエストで呼び出し、なおかつreadystate による状態のチェックをしない場合。

  1. GDownloadUrl("data.xml", function(data, responseCode) {
  2. var xml = GXml.parse(data);
  3. var markers = xml.documentElement.getElementsByTagName("marker");
  4. for (var i = 0; i < markers.length; i++) {
  5. var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
  6. parseFloat(markers[i].getAttribute("lng")));
  7. map.addOverlay(new GMarker(point));
  8. }
  9. });

メモリー・リーク対策

  1. <body onunload="GUnload()">

関連記事

公式資料

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。

4 Comments

dai wrote:
初めまして。gmap関係探してるうちに、たどり着きました。他日記も見させていただきましたが、素晴らしい内容で、読み応えあります！さて、だいぶ前の記事で申し訳ないですが、GMAP関係のサンプル作っていただけると嬉しいです。催促されたらと書いておられましたので、催促してみますｗ　お忙しくなければ、宜しくお願いします。 2007–10–03 10:52
Sig. wrote:
催促されちゃったｗ
ということで、適当コーディングですが、この記事書いたときに作ってた奴を置いてみます。
ちょっと思うところがあるので、ちゃんとした奴は機を改めてでも。

http://archiva.jp/test/set/gmaps_sample/index.html

久しぶりに見てみると、本家のドキュメントもけっこう変わってますね。
いちお本家にもサンプルは置いてあるんですが ...パーマリンクってなんだろう... --) 2007–10–04 03:45
dai wrote:
Sigさん、アリガトウございます！あまりにも早いご対応に、嬉しいです!　新規作成されたら、またぜひ記事アップお願いします！私的に、xhtml+CSSにて、色んな会社のHPを制作してますが、javaやプログラミング言語は、精通しておらず、sigさんのサイトは凄く私的に、読み応えあります！今後も、勝手に期待しておりますので、頑張ってくださいませ。アリガトウございました！ 2007–10–05 10:51
dai wrote:
Sigさん、お久し振りです。Gmapの催促させて頂いたdaiと申します。あれから、色々と勉強させて頂き、テストしてました。色々とwebで調べていくうちに、人それぞれ、javascriptのコード表記が微妙に違ったりで、色々テストしましたが、xmlからの読み込む場合において、Sigさんのコード表記の仕方が一番、ストレスなくマーカーの表示が速く、動きがもっさりしてなかったです。最高ですっと良いにきたのが発端・・・

また、不明な点が出てきたので、お暇な時に、お願いしたく思います。


■質問１：xmlをジオコーディングで、マーカー表示

色々調べていくうちに、各スポット毎に、経度緯度を調べて、掘り込む作業を繰り返してましたが、ジオコーディングのapiが見つかり、なんと住所から経度緯度を割り出す方法が載ってました。

しかし、多くのページが、フォーム内に住所を書いて検索すると、その経度緯度を発見させてマーカー表示させています。

これでは、少し実用性がないので、以前Sigさんに書いていただいたxml内に、経度緯度を書かず、住所とそれ以外の要素を表記（例えば、住所をaddressと）し、
html内のjavascriptで、addressを読み込むと同時にジオコーディング（経度緯度を算出）し、googlemap上にxmlの内容に沿ってマーカーが表示される方法が出来たら最高だ！っと思っております。

こんな事って出来るんでしょうか？
簡単さってなもんでしたら、よければ、またお時間あられるときに、作成いただけましたら、
何とも嬉しいです。


■質問２：複数のxmlの表示の仕方

質問１とあわせてなんですが、例えば、観光スポットのサイトを作成している場合、京都観光スポットマップと、大阪観光スポットマップ、東京・・・と複数のxmlに分けている場合、ユーザーからしたら、いったんページを脱出し、他のスポットマップに飛ぶっていうのは、アクセスしにくいっと思い、一つのgooglemap上で、複数のxmlを読み込み、例えば、京都スポットマップリンクを押すと、京都スポットマップxmlを読み込み、googlemap上に表示したり・・・

ってのがやりたいですが・・・これは、色々と勉強して、なんとか出来そうなんですが・・・どうもコードが汚くて
もっさりしてしまいます。そこで、Sigさんならどういう風に、されるのかな？っと思い、ご質問させて頂きました。

以上、
勝手に長々と書いてしまいましたが、ほんとに、お暇な時に、今日はノッテルゼ！ってな時に
また、htmlとxmlを書いていただけると、至極嬉しく思います。 2007–10–22 10:49