CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
rahulserver
rahulserver

Reputation: 11205

Unable to draw polylines on Google Maps

I am trying render a polyline dynamically on my page.Here is my javascript function which intends to do so:

function decodePath(){
var pathArray=[];
window.alert(("here!!!"));
pathArray=[
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
];

var flightPath = new google.maps.Polyline({
path: pathArray,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
poly = new google.maps.Polyline(flightPath);
poly.setMap(map);
}

The button with which the above function is attached is:

<input type="button" onclick="decodePath();" value="Decode Path"/>

And the div where map is rendered is:

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

Here is how I initialize:

function initialize() {
  var rendererOptions = {
    draggable: true
  };    

  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

}
google.maps.event.addDomListener(window, 'load', initialize);

I have studied the google map apis https://developers.google.com/maps/documentation/javascript/examples/,https://developers.google.com/maps/documentation/javascript/reference and particularly what I am trying is based on this example. Only I want to add the polylines dynamically. So why is the path not getting displayed on the map?

Upvotes: 0

Views: 1158

Answers (1)

geocodezip
geocodezip

Reputation: 161334

You are not centering the map on the polyline, so you can't see it. Add the code below to your "DecodePath" function to center the map on the polyline.

  var bounds = new google.maps.LatLngBounds();
  for (var i=0; i<pathArray.length;i++){
    bounds.extend(pathArray[i]);
  }
  map.fitBounds(bounds);

Upvotes: 1

Related Questions