function initialize() {
// Create a simple map.
features = [];
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {
lat: -28,
lng: 137.883
}
});
var markers = [
[31.713127, 35.206804],
[31.712762, 35.22028],
[31.706117, 35.210753],
[31.717216, 35.210066],
[31.701152, 35.188265],
[31.704073, 35.19144]
];
var gmarkers = [];
var info = new google.maps.InfoWindow();
for (var i = 0; i < markers.length; i++) {
gmarkers.push(new google.maps.Marker({
position: {
lat: markers[i][0],
lng: markers[i][1]
},
draggable: true,
map: map
}));
google.maps.event.addListener(gmarkers[gmarkers.length - 1], 'click', function() {
info.setContent(this.getPosition().toUrlValue(6));
info.open(map, this);
});
}
google.maps.event.addListener(map, 'click', function(e) {
document.getElementById('info').innerHTML += e.latLng.toUrlValue(6) + "<br>";
})
google.maps.event.addListener(map, 'click', function() {
info.close();
});
// process the loaded GeoJSON data.
var bounds = new google.maps.LatLngBounds();
google.maps.event.addListener(map.data, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'Polygon') {
var polys = e.feature.getGeometry().getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
bounds.extend(polys[i].getAt(j));
}
}
map.fitBounds(bounds);
}
});
map.data.addGeoJson(data);
map.data.addListener('click', function(event) {
if (event.feature.getGeometry().getType() === 'Polygon') {
var polyPath = event.feature.getGeometry().getAt(0).getArray();
var poly = new google.maps.Polygon({
paths: polyPath
});
for (var i = 0; i < gmarkers.length; i++) {
if (google.maps.geometry.poly.containsLocation(gmarkers[i].getPosition(), poly)) {
gmarkers[i].setIcon("http://maps.google.com/mapfiles/ms/icons/blue.png");
} else {
gmarkers[i].setIcon("");
}
}
};
});
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "test",
"desc": "test desc",
"inDailyProgram": true,
"color": "red"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
35.188327,
31.699929,
0
],
[
35.187895,
31.699669,
0
],
[
35.187014,
31.699729,
0
],
[
35.186867,
31.700016,
0
],
[
35.186783,
31.700395,
0
],
[
35.186921,
31.700787,
0
],
[
35.187232,
31.701291,
0
],
[
35.18763,
31.701844,
0
],
[
35.187442,
31.702328,
0
],
[
35.18692,
31.702779,
0
],
[
35.187064,
31.703654,
0
],
[
35.187433,
31.703794,
0
],
[
35.188155,
31.70344,
0
],
[
35.188921,
31.702917,
0
],
[
35.189348,
31.702887,
0
],
[
35.189828,
31.70302,
0
],
[
35.190313,
31.703443,
0
],
[
35.190359,
31.704104,
0
],
[
35.190224,
31.704348,
0
],
[
35.189797,
31.704585,
0
],
[
35.189753,
31.704948,
0
],
[
35.189847,
31.705107,
0
],
[
35.190187,
31.705015,
0
],
[
35.190604,
31.705041,
0
],
[
35.190931,
31.705171,
0
],
[
35.191435,
31.70526,
0
],
[
35.191861,
31.705231,
0
],
[
35.192482,
31.705008,
0
],
[
35.192945,
31.704893,
0
],
[
35.193564,
31.704449,
0
],
[
35.192869,
31.704004,
0
],
[
35.192256,
31.703737,
0
],
[
35.191754,
31.703371,
0
],
[
35.191306,
31.703001,
0
],
[
35.190838,
31.702632,
0
],
[
35.190546,
31.70221,
0
],
[
35.190348,
31.701739,
0
],
[
35.190323,
31.701589,
0
],
[
35.189814,
31.701624,
0
],
[
35.189443,
31.701456,
0
],
[
35.189108,
31.701217,
0
],
[
35.188509,
31.700359,
0
],
[
35.188327,
31.699929,
0
]
]
]
}
}, {
"type": "Feature",
"properties": {
"name": "test",
"desc": "test desc",
"inDailyProgram": true,
"color": "red"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
35.209224,
31.718497,
0
],
[
35.209775,
31.718459,
0
],
[
35.210282,
31.717788,
0
],
[
35.210741,
31.71723,
0
],
[
35.21132,
31.716803,
0
],
[
35.211748,
31.716193,
0
],
[
35.212124,
31.715632,
0
],
[
35.212315,
31.714798,
0
],
[
35.21227,
31.714137,
0
],
[
35.212647,
31.713599,
0
],
[
35.21316,
31.713412,
0
],
[
35.214134,
31.713095,
0
],
[
35.215018,
31.712675,
0
],
[
35.215822,
31.7119,
0
],
[
35.21577,
31.711156,
0
],
[
35.215564,
31.710175,
0
],
[
35.215104,
31.709128,
0
],
[
35.21473,
31.708518,
0
],
[
35.214301,
31.707911,
0
],
[
35.214086,
31.707207,
0
],
[
35.213709,
31.706154,
0
],
[
35.213519,
31.705807,
0
],
[
35.212415,
31.705441,
0
],
[
35.211313,
31.705103,
0
],
[
35.210114,
31.704964,
0
],
[
35.20915,
31.705031,
0
],
[
35.208402,
31.704612,
0
],
[
35.207939,
31.704119,
0
],
[
35.207657,
31.704636,
0
],
[
35.207123,
31.704922,
0
],
[
35.206421,
31.705164,
0
],
[
35.205969,
31.70529,
0
],
[
35.205926,
31.705613,
0
],
[
35.205553,
31.705808,
0
],
[
35.205577,
31.706157,
0
],
[
35.205694,
31.706459,
0
],
[
35.205902,
31.70686,
0
],
[
35.206285,
31.707193,
0
],
[
35.206113,
31.707375,
0
],
[
35.206005,
31.707544,
0
],
[
35.206139,
31.707746,
0
],
[
35.206713,
31.708194,
0
],
[
35.207228,
31.708428,
0
],
[
35.207474,
31.708798,
0
],
[
35.207463,
31.709435,
0
],
[
35.207359,
31.709878,
0
],
[
35.207255,
31.710418,
0
],
[
35.207232,
31.71089,
0
],
[
35.20712,
31.711257,
0
],
[
35.206802,
31.711473,
0
],
[
35.206408,
31.711645,
0
],
[
35.206061,
31.711753,
0
],
[
35.205639,
31.711857,
0
],
[
35.205398,
31.711766,
0
],
[
35.205213,
31.711698,
0
],
[
35.205289,
31.711992,
0
],
[
35.205266,
31.712464,
0
],
[
35.205096,
31.712808,
0
],
[
35.204885,
31.713348,
0
],
[
35.204829,
31.71414,
0
],
[
35.204947,
31.714644,
0
],
[
35.205089,
31.715104,
0
],
[
35.205489,
31.715687,
0
],
[
35.205906,
31.716113,
0
],
[
35.206464,
31.716586,
0
],
[
35.20684,
31.716421,
0
],
[
35.207254,
31.716005,
0
],
[
35.207524,
31.715517,
0
],
[
35.207901,
31.714965,
0
],
[
35.207949,
31.714464,
0
],
[
35.208022,
31.713919,
0
],
[
35.20835,
31.713855,
0
],
[
35.208542,
31.714229,
0
],
[
35.208847,
31.71465,
0
],
[
35.209151,
31.715044,
0
],
[
35.20929,
31.71545,
0
],
[
35.209362,
31.715694,
0
],
[
35.209315,
31.716214,
0
],
[
35.209177,
31.716619,
0
],
[
35.209031,
31.716906,
0
],
[
35.208958,
31.717132,
0
],
[
35.208853,
31.717333,
0
],
[
35.208878,
31.717691,
0
],
[
35.209224,
31.718497,
0
]
]
]
}
}]
};
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id='info'></div>
<div id="map-canvas"></div>