Why google map Polyline not showing (in Chrome)? - google-maps

Question

I use google map to show markers,
then I want to use polyline to link markers one by one.
but polyline doesn't showing.
my code as below:
$(document).ready(function (){
/*map initial*/
var mapOptions = {
...
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
/*draw markers*/
var tmp_user_location1 = new google.maps.LatLng(37.772,-122.214);
var tmp_marker1 = new google.maps.Marker({
position: tmp_user_location1,
map: map
});
var tmp_user_location2 = new google.maps.LatLng(21.291,-157.821);
var tmp_marker2 = new google.maps.Marker({
position: tmp_user_location2,
map: map
});
arr_markers.push(tmp_marker1);
arr_markers.push(tmp_marker2);
/*draw polyline*/
arr_user_location_polyline.push(tmp_user_location1);
arr_user_location_polyline.push(tmp_user_location2);
var user_location_path = new google.maps.Polyline({
paths: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
user_location_path.setMap(map);
}
screen capture picture
any one help?
thanks a lot.

Answer 1

The issue with your code is that a google.maps.PolylineOptions object doesn't have a paths property (a google.maps.Polygon does), it has a path property.
var user_location_path = new google.maps.Polyline({
path: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
If I fix that, and the javascript errors in the posted code:
Uncaught ReferenceError: arr_markers is not defined
Uncaught ReferenceError: arr_user_location_polyline is not defined
I get a polyline: proof of concept fiddle
code snippet:
$(document).ready(function() {
var arr_markers = [];
var arr_user_location_polyline = [];
/*map initial*/
var mapOptions = {
center: {
lat: 21.291,
lng: -157.821
},
zoom: 3
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
/*draw markers*/
var tmp_user_location1 = new google.maps.LatLng(37.772, -122.214);
var tmp_marker1 = new google.maps.Marker({
position: tmp_user_location1,
map: map
});
var tmp_user_location2 = new google.maps.LatLng(21.291, -157.821);
var tmp_marker2 = new google.maps.Marker({
position: tmp_user_location2,
map: map
});
arr_markers.push(tmp_marker1);
arr_markers.push(tmp_marker2);
/*draw polyline*/
arr_user_location_polyline.push(tmp_user_location1);
arr_user_location_polyline.push(tmp_user_location2);
var user_location_path = new google.maps.Polyline({
path: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
user_location_path.setMap(map);
});
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>