I'm trying to display polygons in google map. I have a .xlsx file with a column named "polygon" in which are polygon coordinates in a strange format.
For example: [[], [[-68.0913, -38.95585], [-68.09148, -38.95666], [-68.07378, -38.9591], [-68.0393, -38.96023], [-68.03909, -38.95884], [-68.03909, -38.95517], [-68.03273, -38.95452], [-68.03288, -38.95122], [-68.03322, -38.94787], [-68.04327, -38.94201], [-68.06786, -38.93913], [-68.07294, -38.94037], [-68.07719, -38.94237], [-68.07908, -38.94347], [-68.08127, -38.94434], [-68.08457, -38.94739], [-68.1084, -38.9478], [-68.10842, -38.95442], [-68.0914, -38.9549], [-68.09136, -38.95559], [-68.09123, -38.95594]], [[-68.11045, -38.95312]], [[-68.09643, -38.96523], [-68.0967, -38.95809], [-68.09688, -38.95342], [-68.07472, -38.95842], [-68.04073, -38.95897], [-68.03989, -38.95899], [-68.03897, -38.95901], [-68.0391, -38.96296], [-68.04457, -38.96303], [-68.04461, -38.96304], [-68.04488, -38.97065], [-68.04485, -38.97065], [-68.04489, -38.97132], [-68.05176, -38.97112], [-68.05704, -38.97265], [-68.05725, -38.97858], [-68.06837, -38.97866], [-68.06886, -38.97315], [-68.06901, -38.96554], [-68.07631, -38.96542]]].
Is it possible to build a polygon with this data structure or it's an incorrect format?
Your data is a GeoJSON like coordinates format.
To translate that into a Google Maps Polygon:
// go through the outer array (of polygons)
for (var i = 0; i < coords.length; i++) {
// array for the LatLng coordinates
var polygonCoords = [];
// go through each coordinate in the array.
// GeoJSON is [longitude,latitude]
for (var j = 0; j < coords[i].length; j++) {
var pt = new google.maps.LatLng(coords[i][j][1], coords[i][j][0])
polygonCoords.push(pt);
}
// Construct the polygon.
var polygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
}
}
proof of concept fiddle
code snippet:
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
var coords = [[], [[-68.0913, -38.95585], [-68.09148, -38.95666], [-68.07378, -38.9591], [-68.0393, -38.96023], [-68.03909, -38.95884], [-68.03909, -38.95517], [-68.03273, -38.95452], [-68.03288, -38.95122], [-68.03322, -38.94787], [-68.04327, -38.94201], [-68.06786, -38.93913], [-68.07294, -38.94037], [-68.07719, -38.94237], [-68.07908, -38.94347], [-68.08127, -38.94434], [-68.08457, -38.94739], [-68.1084, -38.9478], [-68.10842, -38.95442], [-68.0914, -38.9549], [-68.09136, -38.95559], [-68.09123, -38.95594]], [[-68.11045, -38.95312]], [[-68.09643, -38.96523], [-68.0967, -38.95809], [-68.09688, -38.95342], [-68.07472, -38.95842], [-68.04073, -38.95897], [-68.03989, -38.95899], [-68.03897, -38.95901], [-68.0391, -38.96296], [-68.04457, -38.96303], [-68.04461, -38.96304], [-68.04488, -38.97065], [-68.04485, -38.97065], [-68.04489, -38.97132], [-68.05176, -38.97112], [-68.05704, -38.97265], [-68.05725, -38.97858], [-68.06837, -38.97866], [-68.06886, -38.97315], [-68.06901, -38.96554], [-68.07631, -38.96542]]];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < coords.length; i++) {
var polygonCoords = [];
for (var j = 0; j < coords[i].length; j++) {
var pt = new google.maps.LatLng(coords[i][j][1], coords[i][j][0])
bounds.extend(pt);
polygonCoords.push(pt);
}
// Construct the polygon.
var polygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
}
map.fitBounds(bounds);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
Related
I want to show the border between provinces in google maps. In forums it is said that the only way is to call openstreetmap to obtain coordinates, and then create a polygon in Google maps. The code fails, don´t show Polygon and give "InvalidValueError: not an Array". Is it because of the promise call? or because, I do not generate the array well?
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
// TNF
zoom: 10,
center: {lat: 28.4125202, lng: -16.5566306},
mapTypeId: 'roadmap'
});
var promise = $.getJSON('https://nominatim.openstreetmap.org/details.php?place_id=256937694&polygon_geojson=1&format=json');
promise.then(function(data){
var cachedGeoJson = data; //save the geojson in case we want to update its values
console.log(JSON.stringify(cachedGeoJson)); //OUTPUT-1
console.log(cachedGeoJson.geometry.coordinates); // OUTPUT-2
for (var i = 0; i < cachedGeoJson.geometry.coordinates.length; i++) {
var coord = cachedGeoJson.geometry.coordinates[i];
coord_poligon.push(coord);
};
coord_poligon_JSON = JSON.stringify(coord_poligon);
console.log(coord_poligon_JSON ); // OUTPUT-3:
var geoObject = cachedGeoJson.geometry.coordinates;
var features = [];
features = geoObject;
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates":features,
},
"properties": {}
}]
};
console.log(JSON.stringify(geoJson)); // OUTPUT-4
}); // end promise.
// Construct the polygon.
triangleCoords = geoJson;
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#ea0e0e', // red color
fillOpacity: 0.20
});
bermudaTriangle.setMap(map);
//OUTPUT-1:
//{"place_id":256937694,...
//{"type":"Point","coordinates":[-16.5532956,28.4159024]},"geometry":{"type":"Polygon","coordinates":[[[-16.5705013,28.4080941],[-16.5703805,28.4076554],...
// OUTPUT-2:
//0: (2) [-16.5705013, 28.4080941]
//1: (2) [-16.5703805, 28.4076554]
//2: (2) [-16.5701851, 28.4064929]
// OUTPUT-3: [[[-16.5705013,28.4080941],[-16.5703805,28.4076554],[-16.5701851,28.4064929],...
// OUTPUT-4: {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-16.5705013,28.4080941],[-16.5703805,28.4076554],
Finally I used the Polygon array, not geoJson. About that: openstreetmap return (lng,lat). It is the reverse order that the Google Maps API needs to create POLYGON, that uses it (lat,lng) so:
1-STEP: you have to change the coordinate pair order, that´s create a new array with coordenate pairs (lat,lng):
'''
var promise = $.getJSON('https://nominatim.openstreetmap.org/details.php?place_id=256937694&polygon_geojson=1&format=json');
promise.then(function(data){
var cachedGeoJson = data;
for (var i = 0; i < cachedGeoJson.geometry.coordinates.length; i++) {
var lnglat = cachedGeoJson.geometry.coordinates[i];
for(var j = 0; j < lnglat.length; j++)
{
var longitud = lnglat[j][0]; // first value on openstreetmap is lng
var latitud = lnglat[j][1]; // second value is lat
coord_poligon.push(new google.maps.LatLng(parseFloat(latitud), parseFloat(longitud )));
}
};
'''
2-STEP: to assign this new array (lat,lng) to array that will create the POLYGON:
'''
var triangleCoords = [coord_poligon]; //array inside brackets. IMPORTANT!
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords, // array
strokeColor: '#0a6df0', // azul oscuro
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#48cef7', // azul claro
fillOpacity: 0.20
});
bermudaTriangle.setMap(map);
infoWindow = new google.maps.InfoWindow;
}); // end promise.
'''
COMPLETE CODE:
'''
var coord_poligon = [];
var triangleCoords = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 28.4125202, lng: -16.5566306}, // TNF
mapTypeId: 'roadmap'
});
var promise = $.getJSON('https://nominatim.openstreetmap.org/details.php?place_id=256937694&polygon_geojson=1&format=json');
promise.then(function(data){
var cachedGeoJson = data;
for (var i = 0; i < cachedGeoJson.geometry.coordinates.length; i++) {
var lnglat = cachedGeoJson.geometry.coordinates[i];
for(var j = 0; j < lnglat.length; j++)
{
var longitud = lnglat[j][0]; // first value on opentreet is lng
var latitud = lnglat[j][1]; // second value is lat
coord_poligon.push(new google.maps.LatLng(parseFloat(latitud), parseFloat(longitud )));
}
};
var triangleCoords = [coord_poligon]; // array dentro de corchetes . IMPORTANT!
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords, // array
strokeColor: '#0a6df0', // dark blue
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#48cef7', // blue
fillOpacity: 0.20
});
bermudaTriangle.setMap(map);
infoWindow = new google.maps.InfoWindow;
}); // end promise.
} // end initMap()
'''
I have plotted the map with latitude and longitude and drawn path between them and the map returns as follows:
but the expected result as follows:
following is the code is used to draw the route
for (var i = 0; i < mapData.length; i++) {
var latLng = new google.maps.LatLng(mapData[i].lat, mapData[i].lng);
myTrip.push(latLng);
// Push the 1st datapoint but don't draw the flightpath. Flightpath must be drawn only if more than one datapoint
if (i === 0) {
latLngPath.push(latLng);
}
if (i > 0) { // Push the datapoint and draw the flightpath.
latLngPath.push(latLng);
var flightPath = new google.maps.Polyline({
path: latLngPath,
strokeColor: "#F1575A",
strokeOpacity: 1,
strokeWeight: 4,
zIndex: 300,
icons: [{
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: "",
fillOpacity: 1,
scale: 3,
//offset: '100%'
},
repeat: '100px'
}]
});
flightPath.setMap(this.map);
// get the new datapoint
var lastLatLng = latLngPath.slice(-1)[0];
latLngPath = [];
latLngPath.push(lastLatLng);
}
}
Calculate the bounds of the polyline. Call map.fitBounds(bounds); with that bounds.
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < mapData.length; i++) {
var latLng = new google.maps.LatLng(mapData[i].lat, mapData[i].lng);
bounds.extend(latLng);
myTrip.push(latLng);
// Push the 1st datapoint but don't draw the flightpath. Flightpath must be drawn only if more than one datapoint
if (i === 0) {
latLngPath.push(latLng);
}
if (i > 0) { // Push the datapoint and draw the flightpath.
latLngPath.push(latLng);
var flightPath = new google.maps.Polyline({
path: latLngPath,
strokeColor: "#F1575A",
strokeOpacity: 1,
strokeWeight: 4,
zIndex: 300,
icons: [{
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: "",
fillOpacity: 1,
scale: 3,
},
repeat: '100px'
}]
});
flightPath.setMap(this.map);
// get the new datapoint
var lastLatLng = latLngPath.slice(-1)[0];
latLngPath = [];
latLngPath.push(lastLatLng);
}
}
map.fitBounds(bounds);
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 0,
lng: -180
},
mapTypeId: 'terrain'
});
var mapData = [
{lat: 36.7377981,lng: -119.78712469999999},
{lat: 36.1626638,lng: -86.78160159999999},
{lat: 32.7766642,lng: -96.79698789999998}
];
var myTrip = [];
var latLngPath = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < mapData.length; i++) {
var latLng = new google.maps.LatLng(mapData[i].lat, mapData[i].lng);
bounds.extend(latLng);
myTrip.push(latLng);
// Push the 1st datapoint but don't draw the flightpath. Flightpath must be drawn only if more than one datapoint
if (i === 0) {
latLngPath.push(latLng);
}
if (i > 0) { // Push the datapoint and draw the flightpath.
latLngPath.push(latLng);
var flightPath = new google.maps.Polyline({
path: latLngPath,
strokeColor: "#F1575A",
strokeOpacity: 1,
strokeWeight: 4,
zIndex: 300,
icons: [{
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: "",
fillOpacity: 1,
scale: 3,
//offset: '100%'
},
repeat: '100px'
}]
});
flightPath.setMap(map);
// get the new datapoint
var lastLatLng = latLngPath.slice(-1)[0];
latLngPath = [];
latLngPath.push(lastLatLng);
}
}
map.fitBounds(bounds);
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
I've been searching for a while now....
I have a Polyline, path comes from google.maps.geometry.encoding.decodePath.
Now I want to center my map around that path, even though I don't know where the path is located.
How do I do that?
My code:
decodedPath = google.maps.geometry.encoding.decodePath(mapid);
var myLatlng = new google.maps.LatLng(0, 0);
let map = new google.maps.Map(document.getElementById(id), {
zoom: 1,
center: myLatlng,
mouseWheel:true
});
let poly = new google.maps.Polyline({
strokeColor: '#000',
strokeOpacity: 1.0,
strokeWeight: 3,
paths: decodedPath,
});
poly.setMap(map);
Add the point in the decoded path to an empty google.maps.LatLngBounds object, then call map.fitBounds on that bounds object.
var bounds = new google.maps.LatLngBounds();
for (var i=0; i<decodedPath.length; i++) {
bounds.extend(decodedPath[i]);
}
map.fitBounds(bounds);
proof of concept fiddle
code snippet:'
var geocoder;
var map;
var mapid = "aq|rFttwdQiizCfl}AqcbFfxv#_jfBff}#silAdfdDl`UzrlCmpp#z~eBgq#rrz`#~_dK?rfBstgK~daE~eBbwDulch#";
var id = "map_canvas";
function initialize() {
decodedPath = google.maps.geometry.encoding.decodePath(mapid);
var myLatlng = new google.maps.LatLng(0, 0);
map = new google.maps.Map(document.getElementById(id), {
zoom: 1,
center: myLatlng,
mouseWheel: true
});
var poly = new google.maps.Polyline({
strokeColor: '#000',
strokeOpacity: 1.0,
strokeWeight: 3,
path: decodedPath
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < decodedPath.length; i++) {
bounds.extend(decodedPath[i]);
}
map.fitBounds(bounds);
poly.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>
Hi I'm New to Google maps Api , I created polygons in google maps, i want to find out which polygon i clicked, I tried but i'm not able to find out , here is my code
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(12.9648451,77.5741997),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var arr = new Array();
var polygons = [];
var bounds = new google.maps.LatLngBounds();
var coordinates = [];
// downloadUrl("subdivision-coordinates.php", function(data) {
var xmlString = '<subdivisions><subdivision name="Auburn Hills"><coord lat="12.973111130721453" lng="77.54373550415039"/><coord lat="12.929112653428087" lng="77.53360748291016"/><coord lat="12.936306851970127" lng="77.57635116577148"/></subdivision><subdivision name="Vanderveen"><coord lat="12.97227473026135" lng="77.59489059448242"/><coord lat="12.952200275819832" lng="77.58750915527344"/><coord lat="12.95487696326559" lng="77.60536193847656"/></subdivision></subdivisions>';
//var xmlString =$('#xml_values').val();
var xml = xmlParse(xmlString);
var subdivision = xml.getElementsByTagName("subdivision");
for (var i = 0; i < subdivision.length; i++) {
arr = [];
var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
//console.log("coordinates="+xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord"));
for (var j=0; j < coordinates.length; j++) {
arr.push(new google.maps.LatLng(
parseFloat(coordinates[j].getAttribute("lat")),
parseFloat(coordinates[j].getAttribute("lng"))
));
bounds.extend(arr[arr.length-1])
//console.log("arr lenghth="+arr.length+"___"+arr[arr.length-1]+"|___|"+coordinates[j])
}
polygons.push(new google.maps.Polygon({
paths: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
}));
polygons[polygons.length-1].setMap(map);
google.maps.event.addListener(polygons[polygons.length-1], 'click', function (event) {
alert(JSON.stringify(event));
});
}
map.fitBounds(bounds);
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
How to identify which polygon is clicked using polygon number in google maps api
When you create the polygon, add an additional property to identify the polygon, e.g.
polygons.push(new google.maps.Polygon({
id: i,
paths: arr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
}));
Then in your event listener, you should be able to get this from the this scope of that polygon:
polygons[polygons.length-1].addListener('click', function (event) {
console.log(this.id);
});
So I am trying to draw multiple separated polylines on google map.
So far I don't have so much:
<script>
var center = new google.maps.LatLng(51.97559, 4.12565);
var map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({
map: map
});
var bounds = new google.maps.LatLngBounds();
// start coordinates
var start = ['51.97559, 4.12565',
'55.46242, 8.43872',
'49.49259, 0.1065',
'50.36862, -4.13412']
// end coordinates
var end = ['51.94784, 1.2539',
'51.74784, 1.2539',
'50.79726, -1.11048',
'43.45846, -3.80685']
function initialize() {
for (var i=0; i < end.length; i++){
calcRoute(start[i], end [i]);
}
}
function calcRoute(source,destination){
var polyline = new google.maps.Polyline({
path: [],
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
</script>
I found here an interesting example, but it has DirectionsTravelMode, and I want only a straight line between two points.
So in my example I would like to have 4 not connected straight lines drawn on the map.
a google.maps.LatLng object is two numbers; or a google.maps.LatLngLiteral is a javascript object with a lat and a lng property, neither is a string.
for (var i=0; i < end.length; i++){
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
calcRoute(startPt, endPt);
bounds.extend(startPt);
bounds.extend(endPt);
}
map.fitBounds(bounds);
you need to add those to the polyline's path:
function calcRoute(source,destination){
var polyline = new google.maps.Polyline({
path: [source, destination],
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
proof of concept fiddle
code snippet:
var map;
function initialize() {
var center = new google.maps.LatLng(51.97559, 4.12565);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({});
var bounds = new google.maps.LatLngBounds();
// start coordinates
var start = ['51.97559, 4.12565',
'55.46242, 8.43872',
'49.49259, 0.1065',
'50.36862, -4.13412'
]
// end coordinates
var end = ['51.94784, 1.2539',
'51.74784, 1.2539',
'50.79726, -1.11048',
'43.45846, -3.80685'
]
for (var i = 0; i < end.length; i++) {
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0], startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0], endCoords[1]);
calcRoute(startPt, endPt);
bounds.extend(startPt);
bounds.extend(endPt);
}
map.fitBounds(bounds);
}
function calcRoute(source, destination) {
var polyline = new google.maps.Polyline({
path: [source, destination],
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Nice answer by geocodezip !
A small improvement, instead of adding many polyline elements to your map (which could later require you to keep track of them & iterate over all of them in order to remove or change them), you can put all paths in one Polygon object.
working fiddle: http://jsfiddle.net/syoels/hyh81jfz/1/
(i took geocodezip's fiddle and made small changes)
var geocoder;
var map;
function initialize() {
var center = new google.maps.LatLng(51.97559, 4.12565);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
// start coordinates
var start = ['51.97559, 4.12565',
'55.46242, 8.43872',
'49.49259, 0.1065',
'50.36862, -4.13412'
];
// end coordinates
var end = ['51.94784, 1.2539',
'51.74784, 1.2539',
'50.79726, -1.11048',
'43.45846, -3.80685'
];
var paths = [];
for (var i = 0; i < end.length; i++) {
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0], startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0], endCoords[1]);
paths.push([startPt, endPt]);
bounds.extend(startPt);
bounds.extend(endPt);
}
map.fitBounds(bounds);
var polyline = new google.maps.Polygon({
paths: paths,
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map"></div>