Search code examples
google-mapsmapspolylinegoogle-polyline

Google Map - Polyline not showing - using XML file with lng/lat

I am converting to V3 (I have recently been tasked with converting all of V2 maps to V3) and have run into an issue with Polylines loading from an XML. I can get the map to appear, but not the polyline.

Here are the code and XML file.

What am I doing wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<meta charset="UTF-8">
<title>A Basic Map</title>
<style>
    #map {
        height: 100%;
    }

    html, body {
        height: 75%;
        margin: 5%;
        padding: 5%;
    }
</style>
<script>

function initMap() {
    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(45.0505, -122.9761),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    function downloadUrl(url, callback) {  
var request = window.ActiveXObject ? 
    new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;   
request.onreadystatechange = function() {    
    if (request.readyState == 4) {            
        callback(request);    
    } 
};   
request.open('GET', url, true);  
request.send(null); 
} 
    
downloadUrl("polyline.xml", function(data) {
    var xml = data.responseXML;
    var route = xml.documentElement.getElementsByTagName("routepath");
    var path = [];
    var polyOptions = { strokeColor: '#00095ff', strokeOpacity: 1.0, strokeWeight: 3 };
    var path = new google.maps.Polyline(polyOptions);
        path.setMap(map);
    for (var a = 0; a < route.length; a++) {
    var lat = route[a].getAttribute("latitude");
    var lng = route[a].getAttribute("longitude");
    var point = new google.maps.LatLng(lat,lng);
   
}//finish loop

var polyline = new google.maps.Polyline({
  position: point,
  map: map,
  
});
path.getPath().push(point);

}); //end download url

    }


</script>


</head>
<body>
<div id="map"></div>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=mykey=initMap">
</script>
</body>
</html>


<routeline>                                                             
 <routepath  latitude="37.82277" longitude="121.27555" ctyst="latitudehrop,CA" />
 <routepath  latitude="37.75444" longitude="121.36972" ctyst="Banta,CA" />  
 <routepath  latitude="41.99500" longitude="122.62222" ctyst="Hilt,CA" />   
 <routepath  latitude="42.37611" longitude="122.91527" ctyst="Central Point,OR"/>
 <routepath  latitude="42.32666" longitude="122.87444" ctyst="Medford,OR" />
 <routepath  latitude="42.37611" longitude="122.91527" ctyst="Central Point,OR"/>
 <routepath  latitude="45.63888" longitude="122.66027" ctyst="Vancouver,WA"/> 
 <routepath  latitude="47.32250" longitude="122.31138" ctyst="Federal Way,WA"/>
 <routepath  latitude="47.30750" longitude="122.22722" ctyst="Auburn,WA" /> 
</routeline>
Solution

  • You have 2 problems:

    1. the path property of a google.maps.Polyline is path, not position.
    2. you only ever add one point to the polyline.

    Add the points retrieved from the XML into an array. Use that as the path of the polyline

    downloadUrl("polyline.xml", function(data) {
  var xml = data.responseXML;
  var route = xml.documentElement.getElementsByTagName("routepath");
  var polyOptions = { strokeColor: '#00095ff', strokeOpacity: 1.0, strokeWeight: 3 };
  var path = new google.maps.Polyline(polyOptions);
  path.setMap(map);
  for (var a = 0; a < route.length; a++) {
    var lat = route[a].getAttribute("latitude");
    var lng = route[a].getAttribute("longitude");
    var point = new google.maps.LatLng(lat, lng);
    pointsArray.push(point);
    bounds.extend(point);
  } //finish loop

  var polyline = new google.maps.Polyline({
    path: pointsArray,
    map: map,
  });
}); //end download url

    proof of concept fiddle

    enter image description here

    code snippet:

    function initMap() {
  var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(45.0505, -122.9761),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        callback(request);
      }
    };
    request.open('GET', url, true);
    request.send(null);
  }

  // downloadUrl("polyline.xml", function(data) {
  var xml = parseXml(xmlString); // data.responseXML;
  var route = xml.documentElement.getElementsByTagName("routepath");
  var path = [];
  var polyOptions = {
    strokeColor: '#00095ff',
    strokeOpacity: 1.0,
    strokeWeight: 3
  };
  var path = new google.maps.Polyline(polyOptions);
  path.setMap(map);
  var pointsArray = [];
  var bounds = new google.maps.LatLngBounds();
  for (var a = 0; a < route.length; a++) {
    var lat = route[a].getAttribute("latitude");
    var lng = route[a].getAttribute("longitude");
    var point = new google.maps.LatLng(lat, lng);
    pointsArray.push(point);
    bounds.extend(point);
  } //finish loop

  var polyline = new google.maps.Polyline({
    path: pointsArray,
    map: map,
  });
  map.fitBounds(bounds);
  // }); //end download url
}
var xmlString = '<routeline><routepath  latitude="37.82277" longitude="121.27555" ctyst="latitudehrop,CA" /><routepath  latitude="37.75444" longitude="121.36972" ctyst="Banta,CA" /><routepath  latitude="41.99500" longitude="122.62222" ctyst="Hilt,CA" /><routepath  latitude="42.37611" longitude="122.91527" ctyst="Central Point,OR"/><routepath  latitude="42.32666" longitude="122.87444" ctyst="Medford,OR" /><routepath  latitude="42.37611" longitude="122.91527" ctyst="Central Point,OR"/><routepath  latitude="45.63888" longitude="122.66027" ctyst="Vancouver,WA"/><routepath  latitude="47.32250" longitude="122.31138" ctyst="Federal Way,WA"/><routepath  latitude="47.30750" longitude="122.22722" ctyst="Auburn,WA" /></routeline>';

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }
}
    #map {
  height: 100%;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
    <!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>