How to load markers from XML file with directions API in Google Maps

问题

I'm trying to load markers from XML file on a map used for outputing directions. Basically, it's the combination of two demos found on Google's documentation pages.

Directions: https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-panel

XML: http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/downloadurl_info.html

I have first created the directions map and then tried to add XML file that contains markers.

I'm probably making a simple mistake, but since I'm not good with js and coding, can't find what. There are no errors displayed, only a blank page.

Here is my current code:

<script>
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(41.850033, -87.6500523)
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));
    var control = document.getElementById('control');
    control.style.display = 'block';
    map.controls[google.maps.ControlPosition.TOP].push(control);
  }   
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  downloadUrl("http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/moredata.xml", function(data) {
  var markers = data.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
    var marker = createMarker(markers[i].getAttribute("name"), latlng);
   }
 });

  function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Here is the (non-working) jsFiddle: http://jsfiddle.net/ajJ3u/

回答1:

Problems from a quick review:

you are creating the map twice.
you don't have a createMarker function. If that call came from one of the examples, you missed bringing it to the new map.
downloadUrl is subject to a cross-domain security restriction. If your page is not running in the "http://gmaps-samples-v3.googlecode.com" domain, it won't work. You need to access xml from the same domain as the page is running in or use a proxy.

Example of directions from/to markers from xml (translated to v3 from Mike Williams' v2 tutorial

来源：https://stackoverflow.com/questions/12789153/how-to-load-markers-from-xml-file-with-directions-api-in-google-maps

标签

google-maps

google-maps-api-3

google-maps-markers