adding multiple polygons in google maps using loops and arrays
Ad
I want to display some polygons in my google map on loading and added each of them individually. But its a long process and all I want is to create a loop and make that process of initialization and other things easier. I am inserting the code here
var destinationsi = ["destinations1", "destinations2", "destinations3", "destinations4"];
var polygon = ["polygon1", "polygon2", "polygon3", "polygon4"];
var polygonOptions = ["polygonOptions1", "polygonOptions2", "polygonOptions3", "polygonOptions4"];
for (polygoni = 1; polygoni <= 4; polygoni++ )
{
var polygoni = new google.maps.Polygon(polygonOptionsi);
var polygonOptionsi = {path: destinationsi, strokeColor:"#EDE3D0", strokeWeight:"2", fillColor: '#598BE2', fillOpacity: 0.35};
polygoni.setMap(map);
}
But the map is not displaying any polygons in it. How yo make this happpen?
Ad
Answer
Ad
Your JavaScript is all sorts of wrong.
Try this:
//Replace ... with actual latitude and longitude points/arrays
var destinations = [[{lat: -34, lng: 151}, ...], ...];
var polygonOptions;
var polygon;
for (var i = 0; i < destinations.length; i++) {
polygonOptions = {
paths: destinations[i], //'path' was not a valid option - using 'paths' array according to Google Maps API
strokeColor: "#EDE3D0",
strokeWeight: "2",
fillColor: '#598BE2',
fillOpacity: 0.35
};
polygon = new google.maps.Polygon(polygonOptions);
//map needs to be defined somewhere outside of this loop
//I'll assume you already have that.
polygon.setMap(map);
}
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad