例－８：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[

    var map; 
    function addMarker() {  //マーカーを表示 
        var request = GXmlHttp.create(); 
        request.open("GET", "http://googlemaps.googlermania.com/map/map_example_8.xml" , true); 
        request.onreadystatechange = function() { 
            if (request.readyState == 4) { 
                var xmlDoc = request.responseXML; 
                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 marker = createMarker(mpoint, i); 
                     map.addOverlay(marker); 
                } 
            } 
        } 
        request.send(null);
    }
    
    function createMarker(mpoint, index) { 
        var icon = new GIcon();
        icon.image = "http://googlemaps.googlermania.com/img/marker_flag.png";
        icon.shadow = "http://googlemaps.googlermania.com/img/marker_shadow.png";
        icon.iconSize = new GSize(35, 35);
        icon.shadowSize = new GSize(35, 35);
        icon.iconAnchor = new GPoint(0, 35);
        icon.infoWindowAnchor = new GPoint(18, 11);

        var marker = new GMarker(mpoint,icon); 
        return marker; 
    } 
    function load(){ 
      map = new GMap2( document.getElementById("map")); 
      map.setCenter( new GLatLng(35.684, 139.750), 12 );

      addMarker();  //マーカーをマッピング
    } 
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

投票数:0 平均点:0.00

この記事の1行目に飛ぶ

例－８：XMLファイルを読み込んで、地図上にマーカーをマッピングする その１

例－８：XMLファイルを読み込んで、地図上にマーカーをマッピングするその１