Loading Markers from XML file to Google Map API

2019-01-26 02:31发布

问题:

my goal is to be able to load markers from an sql database and display them on a googlemap. but im having a hard time just trying to read markers from an xml file.

Here is my HTML file

  <!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>

      html, body, #map-canvas 
      {
        height: 100%; 
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script>


            function initialize() 
            {

              var mapOptions = 
              {
                zoom: 12,
                center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
              };

            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            }

            function loadXMLFile(){
            var filename = 'markers.xml';
            $.ajax({
                type: "GET",
                url: filename ,
                dataType: "xml",
                success: parseXML,
                error : onXMLLoadFailed
            });

            function onXMLLoadFailed(){
            alert("An Error has occurred.");
            }

            function parseXML(xml){
            container = new nokia.maps.map.Container();
            $(xml).find("marker").each(function(){
                //Read the name, address, latitude and longitude for each Marker
                var nme = $(this).find('name').text();
                var address = $(this).find('address').text();
                var lat = $(this).find('lat').text();
                var lng = $(this).find('lng').text();
                var markerCoords = new nokia.maps.geo.Coordinate
                    (parseFloat(lat), parseFloat(lng));    
                container.objects.add(new nokia.maps.map.StandardMarker(
                    markerCoords, {text:nme}));      

            });
            map.objects.add(container);
            map.zoomTo(container.getBoundingBox(), false);
        }


}
            google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

and this is my xml file

<?xml version="1.0"?>
<markers>
    <marker>
         <name>M1</name>
         <address>Abbey Street</address>
         <lat>53.3496</lat>
         <lng>-6.257</lng>
   </marker>
   </markers>

The map is rendering but no marker is appearing on the map. I have google searched this problem but cant find anything that helps.

回答1:

  1. you are not calling loadXMLFile()
  2. you aren't including the jquery library
  3. you aren't creating google.maps.Markers (looks like you have syntax from some nokia API instead).

    <!DOCTYPE html>
    <html>
    <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
    
      html, body, #map-canvas
      {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script>
    
    var map = null;
    function initialize()
    {
    
       var mapOptions =
           {
                zoom: 12,
                center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
           };
    
       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
       loadXMLFile();
     }
    
     function loadXMLFile(){
        var filename = 'v3_SO_20140124_markers.xml';
        $.ajax({
                type: "GET",
                url: filename ,
                dataType: "xml",
                success: parseXML,
                error : onXMLLoadFailed
        });
    
      function onXMLLoadFailed(){
        alert("An Error has occurred.");
      }
    
      function parseXML(xml){
        var bounds = new google.maps.LatLngBounds();
         $(xml).find("marker").each(function(){
                //Read the name, address, latitude and longitude for each Marker
                var nme = $(this).find('name').text();
                var address = $(this).find('address').text();
                var lat = $(this).find('lat').text();
                var lng = $(this).find('lng').text();
                var markerCoords = new google.maps.LatLng(parseFloat(lat), 
                                                          parseFloat(lng));
                bounds.extend(markerCoords);
                var marker = new google.maps.Marker({position: markerCoords, map:map});
            });
            map.fitBounds(bounds);
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    

working example