Google Maps does not show pins!

Nice to meet you!

Currently, I am trying to display XML files on the read map by referring to the official Google Maps site below.
https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja#createtable

At the end of the above URL, there was a sample code for reading the XML file and displaying the pins, but the pins did not appear.

Not to mention rewriting the restaurant and bar parts of var customIcons to your XML file type,

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

in the section

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

There was no change when I changed to .

Please look at this code and let me know if there is anything wrong with it!

Thank you for your cooperation.

<!DOCTYPE html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scale=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[

    varcustomIcons={
      US>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() {
      varmap = 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;
        varmarksers=xml. documentElement.getElementsByTagName("marker");
        for (vari=0;i<markers.length;i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type=markers[i].getAttribute("type");
          varpoint = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng"));
          varhtml="<b>"+name+"</b><br/>"+address;
          varicon=customIcons [type]||{};
          varmarker = 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()">
    <divid="map" style="width:500px;height:300px">/div>
  </body>

</html>

javascript google-maps

2022-09-30 20:48

1 Answers

phpsqlajax_genxml.php reads XML and returns a string. Do you have this file ready?

The XML data was displayed when I turned it into dummy data, so I don't think the XML data could be loaded.

var customIcons={
  US>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() {
  varmap = 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;
//        varmarksers=xml. documentElement.getElementsByTagName("marker");
    for(vari=0;i<1;i++){
      var name = "test"; // dummy data
      var address="test_address";// dummy data
      var type = 0;// dummy data
      varpoint = new google.maps.LatLng(parseFloat("47.609108"), parseFloat("-122.344653")); // dummy data
      varhtml="<b>"+name+"</b><br/>"+address;
      varicon=customIcons [type]||{};
      varmarker = new google.maps.Marker({
        map —map,
        position:point,
        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(){}

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript">/script>

  <body onload="load()">
<divid="map" style="width:500px;height:300px">/div>
  </body>

2022-09-30 20:48

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656