

はじめまして！

現在、以下のGoogle Maps公式サイトを参考にしながら、XMLファイルを読み込みマップに表示させようとしている者です。  
<https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja#createtable>

上記のURLの最後に、XMLファイルをよみこみピンを表示させるサンプルコードが記載されていたのですが、ピンが表示しませんでした。

var customIconsのレストラン、バーの部分を自分のXMLファイルのタイプに書き換えることはもちろんのこと、

[code]

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    
[/code]

の部分を

[code]

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=略"></script>
    
[/code]

に変更しても変化はありませんでした。

このコードをご覧になって、何かおかしい部分等ございましたら是非ご教授ください!!

よろしくお願い申し上げます。

[code]

    <!DOCTYPE html >
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>PHP/MySQL & Google Maps Example</title>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
        <script type="text/javascript">
        //<![CDATA[
    
        var customIcons = {
          restaurant: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
          },
          bar: {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
          }
        };
    
        function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(47.6145, -122.3418),
            zoom: 13,
            mapTypeId: 'roadmap'
          });
          var infoWindow = new google.maps.InfoWindow;
    
          // Change this depending on the name of your PHP file
          downloadUrl("phpsqlajax_genxml.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var name = markers[i].getAttribute("name");
              var address = markers[i].getAttribute("address");
              var type = markers[i].getAttribute("type");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              var html = "<b>" + name + "</b> <br/>" + address;
              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon
              });
              bindInfoWindow(marker, map, infoWindow, html);
            }
          });
        }
    
        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }
    
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request, request.status);
            }
          };
    
          request.open('GET', url, true);
          request.send(null);
        }
    
        function doNothing() {}
    
        //]]>
    
      </script>
    
      </head>
    
      <body onload="load()">
        <div id="map" style="width: 500px; height: 300px"></div>
      </body>
    
    </html>
    
[/code]


CC BY-SA 3.0
2015-05-19T13:50:11.943
10382
2015-05-20T00:22:33.577
9722
question
javascript google-maps
Google Mapsのピンが表示されない!


`phpsqlajax_genxml.php`でXMLを読み込み、文字列を返すようになっていますがこのファイルは用意していますか？

XMLデータの箇所をダミーデータにしたら表示されましたので、XMLデータの読み込みができていないと思います。

[code]

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };
    
    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;
    
      // Change this depending on the name of your PHP file
    //      downloadUrl("phpsqlajax_genxml.php", function(data) {
    //        var xml = data.responseXML;
    //        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < 1; i++) {
          var name = "test"; // ダミーデータ
          var address = "test_address"; // ダミーデータ
          var type = 0; // ダミーデータ
          var point = new google.maps.LatLng(parseFloat("47.609108"), parseFloat("-122.344653")); // ダミーデータ
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
    //      });
    }
    
    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }
    
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;
    
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };
    
      request.open('GET', url, true);
      request.send(null);
    }
    
    function doNothing() {}
[/code]

[code]

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    
      <body onload="load()">
    <div id="map" style="width: 500px; height: 300px"></div>
      </body>
[/code]


CC BY-SA 3.0
2015-05-20T00:22:33.577
10390
2015-05-20T00:22:33.577
7214
10382
answer