how to draw a polygon in google map API using array of coordinates?

javascript json google-maps-api-3 polygon geospatial

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>

Expand snippet