Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm trying to develop an application by using Google Maps API v3. What I'm trying to do is; first let the user draw a polygon on a Google Map and get his/her polygon's coordinates and save them into a database. I will then show the user saved coordinates.
I don't know how to let users draw polygon on a Google Map with API v3 and then get the coordinates. If I can get those coordinates, it's easy to save them into a database.
http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html is nearly the exact example but it uses API v2 and doesn't give coordinates. I want to use API v3 and be able to get all coordinates.
Is there any examples of drawing polygon and getting its coordinates with API v3?
If all you need is the coordinates here is a drawing tool I like to use - move the polygon or re-shape it and the coordinates will display right below the map: jsFiddle here.
Also, here is a Codepen
JS
var bermudaTriangle;
function initialize() {
var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.RoadMap
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var triangleCoords = [
new google.maps.LatLng(33.5362475, -111.9267386),
new google.maps.LatLng(33.5104882, -111.9627875),
new google.maps.LatLng(33.5004686, -111.9027061)
];
// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
draggable: true,
editable: true,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
google.maps.event.addListener(bermudaTriangle, "dragend", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "insert_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "remove_at", getPolygonCoords);
google.maps.event.addListener(bermudaTriangle.getPath(), "set_at", getPolygonCoords);
}
function getPolygonCoords() {
var len = bermudaTriangle.getPath().getLength();
var htmlStr = "";
for (var i = 0; i < len; i++) {
htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(5) + "<br>";
}
document.getElementById('info').innerHTML = htmlStr;
}
HTML
<body onload="initialize()">
<h3>Drag or re-shape for coordinates to display below</h3>
<div id="map-canvas">
</div>
<div id="info">
</div>
</body>
CSS
#map-canvas {
width: auto;
height: 350px;
}
#info {
position: absolute;
font-family: arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
It's cleaner/safer to use the getters provided by google instead of accessing the properties like some did
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
var coordinatesArray = polygon.overlay.getPath().getArray();
});
here you have the example above using API V3
http://nettique.free.fr/gmap/toolbar.html
Well, unfortunately it seems that one cannot place custom markers and draw (and obtain coordinates) directly from maps.google.com if one is anonymous/not logged in (as it was possible some years ago, if I recall correctly). Still, thanks to the answers here, I managed to make a combination of examples that has both the Google Places search, and allows drawing via the drawing library, and dumps coordinates upon making a selection of any type of shape (including coordinates for polygon) that can be copypasted; the code is here:
https://gist.github.com/anonymous/68b8f6a586c512cfc768#file-gmaps-drawing-tools-places-htm
This is how it looks like:
(The Places markers are handled separately, and can be deleted via the DEL "button" by the search input form element; "curpos" shows the current center [position] and zoom level of the map viewport).
Since Google updates sometimes the name of fixed object properties, the best practice is to use GMaps V3 methods to get coordinates event.overlay.getPath().getArray() and to get lat latlng.lat() and lng latlng.lng().
So, I just wanted to improve this answer a bit exemplifying with polygon and POSTGIS insert case scenario:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
var str_input ='POLYGON((';
if (event.type == google.maps.drawing.OverlayType.POLYGON) {
console.log('polygon path array', event.overlay.getPath().getArray());
$.each(event.overlay.getPath().getArray(), function(key, latlng){
var lat = latlng.lat();
var lon = latlng.lng();
console.log(lat, lon);
str_input += lat +' '+ lon +',';
});
}
str_input = str_input.substr(0,str_input.length-1) + '))';
console.log('the str_input will be:', str_input);
// YOU CAN THEN USE THE str_inputs AS IN THIS EXAMPLE OF POSTGIS POLYGON INSERT
// INSERT INTO your_table (the_geom, name) VALUES (ST_GeomFromText(str_input, 4326), 'Test')
});
to accomplish what you want, you must getPaths from the polygon. Paths will be an array of LatLng points. you get the elements of the array and split the LatLng pairs with the methods .lat and .lng in the function below, i have a redundant array corresponding to a polyline that marks the perimeter around the polygon.
saving is another story. you can then opt for many methods. you may save your list of points as a csv formatted string and export that to a file (easiest solution, by far). i highly recommend GPS TXT formats, like the ones (there are 2) readable by GPS TRACKMAKER (great free version software). if you are competent to save them to a database, that is a great solution (i do both, for redundancy).
function areaPerimeterParse(areaPerimeterPath) {
var flag1stLoop = true;
var areaPerimeterPathArray = areaPerimeterPath.getPath();
var markerListParsedTXT = "Datum,WGS84,WGS84,0,0,0,0,0\r\n";
var counter01 = 0;
var jSpy = "";
for (var j = 0;j<areaPerimeterPathArray.length;j++) {
counter01++;
jSpy += j+" ";
if (flag1stLoop) {
markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join(',')+',00/00/00,00:00:00,1'+'\r\n';
flag1stLoop = false;
} else {
markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(j).lat(), areaPerimeterPathArray.getAt(j).lng()].join(',')+',00/00/00,00:00:00,0'+'\r\n';
}
}
// last point repeats first point
markerListParsedTXT += 'TP,D,'+[ areaPerimeterPathArray.getAt(0).lat(), areaPerimeterPathArray.getAt(0).lng()].join(',')+',00/00/00,00:00:00,0'+'\r\n';
return markerListParsedTXT;
}
attention, the line that ends with ",1" (as opposed to ",0") starts a new polygon (this format allows you to save multiple polygons in the same file). i find TXT more human readable than the XML based formats GPX and KML.
The other answers show you to create the polygons, but not how to get the coordinates...
I'm not sure the best way to do it, but heres one way.. It seems like there should be a method to get the paths from the polygon, but I can't find one, and getPath() doesn't seem to work for me. So here's a manual approach that worked for me..
Once you've finished drawing your polygon, and pass in your polygon to the overlay complete function, you can find the coordinates in the polygon.overlay.latLngs.b[0].b
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
$.each(polygon.overlay.latLngs.b[0].b, function(key, latlng){
var lat = latlng.d;
var lon = latlng.e;
console.log(lat, lon); //do something with the coordinates
});
});
note, i'm using jquery to loop over the list of coordinates, but you can do loop however.
Adding to Gisheri's answer
Following code worked for me
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
},
markerOptions: {
icon: 'images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(polygon) {
//console.log(polygon.overlay.latLngs.j[0].j);return false;
$.each(polygon.overlay.latLngs.j[0].j, function(key, LatLongsObject){
var LatLongs = LatLongsObject;
var lat = LatLongs.k;
var lon = LatLongs.B;
console.log("Lat is: "+lat+" Long is: "+lon); //do something with the coordinates
});
Cleaned up what chuycepeda has and put it into a textarea to send back in a form.
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
var str_input = '{';
if (event.type == google.maps.drawing.OverlayType.POLYGON) {
$.each(event.overlay.getPath().getArray(), function (key, latlng) {
var lat = latlng.lat();
var lon = latlng.lng();
str_input += lat + ', ' + lon + ',';
});
}
str_input = str_input.substr(0, str_input.length - 1) + '}';
$('textarea#Geofence').val(str_input);
});
try this
In your controller use
> $scope.onMapOverlayCompleted = onMapOverlayCompleted;
>
> function onMapOverlayCompleted(e) {
>
> e.overlay.getPath().getArray().forEach(function (position) {
> console.log('lat', position.lat());
> console.log('lng', position.lng());
> });
>
> }
**In Your html page , include drawning manaer**
<ng-map id="geofence-map" zoom="8" center="current" default-style="true" class="map-layout map-area"
tilt="45"
heading="90">
<drawing-manager
on-overlaycomplete="onMapOverlayCompleted()"
drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','circle']}"
drawingControl="true"
drawingMode="null"
markerOptions="{icon:'www.example.com/icon'}"
rectangleOptions="{fillColor:'#B43115'}"
circleOptions="{fillColor: '#F05635',fillOpacity: 0.50,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}">
</drawing-manager>
</ng-map>
Related
I'm trying to add a lot of markers into Google Map. I'm already passing the data to the server to make clusters on "busy" areas to help keep the number of markers down.
Here is my code:
markers.forEach(function(item, i){
if (item.count) {
// this is a cluster one, so add the respective icon along with the number as a label
// check we have a value for this. If we don't it means that someone has 2 markers with the exact same lat/lng, so lets ignore it!
if (item.coordinate) {
var location = new google.maps.LatLng(item.coordinate[0], item.coordinate[1]); // lat,lng of cluster
var cluster_icon;
if (item.count < 10) {
cluster_icon = icon_markers_1;
} else if (item.count < 30) {
cluster_icon = icon_markers_2; //
} else if (item.count < 50) {
cluster_icon = icon_markers_3; //
} else if (item.count < 100) {
cluster_icon = icon_markers_4; //
} else {
cluster_icon = icon_markers_5; //
}
window.VARS.markers[i] = new google.maps.Marker({
position: location,
//label: String(item.count),
title: "lat:"+item.coordinate[0]+ ",lng: " + item.coordinate[1],
label: {
text: String(item.count),
color: "#fff",
fontSize: "16px",
fontWeight: "bold"
},
map: window.VARS.Google_Map_Modal,
icon: cluster_icon
});
window.VARS.markers[i].addListener('click', function() {
//console.dir(window.VARS.markers[i].getPosition().lat());
var zoom = window.VARS.Google_Map_Modal.getZoom();
zoom++;
if (zoom <= 20) {
window.VARS.Google_Map_Modal.setZoom(zoom++)
}
window.VARS.Google_Map_Modal.setCenter(this.getPosition());
});
}
} else {
var link = window.VARS.links_stored[item.link_id];
// this is an actual marker (not cluster), so lets add it to the map
var location = new google.maps.LatLng(link.latitude, link.longitude); // lat,lng of cluster
var dataPhoto = link.image_small;
var marker = new google.maps.Marker({
position: location,
title: link.title,
the_row: i,
linkid: link.linkid,
map: window.VARS.Google_Map_Modal
});
window.VARS.markers.push(marker);
window.VARS.marker_vals.push(item);
//bounds.extend(latLng);
marker.addListener('click', function() {
// do some stuff
});
}
});
Is there a better way to do this, rather than one by one? I read that you could "batch add" to the map - but I can't seem to find any documentation to support this.
Instead of re-inventing the wheel by implementing a custom clustering logic, you can use the one provided by Google Maps.
https://developers.google.com/maps/documentation/javascript/marker-clustering
Adding markers one by one makes the map incredibly slow. MarkerClusterer avoids this issue by creating an array of markers but not adding them to the map.
The markers are added together at the end when you initialize the MarkerClusterer by passing the marker array.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
This is extremely quick and efficient, allowing addition of thousands of markers without too much of a performance hit.
I'm trying to make an application that tells me if a coordinate is contained in a circle.
for that every time I click on a point on the map a I get the coordinate.I would like to know if that new coordinate is contained within the circle or not
I would also like to know how I can make a circle occupy 5 meters around from a coordinate. in my example the radius is: 50000 but I do not know how to perform the conversion to set the value in meters.
this is my code:
http://plnkr.co/edit/OI4sjcuS526rFYxPnvDv?p=preview
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat:4.624335 , lng: -74.063644 },
zoom: 5,
});
//circle coordinates
var circle = new google.maps.Circle({
map: map,
radius: 50000,
fillColor: '#FFFFFF',
opacity:0,
center:{lat:4.624335 , lng: -74.063644 }
});
google.maps.event.addListener(map, 'click', function(e) {
//I get new coordinates ( e.latLng)
});
}
thanks!
Updated
They have marked this question as a duplicate, with this solution
(http://jsfiddle.net/kaiser/wzcst/embedded/result/)
but it does not really satisfy my problem, because as you can see in the image, the solution fails.
As from what I have understood in your question, what your'e trying to do is
display the map
create a circle in map
upon clicking in the map,
determine if the point is outside or inside the circle
There is a post about this here in SO: Check if a latitude and longitude is within a circle google maps. If you check on the accepted answer (credits to Guffa for the genius algorithm), he used this function to check if the point is within the radius:
// credits to user:69083 for this specific function
function arePointsNear(checkPoint, centerPoint, km) {
var ky = 40000 / 360;
var kx = Math.cos(Math.PI * centerPoint.lat / 180.0) * ky;
var dx = Math.abs(centerPoint.lng - checkPoint.lng) * kx;
var dy = Math.abs(centerPoint.lat - checkPoint.lat) * ky;
return Math.sqrt(dx * dx + dy * dy) <= km;
}
Now as for what you are trying to achieve, you could just simply add this inside your click event. Here's what I did:
google.maps.event.addListener(map, 'click', function(event) {
var click = event.latLng;
var locs = {lat: event.latLng.lat(), lng: event.latLng.lng()};
var n = arePointsNear(user, locs, diameter);
Then I added the condition that if the function returns true, the marker will have a label "I" (short for inside).
if(n){
marker = new google.maps.Marker({
map: map,
position: locs,
label: {
text:"I", //marking all jobs inside radius with I
color:"white"
}
});
Then if it didn't, the marker will then be marked "O" (short for outside)...
}else{
marker = new google.maps.Marker({
map: map,
position: locs,
label: {
text:"O", //marking all jobs outside radius with O
color:"white"
}
});
}
});
Here's the sample application that I have created, just in case you want to see it in action:
http://jsbin.com/hujusod/edit?js,output
This is a possible duplicate of Check if a latitude and longitude is within a circle google maps
. Or How To Display Content Based on Closest Lat/Long to Entered Address.
But since function is used in a different way, I posted my answer to help you do what you originally intended to. Feel free to upvote the answer from where the arePointsNear function came from if that's what you only need.
I hope this helped!
I need to get the nearest marker when I move the mouse over the polyline.
The markers are on the same polyline.
The markers are hidden, and I want to display the nearest to the mouse one, then the next one and to hide the prev one.
Thanks
// SET PATH
var Path = new google.maps.Polyline({
geodesic: true,
strokeColor: '#993300',
strokeOpacity: 1.0,
strokeWeight: 4 ,
id: 123
});
Path.setMap(map);
var path = Path.getPath();
data.map(function(val){
path.push(new google.maps.LatLng(+val.lat, +val.lon));
Path.setPath(path);
})
google.maps.event.addListener(Path, 'mousemove',function(e){
console.log(e.latLng)
})
Firstly you need to make sure you need to load the geometry library when you load your google maps JavaScript API.
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
</script>
Then, when you mouse over your polyline, loop over your markers and get the distance to all of them from the mouseover point (because you don't know which one is the closest until you check them all).
Here's one way to do it:
//your markers in an array
var markers = [];
google.maps.event.addListener(polyline,'mouseover',function(e) {
var closestMarker;
markers.reduce(function(carry,marker) {
var d = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(),e.latLng);
if(d < carry || carry == -1) {
closestMarker = marker;
return d;
}
return carry;
},-1);
//your marker is now in the variable closestMarker
});
You can figure out how to hide and display markers very easily using the Google Maps JavaScript API marker methods
Is it possible to combine all polygon data (description & name) at a specific point into one InfoWindow when clicked? I have some overlapping polygons and the InfoWindow only displays the data from the topmost one. It seems this should be possible using Fusion Tables and a click listener on the map so that when someone clicks on the map, a query is sent to Fusion Tables to find all the Polygons that intersect with the point that was clicked (using ST_INTERSECTS with a CIRCLE and a very small radius). The only columns in my Fusion Table are Name, Description, and Geometry (containing standard KML ).
This is as far as I am with it. Polygons are displaying and circle is being rendered and centered onclick. InfoWindow is displaying [object Object].
var lat = 37.4;
var lng = -122.1;
var tableid = '1mxcz4IDL1U7ItrqulVzt01fMasj5zsmBFUuQh6iM';
var meters = 10000;
layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: tableid,
}
});
layer.setMap(map);
google.maps.event.addListener(layer, 'click', function(event) {
changeCenter(event);
});
function changeCenter(event) {
lat = event.latLng.lat();
lng = event.latLng.lng();
circle.setCenter(event.latLng);
}
circle = new google.maps.Circle({
center: new google.maps.LatLng(lat, lng),
radius: meters,
map: map,
fillOpacity: 0.2,
strokeOpacity: 0.5,
strokeWeight: 1,
});
comboname = new google.maps.FusionTablesLayer({
query: {
select: 'name',
from: tableid,
where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ',' + lng + '),' + meters + '))'
}
});
google.maps.event.addListener(layer, 'click', function(e) {
// Display all of the names in the InfoWindow
e.infoWindowHtml = comboname;
});
}
A FusionTablesLayer doesn't provide any data related to the displayed features.
When you want to get data from the FusionTable you must request them via the REST-API (this also happens when the API will open an InfoWindow, when you take a look at the Network-Traffic you'll see that there is a request which loads the data for the InfoWindow).
The REST-API supports JSONP, so you may request the data directly via JS.
Requirements for SELECT
a valid google-API-key
the service Fusion Tables API must be enabled for the project
The FusionTable must be configured as downloadable (the table in your example already is downloadable)
Sample-implementation:
function initialize() {
var goo = google.maps,
//your google maps API-key
gooKey = 'someGoogleApiKey',
//FusionTable-ID
ftId = '1mxcz4IDL1U7ItrqulVzt01fMasj5zsmBFUuQh6iM',
//1km should be sufficient
meters = 1000,
map = new goo.Map(document.getElementById('map_canvas'),
{
zoom: 6,
center: new goo.LatLng(36.8,-111)
}),
//we use our own InfoWindow
win = new goo.InfoWindow;
//function to load ft-data via JSONP
ftQuery = function(query,callback){
//a random name for a global function
var fnc = 'ftCallback'+ new Date().getTime()
+ Math.round(Math.random()*10000),
url = 'https://www.googleapis.com/fusiontables/v2/query?',
params = {
sql : query,
callback : fnc,
key : gooKey
},
get =[],
script = document.querySelector('head')
.appendChild(document.createElement('script'));
for(var k in params){
get.push([encodeURIComponent(k),
encodeURIComponent(params[k])
].join('='));
}
window[fnc]=function(r){
callback(r);
delete window[fnc];
document.querySelector('head').removeChild(script);
}
script.setAttribute('src',url+get.join('&'));
},
ftLayer = new goo.FusionTablesLayer({
query: {
select: 'geometry',
from: ftId,
},
map:map,
suppressInfoWindows:true
});
goo.event.addListener(ftLayer,'click',function(e){
var sql ='SELECT name FROM ' + ftId +
' WHERE ST_INTERSECTS(geometry,'+
' CIRCLE(LATLNG(' +e.latLng.toUrlValue()+ '),'+ meters + '))',
cb = function(response){
if(response.error){
try{
alert(response.error.errors[0].message);
}
catch(e){
alert('error while retrieving data from fusion table');
}
return;
}
var content = [];
for(var r = 0; r < response.rows.length; ++r){
content.push(response.rows[r][0]);
}
//open the infowindow with the desired content
win.setOptions({
content:'<ol><li>'+content.join('</li><li>')+'</li></ol>',
map:map,
position:e.latLng
});
};
ftQuery(sql,cb);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Demo: http://jsfiddle.net/doktormolle/ckyk4oct/
I have converted multiple shapefiles to KML using the Shp2kml2 software from Zonums Solutions. I have made a map with the KML layers (of which I have imported to google docs to get the url). My map is found at: http://userpages.flemingc.on.ca/~catam/collab2.html
I have:
6 polygon KML layers,
1 point KML layer,
1 Google Fusion Table point layer
But when I try to click on a specific point, the pop-up information is that of the polygon which rests in the same place as the specific point.
My code is:
var map, layer2;
function initialize() {
var ontario = new google.maps.LatLng(49.2867873, -84.7493416);
var mapOptions = {
zoom: 5,
center: ontario
}
var infoWindow = new google.maps.InfoWindow();
var openInfoWindow = function (KMLevent) {
infoWindow.close();
infoWindow.setOptions(
{
content: KMLevent.featureData.infoWindowHtml,
position: KMLevent.latLng,
pixelOffset: KMLevent.pixelOffset
});
infoWindow.open(map);
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var kmlOptions = {
suppressInfoWindows: true, // do not to display an info window when clicked
preserveViewport: false,
map: map
};
var urls = [
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download', // SCHOOLS, NDP, LIBERAL, PC1, PC2, PC3,
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkQzRSdVB1TVRseU0&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkWFlscVM5N01lSDQ&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkbHNSTjhCN1dLQTg&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdnRoYnN1bnpubEU&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkaHg1WlNKdU1VWHc&export=download'
];
layer2 = new google.maps.FusionTablesLayer({
query: {
select: 'col9',
from: '1FzRSqRcxY37i7VtejqONHhAB-MrzFhakYSvZaIvo'
}
});
layer2.setMap(map);
urls.forEach(function(url) {
var layer = new google.maps.KmlLayer(url, kmlOptions);
layer.setMap(map);
KmlLayer.setZIndex(999);
google.maps.event.addListener(layer, "click", openInfoWindow);
});
}
//initialize();
google.maps.event.addDomListener(window, 'load', initialize);
It looks like the polygon layers are getting plotted over the points. Due to this even though you think you're clicking on the point the actual click event is generated on the polygon.
One solution would be to plot the polygons first followed by the points.
If that's not possible then you should set the z-index of the layer depending on whether it is a polygon or point.
kmlLayer.setZIndex(999);
The higher the z-index the higher the layer will be. I would suggest using a high z-index for the points while using a low z-index for the polygons. That should solve your problem.
The first option would be to move the url for points after the polygon urls. This should work without the need for z-index and will work without changing any of the code.
var urls = [
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkQzRSdVB1TVRseU0&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkWFlscVM5N01lSDQ&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkbHNSTjhCN1dLQTg&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdnRoYnN1bnpubEU&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkaHg1WlNKdU1VWHc&export=download',
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download', // SCHOOLS, NDP, LIBERAL, PC1, PC2, PC3,
];
The second option is to remove the points url from the array and add that separately. First plot the polygons as shown below.
var urls = [
'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkQzRSdVB1TVRseU0&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkWFlscVM5N01lSDQ&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkbHNSTjhCN1dLQTg&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkdnRoYnN1bnpubEU&export=download', 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkaHg1WlNKdU1VWHc&export=download',
];
urls.forEach(function(url) {
var layer = new google.maps.KmlLayer(url, kmlOptions);
layer.setZIndex(10);
layer.setMap(map);
google.maps.event.addListener(layer, "click", openInfoWindow);
});
After this add the points layer
var pointsUrl = 'https://docs.google.com/uc?authuser=0&id=0B79b02nBK5vkajc2OGZTZDZBV0k&export=download'; // SCHOOLS, NDP, LIBERAL, PC1, PC2, PC3,
var layer = new google.maps.KmlLayer(url, kmlOptions);
layer.setZIndex(10);
layer.setMap(map);
google.maps.event.addListener(layer, "click", openInfoWindow);