例－19：XMLを読み込んでマーカを表示、マーカの吹き出し内に写真を表示したい

XMLを読み込んでマーカを表示、マーカの吹き出し内に写真を表示するサンプル

<!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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function createMarker(mpoint, spot, photo) { 
        //----- マーカを作る ------//
        
        //表示するHTMLを作成
        var html="<div><b>"+spot+"</b></div>"
                +"<p>"
                +"    <img src='"+photo+"' ></center>"
                +"</p>"
                +"<div><a href='http://www.yunphoto.net' target='_blank'>Photo by (c)Tomo.Yun</a></div>";
                        //マーカを作成
        var marker = new GMarker(mpoint);
        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);
        });
        return marker; 
    }
    function load(){ 
      var map = new GMap2( document.getElementById("map")); 
      map.setCenter( new GLatLng(35.684, 139.750), 6 );
      
      //----- XMLを読み込んで、地図にマーカを追加 ------//
      GDownloadUrl("/map/map_example_19.xml",function(data, responseCode) {
          var xmlDoc = GXml.parse(data);
          var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 
          for (var i = 0; i < markers.length; i++) { 
               var mpoint = new GLatLng( 
                   markers[i].getAttribute("lat"), 
                   markers[i].getAttribute("lng") 
               ); 
               var spot=markers[i].getAttribute("spot");
               var photo=markers[i].getAttribute("photo");
               var marker = createMarker(mpoint, spot, photo);
               map.addOverlay(marker);
          } 
      });
    } 

     //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

読み込むXML　：　http://googlemaps.googlermania.com/map/map_example_19.xml

投票数:0 平均点:0.00

この記事の1行目に飛ぶ