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.

you are not calling loadXMLFile()
you aren't including the jquery library

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

来源：https://stackoverflow.com/questions/21337368/loading-markers-from-xml-file-to-google-map-api

标签

mysql

xml

eclipse

google-maps-api-3

google-maps-markers