Google Mapsを自サイトに設置する2

*この記事は、Google Maps APIバージョン1(v1)の時点での記事です。v1ベースでは現状動作しますが、バージョン2(v2)については、 Google Maps v2を設置する(1)v2用意訳とサンプルなどもご参照ください。

前回は、「Google Mapsを自サイトに設置する」ということでとりあえず、自分のサイトに設置して場所をマークする「マーカー」を表示するところまで試してみました。 ( 設置の方法→Google Maps 設置までの流れ )

今回は、その地図に影付きのフキダシでメッセージをポップアップする「情報ウインドウ」を表示してみます。たとえば、お店や会社の場所をマークする時などにこれを使えば、わかりやすい説明ができると思います。

今回もサンプルは、拙著、『入門Ajax』より引用しつつ解説してみます。

ただし、今回はまだ、Google Maps APIに用意されたAjaxなクラス「GXmlHttp」などは利用しません。それは、次回のお楽しみです。

地図に情報ウインドウを表示する


このサンプルは、地図の中心にレインボーブリッジを表示し、そこに「立体ふきだし」のような情報ウインドウを表示します。そして、そのウインドウの中には「レインボーブリッジです」と出力しています。

このグリグリ地図を表示するのに必要なコードはわずかに下記の通りです。

【上記サンプルのソース】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <head><title>Ajax</title>
    <!-- 下記キーは、必ず自分専用のものをhttp://www.google.com/apis/maps/
         で取得して使ってください -->
     <script 
       src="http://maps.google.com/maps?file=api&v=1&key=自分のキー&datum=wgs84" 
       type="text/javascript"></script>
  </head>
  <body>
  
    <!-- このDIVへ地図を表示します -->
    <div id="map" style="width: 500px; height: 400px"></div>
    
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    
    //東京タワーの経緯度とズーム値(整数で0が詳細)を指定します
    //  経緯度は、ここ↓でも調べられます
    //       http://jsgt.guide.withabout.net/guide_jsgt/gp333/ajax/newmon/samples/chapter03/03-31/getlatlon2_for_wgs84.htm
    map.centerAndZoom(new GPoint(139.76173639297485, 35.637043219054505), 2);

    //情報ウインドウ内の文字列を指定します
    var msg = document.createTextNode("レインボーブリッジです");
    
    //情報ウインドウ表示
    map.openInfoWindow(map.getCenterLatLng(),msg);

    
    //]]>
    </script>

  </body>
</html>
「new GPoint(139.76173639297485, 35.637043219054505)」の引数は、レインボーブリッジの経緯度座標です。この値は、たとえば、「経度・緯度を調べる」などで取得することが可能です。

centerAndZoom()は、地図を動かして、引数で与えられたGpointを地図の中心に据えてくれるメソッドです。第2引数はズーム値で0が詳細、数字が大きくなるほど広域が表示されます。

そして、createTextNodeは、テキストノードを作成するDOMのメソッドで、次のopenInfoWindow()、つまり、情報ウインドウを表示するメソッドの第2引数として渡しています。openInfoWindow()の第1引数へは、getCenterLatLng()というメソッドを使って、地図の中心座標を渡し、情報ウインドウの表示位置を指定しています。

ただ、このようにフキダシの中をDOMで書くというのは慣れない方には、手間がかかります。そこで、次に、直接HTMLを指定して情報ウインドウを書き出すメソッドとサンプルを紹介します。