Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

mysql - Loading Markers from XML file to Google Map API

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
  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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
...