Loading Markers from XML file to Google Map API

后端未结

关注

 1  1924

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.

相关标签:

1条回答

深忆病人

2020-12-18 17:59

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

0 讨论(0)