how to draw a polygon in google map API using array of coordinates?
12,978
Your format won't work. You need to translate it into either an array of google.maps.LatLng
objects or google.maps.LatLngLiteral
objects.
Either:
var points=[];
for(var i=0; i<triangleCoords.length; i++) {
points.push(new google.maps.LatLng(triangleCoords[i][0],
triangleCoords[i][1]));
}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
Or:
var points=[];
for(var i=0; i<triangleCoords.length; i++) {
points.push({
lat: triangleCoords[i][0],
lng: triangleCoords[i][1]
});
}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
[25.774, -80.190],
[18.466, -66.118],
[32.321, -64.757],
[25.774, -80.190]
];
var points = [];
for (var i = 0; i < triangleCoords.length; i++) {
points.push({
lat: triangleCoords[i][0],
lng: triangleCoords[i][1]
});
}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: points,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
Author by
Samira Arabgol
Updated on June 04, 2022Comments
-
Samira Arabgol almost 2 years
I am new to JavaScript and I am trying to use google map API to draw a polygon. The default paths in the google.maps.Polygons function accept JSON with the following format:
var trianglecoords=[ {lat: 18.466, lng: -66.518}, {lat: 18.466, lng: -66.118}, {lat: 18.166, lng: -66.118}, ];
however my format is:
var trianglecoords=[ [18.466,-66.518], [18.466,-66.118], [18.166,-66.118], ];
using my format I cannot see the triangle in the map. can anyone help me?
here is my code:
function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 5, center: {lat: 24.886, lng: -70.268}, mapTypeId: google.maps.MapTypeId.TERRAIN }); // Define the LatLng coordinates for the polygon's path. var triangleCoords = [ [25.774, -80.190], [18.466, -66.118], [32.321,-64.757], [25.774, -80.190] ]; // Construct the polygon. var bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 }); bermudaTriangle.setMap(map); }