Develop Reference

Driving Distance Calculation via Google Maps API - javascript

I want to calculate driving distance between given latitudes and longitudes. On my project I'm displaying markers on road. And what I want is to calculate distance between those markers not all of the routes. Can some one explain to me how can I calculate that distance?
I know I should work on DistanceMatrixService but I couldn't figure out how to work on it.
Where I put Markers:
var pointsArray = response.routes[0].overview_path;
for (var i = 0; i < pointsArray.length; i++) {
var marker = new google.maps.Marker ({
position:pointsArray[i],
draggable:false,
map:map,
flat:true
});
}

If the pointsArray comes from the directions service, you can do something like this:
var pointsArray = response.routes[0].overview_path;
for (var i = 0; i < pointsArray.length; i++) {
var marker = new google.maps.Marker({
position: pointsArray[i],
draggable: false,
map: map,
flat: true
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function (evt) {
var html = "marker #" + i + "<br />";
if (i != (markers.length - 1)) {
html += "<a href='javascript: google.maps.event.trigger(markers[" + (i + 1) + "],\"click\");'>next</a>&nbspdist:" + google.maps.geometry.spherical.computeDistanceBetween(markers[i].getPosition(), markers[i + 1].getPosition()).toFixed(2) + " meters<br />";
}
if (i !== 0) {
html += "<a href='javascript: google.maps.event.trigger(markers[" + (i - 1) + "],\"click\");'>prev</a>&nbspdist:" + google.maps.geometry.spherical.computeDistanceBetween(markers[i].getPosition(), markers[i - 1].getPosition()).toFixed(2) + " meters";
}
infowindow.setContent(html);
infowindow.open(map, marker);
}
})(marker, i))
}
Another option would be to get the distances out of the directions response.
code snippet:
var infowindow = new google.maps.InfoWindow();
var markers = [];
function initMap() {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: 37.4419,
lng: -122.1419
}
});
directionsDisplay.setMap(map);
calculateAndDisplayRoute(new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.447597, -122.159582),
directionsService, directionsDisplay, map);
}
function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay, map) {
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
var pointsArray = response.routes[0].overview_path;
for (var i = 0; i < pointsArray.length; i++) {
var marker = new google.maps.Marker({
position: pointsArray[i],
draggable: false,
map: map,
flat: true
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function(evt) {
var html = "marker #" + i + "<br />";
if (i != (markers.length - 1)) {
html += "<a href='javascript: google.maps.event.trigger(markers[" + (i + 1) + "],\"click\");'>next</a>&nbspdist:" + google.maps.geometry.spherical.computeDistanceBetween(markers[i].getPosition(), markers[i + 1].getPosition()).toFixed(2) + " meters<br />";
}
if (i !== 0) {
html += "<a href='javascript: google.maps.event.trigger(markers[" + (i - 1) + "],\"click\");'>prev</a>&nbspdist:" + google.maps.geometry.spherical.computeDistanceBetween(markers[i].getPosition(), markers[i - 1].getPosition()).toFixed(2) + " meters";
}
infowindow.setContent(html);
infowindow.open(map, marker);
}
})(marker, i))
}
} else {
alert('Directions request failed due to ' + status);
}
});
}
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>

Related

I have 15 kml files and I have a map from google map api, still I haven't found some way to put the correct kml from 15 kml files that I have according if the location are within kml area. Its possible to do that?
Example: I have this kml file in my map but if i am in other location but within kml area how can i check this one new coordinate is within the kml area?
One try that i made was extract 'sublocality' from my responde and in array put all sublocalitys from this area, the problem for this i the quantityt form each districts (like 80 subocalities each kml)
geocoder.geocode(
{'location': latlng},
function(results, status) {
if (status === 'OK') {
for (var i = 0; i < results[0].address_components.length; i++){
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
for (var i = 0; i < results.length; i++) {
//alert(results[i].types[0]+','+results[i].types[1]+','+results[i].address_components[0].long_name)
//district how i get them
if (results[i].types[0]=='political' && results[i].types[1]=='sublocality' ){
district = results[i].address_components[0].long_name;
console.log("Estas en el distrito: " + district);
console.log(district);
console.log(results);
}
}
}
else {console.log("No reverse geocode results.")}
}
else {console.log("Geocoder failed: " + status)}
}
}});
/*For get district*/
var distrito_2=["Peublito","San Jose 2","Independencia"];
var src_aux=null;
for(var i=0; i<distrito_1.length; i++){
if(district==distrito_1[i]){
console.log(distrito_1[i] + " Estas en el Distrito 1");
src_aux='https://www.dropbox.com/s/u8knmtfsp4bhnkd/Distrito_1.kml?dl=1';
}
}
for(var j=0; j<distrito_2.length; j++){
if(district==distrito_2[j]){
console.log(distrito_2[j] + " Estas en el Distrito 4");
src_aux='https://www.dropbox.com/s/e3t3u4y3ytxgkj1/Distrito_4.kml?dl=1';
}
}
var src=src_aux;
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});

One option is something like this example
This is implemented using the geoxml3 library to parse the KML to native Google Maps Javascript API v3 objects, then process through them to determine if the point is in one of the polygons, then show that KML, hiding all others
(disclaimer, I maintain that library)
proof of concept fiddle (only one polygon from each KML)
code snippet:
var geoXml = null;
var map = null;
var geocoder = null;
var toggleState = 1;
var infowindow = null;
var marker = null;
var address = null;
function initialize() {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 20.644352,
lng: -100.415056
},
zoom: 13,
});
geoXml = new geoXML3.parser({
map: map,
singleInfoWindow: true,
infoWindow: infowindow,
zoom: false
});
google.maps.event.addListener(geoXml, "parsed", function() {
if (address) setTimeout(function() {
showAddress(address);
}, 500);
});
geoXml.parseKmlString(Distrito_1_kml);
geoXml.parseKmlString(Distrito_4_kml);
google.maps.event.addListenerOnce(map, "idle", function() {
for (var j = 0; j < geoXml.docs.length; j++) {
for (var i = 0; i < geoXml.docs[j].placemarks.length; i++) {
var placemark = geoXml.docs[j].placemarks[i];
if (placemark.polygon) {
google.maps.event.addListener(placemark.polygon, 'click', clickHandler);
}
}
}
});
function clickHandler(evt) {
var contentString = "click<br>Outside Area";
var point = evt.latLng;
contentString += "<br>" + point.toUrlValue(6);
map.setCenter(point);
if (marker && marker.setMap) marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: point
});
contentString = findAndDisplayKml("click", point, contentString);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
google.maps.event.trigger(marker, "click");
}
}
function showAddress(address) {
var contentString = address + "<br>Outside Area";
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var point = results[0].geometry.location;
contentString += "<br>" + point;
map.setCenter(point);
if (marker && marker.setMap) marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: point
});
contentString = findAndDisplayKml(address, point, contentString);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
google.maps.event.trigger(marker, "click");
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function findAndDisplayKml(address, point, contentString) {
for (var j = 0; j < geoXml.docs.length; j++) {
geoXml.hideDocument(geoXml.docs[j]);
for (var i = 0; i < geoXml.docs[j].gpolygons.length; i++) {
if (google.maps.geometry.poly.containsLocation(point, geoXml.docs[j].gpolygons[i])) {
contentString = address + "<br>" + geoXml.docs[j].placemarks[i].name;
contentString += "<br>" + point + "<br>polygon#" + i;
geoXml.showDocument(geoXml.docs[j]);
}
}
}
return contentString;
}
window.initialize = initialize;
google.maps.event.addDomListener(window, 'load', initialize);
var Distrito_1_kml = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Document><name>Distrito_1</name><Style id="poly-0288D1-2000-76-normal"><LineStyle><color>ffd18802</color><width>2</width></LineStyle><PolyStyle><color>4cd18802</color><fill>1</fill><outline>1</outline></PolyStyle></Style><Style id="poly-0288D1-2000-76-highlight"><LineStyle><color>ffd18802</color><width>3</width></LineStyle><PolyStyle><color>4cd18802</color><fill>1</fill><outline>1</outline></PolyStyle></Style><StyleMap id="poly-0288D1-2000-76"><Pair><key>normal</key><styleUrl>#poly-0288D1-2000-76-normal</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#poly-0288D1-2000-76-highlight</styleUrl></Pair></StyleMap><Placemark><name>278</name><description><![CDATA[SECCIÓN: 278<br>ENTIDAD: Querétaro<br>MUNICIPIO: 14 - Santiago de Querétaro<br>DISTRITO LOCAL: 1]]></description><styleUrl>#poly-0288D1-2000-76</styleUrl><ExtendedData><Data name="SECCIÓN"><value>278</value></Data><Data name="ENTIDAD"><value>Querétaro</value></Data><Data name="MUNICIPIO"><value>14 - Santiago de Querétaro</value></Data><Data name="DISTRITO LOCAL"><value>1</value></Data></ExtendedData><Polygon><outerBoundaryIs><LinearRing><tessellate>1</tessellate><coordinates> -100.409668,20.629613,0 -100.409679,20.629712,0 -100.409677,20.630144,0 -100.409677,20.630171,0 -100.409736,20.630203,0 -100.40974,20.630463,0 -100.409766,20.631484,0 -100.408865,20.631579,0 -100.40774,20.631686,0 -100.406707,20.631787,0 -100.406284,20.631817,0 -100.406178,20.631825,0 -100.40615,20.631935,0 -100.406067,20.632246,0 -100.405943,20.632227,0 -100.40592,20.632289,0 -100.405889,20.632386,0 -100.405724,20.633048,0 -100.405695,20.633181,0 -100.405672,20.633451,0 -100.405676,20.633638,0 -100.4057,20.633793,0 -100.405738,20.633977,0 -100.405812,20.634262,0 -100.405874,20.634465,0 -100.405961,20.634735,0 -100.405996,20.634858,0 -100.406049,20.635118,0 -100.406072,20.635331,0 -100.406063,20.635521,0 -100.406045,20.635705,0 -100.406024,20.635952,0 -100.405983,20.636413,0 -100.40598,20.63645,0 -100.40595,20.636858,0 -100.405895,20.637401,0 -100.405889,20.637469,0 -100.40587,20.637762,0 -100.405842,20.638065,0 -100.405751,20.639173,0 -100.405732,20.639402,0 -100.405704,20.639709,0 -100.405628,20.640562,0 -100.405582,20.641011,0 -100.405564,20.641259,0 -100.405446,20.642328,0 -100.405318,20.643219,0 -100.405374,20.643227,0 -100.405399,20.643231,0 -100.405456,20.643239,0 -100.406037,20.643395,0 -100.406437,20.643468,0 -100.407015,20.64359,0 -100.40704,20.643685,0 -100.408085,20.643885,0 -100.409438,20.644105,0 -100.409939,20.644173,0 -100.409878,20.644563,0 -100.409818,20.644919,0 -100.409751,20.64538,0 -100.41022,20.645442,0 -100.41111,20.645431,0 -100.411504,20.645414,0 -100.412221,20.645394,0 -100.412427,20.645388,0 -100.412962,20.645388,0 -100.41305,20.645388,0 -100.413431,20.645386,0 -100.414645,20.645386,0 -100.415518,20.645369,0 -100.416074,20.645369,0 -100.416259,20.645391,0 -100.416281,20.646105,0 -100.416282,20.646274,0 -100.41605,20.648333,0 -100.416051,20.648501,0 -100.41727,20.648281,0 -100.41769,20.648367,0 -100.418161,20.648372,0 -100.418367,20.648374,0 -100.419087,20.648353,0 -100.419149,20.648262,0 -100.419288,20.648107,0 -100.419407,20.647987,0 -100.419611,20.647847,0 -100.41978,20.647777,0 -100.420391,20.647573,0 -100.420984,20.647497,0 -100.422092,20.647409,0 -100.424483,20.647507,0 -100.424309,20.647752,0 -100.424257,20.647935,0 -100.424227,20.648161,0 -100.424256,20.648305,0 -100.424305,20.648424,0 -100.424361,20.64856,0 -100.424457,20.648686,0 -100.424571,20.648801,0 -100.424734,20.648895,0 -100.424901,20.64899,0 -100.425074,20.649078,0 -100.425298,20.649134,0 -100.425556,20.649144,0 -100.425808,20.649116,0 -100.426017,20.64907,0 -100.426157,20.649002,0 -100.426322,20.648911,0 -100.426478,20.64881,0 -100.426633,20.648699,0 -100.42674,20.648567,0 -100.426825,20.648425,0 -100.426879,20.648276,0 -100.426909,20.648128,0 -100.426976,20.647611,0 -100.427061,20.647082,0 -100.427129,20.646682,0 -100.427177,20.646407,0 -100.427267,20.646006,0 -100.427389,20.645516,0 -100.427424,20.645349,0 -100.427566,20.644798,0 -100.427772,20.644361,0 -100.427917,20.644017,0 -100.428127,20.64377,0 -100.428267,20.643654,0 -100.428392,20.643547,0 -100.4285,20.643468,0 -100.428463,20.64357,0 -100.428438,20.643755,0 -100.428414,20.643993,0 -100.428422,20.644287,0 -100.428483,20.646538,0 -100.428548,20.649113,0 -100.42862,20.652588,0 -100.428633,20.652888,0 -100.428496,20.652953,0 -100.428183,20.652938,0 -100.427874,20.65296,0 -100.427573,20.653128,0 -100.427196,20.65325,0 -100.426666,20.653255,0 -100.42619,20.653591,0 -100.42584,20.653974,0 -100.42539,20.654381,0 -100.424962,20.654527,0 -100.424534,20.65465,0 -100.424082,20.654796,0 -100.421918,20.655855,0 -100.421962,20.656975,0 -100.42399,20.656872,0 -100.424178,20.656966,0 -100.424443,20.657054,0 -100.424708,20.657237,0 -100.424849,20.657355,0 -100.42493,20.657424,0 -100.424741,20.657959,0 -100.42454,20.658633,0 -100.423783,20.65966,0 -100.423629,20.660163,0 -100.423832,20.660401,0 -100.424282,20.661192,0 -100.424526,20.661691,0 -100.424871,20.662522,0 -100.425065,20.662688,0 -100.425891,20.663295,0 -100.426348,20.663612,0 -100.426923,20.663991,0 -100.427301,20.663709,0 -100.427383,20.663971,0 -100.427835,20.664538,0 -100.428085,20.664345,0 -100.428486,20.663879,0 -100.428889,20.663352,0 -100.429273,20.662799,0 -100.430088,20.662758,0 -100.430745,20.662683,0 -100.431194,20.662662,0 -100.43144,20.662651,0 -100.431967,20.662559,0 -100.432337,20.662451,0 -100.432465,20.662276,0 -100.432741,20.662077,0 -100.432827,20.662015,0 -100.432874,20.661981,0 -100.432824,20.661519,0 -100.432794,20.661265,0 -100.432722,20.66063,0 -100.432678,20.660225,0 -100.432622,20.659696,0 -100.43259,20.659398,0 -100.432569,20.659193,0 -100.4325,20.658553,0 -100.432471,20.658277,0 -100.432402,20.65765,0 -100.432359,20.657263,0 -100.43226,20.656375,0 -100.43216,20.655417,0 -100.43211,20.654995,0 -100.432048,20.65448,0 -100.432008,20.654025,0 -100.431916,20.653163,0 -100.431871,20.652729,0 -100.431801,20.652055,0 -100.431766,20.65171,0 -100.431701,20.651094,0 -100.431644,20.650602,0 -100.431541,20.649636,0 -100.43143,20.648652,0 -100.431375,20.648168,0 -100.43133,20.647664,0 -100.431298,20.647266,0 -100.431288,20.647142,0 -100.431281,20.647064,0 -100.43128,20.647045,0 -100.43127,20.646958,0 -100.431249,20.64678,0 -100.431246,20.646762,0 -100.431021,20.644856,0 -100.43101,20.644763,0 -100.430944,20.644197,0 -100.430865,20.643219,0 -100.430858,20.643095,0 -100.430855,20.643058,0 -100.430853,20.643017,0 -100.43081,20.642347,0 -100.430806,20.642283,0 -100.430804,20.642253,0 -100.4308,20.642197,0 -100.430797,20.642146,0 -100.430795,20.642117,0 -100.430793,20.642089,0 -100.430709,20.641467,0 -100.430668,20.641084,0 -100.430649,20.640904,0 -100.430644,20.640856,0 -100.430482,20.640176,0 -100.430299,20.639634,0 -100.42995,20.638893,0 -100.429937,20.638867,0 -100.429467,20.637874,0 -100.429077,20.637082,0 -100.428739,20.636372,0 -100.428481,20.635831,0 -100.427989,20.634822,0 -100.42776,20.634325,0 -100.427287,20.633299,0 -100.427198,20.633104,0 -100.426599,20.631688,0 -100.426416,20.631228,0 -100.426409,20.63121,0 -100.425877,20.629881,0 -100.425826,20.629755,0 -100.425815,20.629726,0 -100.425786,20.62965,0 -100.425422,20.628688,0 -100.425336,20.628494,0 -100.42525,20.6283,0 -100.424608,20.626793,0 -100.424455,20.626424,0 -100.423544,20.624231,0 -100.423324,20.623653,0 -100.423077,20.623005,0 -100.422868,20.622456,0 -100.422816,20.622325,0 -100.422801,20.622287,0 -100.42277,20.62221,0 -100.422432,20.622165,0 -100.42207,20.622108,0 -100.42132,20.621991,0 -100.420547,20.621882,0 -100.42039,20.62186,0 -100.419795,20.621778,0 -100.419674,20.621761,0 -100.419569,20.621747,0 -100.419549,20.621743,0 -100.419517,20.621738,0 -100.419429,20.621722,0 -100.41928,20.621696,0 -100.419197,20.621682,0 -100.418642,20.621585,0 -100.418609,20.621581,0 -100.418569,20.621576,0 -100.418475,20.621564,0 -100.417963,20.6215,0 -100.417891,20.621491,0 -100.417835,20.621484,0 -100.41776,20.621471,0 -100.417643,20.621452,0 -100.417184,20.621376,0 -100.41716,20.621372,0 -100.416811,20.621313,0 -100.416738,20.621302,0 -100.416712,20.621472,0 -100.417641,20.621598,0 -100.418602,20.621763,0 -100.418722,20.622057,0 -100.41787,20.622215,0 -100.418221,20.623157,0 -100.418466,20.623771,0 -100.41836,20.623797,0 -100.418067,20.623868,0 -100.41759,20.623966,0 -100.417702,20.62427,0 -100.417844,20.624656,0 -100.417312,20.624797,0 -100.417357,20.625136,0 -100.417388,20.625471,0 -100.41742,20.625469,0 -100.417734,20.625446,0 -100.418001,20.625418,0 -100.418268,20.625389,0 -100.41831,20.625836,0 -100.418314,20.625884,0 -100.418341,20.626164,0 -100.418372,20.626364,0 -100.418405,20.626574,0 -100.418424,20.626726,0 -100.418436,20.626825,0 -100.418463,20.626916,0 -100.418484,20.626983,0 -100.418588,20.627132,0 -100.418763,20.627254,0 -100.418909,20.627385,0 -100.418941,20.627425,0 -100.419004,20.627503,0 -100.419048,20.627679,0 -100.419063,20.627833,0 -100.419027,20.627957,0 -100.41892,20.628068,0 -100.418668,20.628094,0 -100.418495,20.628112,0 -100.418222,20.628141,0 -100.417921,20.628172,0 -100.4177,20.628195,0 -100.41773,20.628435,0 -100.416789,20.628549,0 -100.416545,20.628577,0 -100.416156,20.62862,0 -100.415776,20.628663,0 -100.41539,20.628706,0 -100.415005,20.628749,0 -100.414648,20.628789,0 -100.414655,20.629057,0 -100.41466,20.629217,0 -100.414663,20.629376,0 -100.413013,20.629444,0 -100.412907,20.628874,0 -100.412831,20.628879,0 -100.412811,20.628881,0 -100.412802,20.628818,0 -100.412744,20.628826,0 -100.412641,20.62884,0 -100.412229,20.628887,0 -100.412207,20.62889,0 -100.412109,20.628901,0 -100.412067,20.628906,0 -100.411789,20.628938,0 -100.411767,20.62894,0 -100.411679,20.62895,0 -100.411642,20.628954,0 -100.411394,20.628983,0 -100.411326,20.628991,0 -100.411107,20.629016,0 -100.410991,20.629029,0 -100.410692,20.6295,0 -100.41041,20.629968,0 -100.410392,20.629997,0 -100.409668,20.629613,0</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark></Document></kml>';
var Distrito_4_kml = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Document><name>Distrito_4</name><Style id="poly-817717-2000-76-normal"><LineStyle><color>ff177781</color><width>2</width></LineStyle><PolyStyle><color>4c177781</color><fill>1</fill><outline>1</outline></PolyStyle></Style><Style id="poly-817717-2000-76-highlight"><LineStyle><color>ff177781</color><width>3</width></LineStyle><PolyStyle><color>4c177781</color><fill>1</fill><outline>1</outline></PolyStyle></Style><StyleMap id="poly-817717-2000-76"><Pair><key>normal</key><styleUrl>#poly-817717-2000-76-normal</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#poly-817717-2000-76-highlight</styleUrl></Pair></StyleMap><Placemark><name>873</name><description><![CDATA[SECCIÓN: 873<br>ENTIDAD: Querétaro<br>DISTRITO LOCAL: 4<br>MUNICIPIO: 14 - Querétaro]]></description><styleUrl>#poly-817717-2000-76</styleUrl><ExtendedData><Data name="SECCIÓN"><value>873</value></Data><Data name="ENTIDAD"><value>Querétaro</value></Data><Data name="DISTRITO LOCAL"><value>4</value></Data><Data name="MUNICIPIO"><value>14 - Querétaro</value></Data></ExtendedData><Polygon><outerBoundaryIs><LinearRing><tessellate>1</tessellate><coordinates> -100.387018,20.653116,0 -100.387013,20.653004,0 -100.387008,20.652893,0 -100.386972,20.652406,0 -100.386918,20.651922,0 -100.386901,20.651777,0 -100.386856,20.651331,0 -100.386808,20.650925,0 -100.387001,20.650915,0 -100.38741,20.650885,0 -100.387892,20.650845,0 -100.387829,20.650077,0 -100.387819,20.649967,0 -100.387802,20.649779,0 -100.38775,20.64929,0 -100.387733,20.64913,0 -100.387688,20.64866,0 -100.387633,20.648093,0 -100.387427,20.64801,0 -100.38727,20.648222,0 -100.387047,20.648519,0 -100.386905,20.648699,0 -100.386793,20.648818,0 -100.386505,20.648618,0 -100.386161,20.648394,0 -100.385745,20.648144,0 -100.385368,20.647898,0 -100.385093,20.647712,0 -100.384971,20.647704,0 -100.38459,20.647692,0 -100.384169,20.647704,0 -100.383771,20.647707,0 -100.383534,20.647697,0 -100.383451,20.647725,0 -100.383356,20.64777,0 -100.383355,20.647705,0 -100.38272,20.647289,0 -100.382523,20.64716,0 -100.382382,20.647069,0 -100.382193,20.647327,0 -100.38218,20.647254,0 -100.381338,20.64651,0 -100.380943,20.646118,0 -100.380487,20.64562,0 -100.380335,20.645467,0 -100.380254,20.645587,0 -100.38013,20.645799,0 -100.380038,20.645948,0 -100.379893,20.646355,0 -100.379787,20.646673,0 -100.379565,20.647378,0 -100.379476,20.647649,0 -100.379344,20.64806,0 -100.379083,20.648925,0 -100.378938,20.649367,0 -100.37882,20.64977,0 -100.378679,20.650227,0 -100.378551,20.650662,0 -100.377934,20.652708,0 -100.377661,20.653563,0 -100.377527,20.65398,0 -100.377504,20.654161,0 -100.377618,20.654096,0 -100.378376,20.653822,0 -100.379451,20.653702,0 -100.380207,20.653642,0 -100.3805,20.65362,0 -100.380805,20.653597,0 -100.380867,20.653593,0 -100.381008,20.653582,0 -100.381346,20.653557,0 -100.381679,20.653531,0 -100.382206,20.653506,0 -100.382744,20.653452,0 -100.382803,20.653448,0 -100.383057,20.65343,0 -100.383387,20.653405,0 -100.383713,20.65338,0 -100.383815,20.653372,0 -100.38476,20.653302,0 -100.384882,20.653291,0 -100.385975,20.653201,0 -100.387018,20.653116,0</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark></Document></kml>';
#map {
height: 70%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
</head>
<body>
<form action="#" onsubmit="showAddress(this.address.value); return false" style="padding:10px 0px 30px 0px; background:none;">
<p>
<label>Address Search</label><br/>
<input type="text" size="60" id="address" name="address" value="San Jose El Alto" class="address" /><br/>
<input type="submit" value="Search" />(options: San Jose El Alto, Vistas de San Pablo)
</p>
</form>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3#master/polys/geoxml3.js"></script>
</body>
</html>

I have a problem with google maps, I can not remove map markers with the setVisible (false) function.
Why does marker.setVisible(false) not work for all markers?

Full code:
<style>html, body {height: 100%;margin: 0;padding: 0;}#map {height: 100%;width: 70%;margin-left: 30%;border: 1px solid #ddd;}</style>
<input type="text" id="nameTheme">
<input type="button" name="bt" id="bt" onclick="searchByTheme()" value="Search">
<div id="map"></div>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?language=en&libraries=geometry,places&key=AIzaSyA-AB-9XZd-iQby-bNLYPFyb0pR2Qw3orw"></script>
<script>
var infowindow;
var map;
var red_icon = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
var purple_icon = 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png';
//variable where marker values ​​are saved
var locations = [["12","-6.888048","-38.567562","Event name 1","theme 1","2018-08-13","2018-08-17","1","3"],["13","-6.889559","-38.545033","Event name 2","theme 2","2018-08-13","2018-08-15","1","3"],["14","-6.890481","-38.544441","Event name 3","theme 3","2018-08-15","2018-08-23","1","3"]];
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -6.889320, lng: -38.553678},
zoom: 14,
});
infoWindow = new google.maps.InfoWindow;
var markers = {};
var i ; var confirmed = 0;
for (var i = locations.length - 1; i >= 0; i--) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon : locations[i][7] === '1' ? red_icon : purple_icon,
html: "<div>\n" +
"<table class=\"map1\">\n" +
"<tr>\n" +
"<td><a>Título:</a></td>\n" +
"<td><input disabled id='manual_title' placeholder='" + locations[i][3]+"'></td></tr>\n" +
"</table>\n" +
"</div>"
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow = new google.maps.InfoWindow();
confirmed = locations[i][7] === '1' ? 'checked' : 0;
$("#confirmed").prop(confirmed,locations[i][7]);
$("#id").val(locations[i][0]);
$("#title").val(locations[i][3]);
$("#form").show();
infowindow.setContent(marker.html);
infowindow.open(map, marker);
}
})(marker, i));
}
function searchByTheme(){
var i ; var confirmed = 0;
for (var i = locations.length - 1; i >= 0; i--) {
if(locations[i][4] == nameTheme.value){
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon : locations[i][7] === '1' ? purple_icon : red_icon,
html: "<div>\n" +
"<table class=\"map1\">\n" +
"<tr>\n" +
"<td><a>Título:</a></td>\n" +
"<td><input disabled id='manual_title' placeholder='" + locations[i][3]+"'></td></tr>\n" +
"</table>\n" +
"</div>"
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow = new google.maps.InfoWindow();
confirmed = locations[i][7] === '1' ? 'checked' : 0;
$("#confirmed").prop(confirmed,locations[i][7]);
$("#id").val(locations[i][0]);
$("#title").val(locations[i][3]);
$("#form").show();
infowindow.setContent(marker.html);
infowindow.open(map, marker);
}
})(marker, i));
} else {
marker.setVisible(false );
}
}
}
</script>

I have this query
var service = new google.maps.places.PlacesService(map);
var request = {
location: currentLocation,
radius: '4828.03',
type: ['workout gyms']
};
service.nearbySearch(request, callback);
And I am able to successfully place a marker on every location, but I want to make the marker clickable such that it displays the placeID in an infoWindow when clicked. Does anyone know how I could do this?

Modified code from the related question: Place nearbySearch Callback doesn't iterate through all elements (to return place details)
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log("nearbySearch returned " + results.length + " results")
for (var i = 0; i < results.length; i++) {
// make a marker for each "place" in the result
createMarker(results[i]);
}
} else console.log("error: status=" + status);
}
function createMarker(place) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
// display the place "name" and "place_id" in the infowindow.
infowindow.setContent(place.name + "<br>" + place.place_id);
infowindow.open(map, this);
});
}
modified fiddle
code snippet:
function initMap() {
var lng;
var lat;
var my_loc = new google.maps.LatLng(37.4419, -122.1419);
map = new google.maps.Map(document.getElementById('map'), {
center: my_loc,
zoom: 10
});
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
var request = {
location: map.getCenter(),
radius: 4828.03,
type: ['workout gyms']
};
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log("nearbySearch returned " + results.length + " results")
for (var i = 0; i < results.length; i++) {
var id = results[i].place_id;
createMarker(results[i]);
}
} else console.log("error: status=" + status);
}
function createMarker(place) {
console.log("adding place " + place.name + " loc=" + place.geometry.location.toUrlValue(6));
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name + "<br>" + place.place_id);
infowindow.open(map, this);
});
}
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?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

I want to add multiple markers and infowindows that activated with a click.
I am having trouble to present the relevant infowindow of the marker, after a click the same infowindow open for all markers.
The information comes from a for loop
this is the code
function GetMarkerSuccess(results) {
results = $.parseJSON(results.d);
markers = [];
infowindows = [];
for (var i = 0; i < results.length; i++) {
var myLatLng = { lat: results[i].Latitude, lng: results[i].Longitude };
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:'images/car.png'
});
var infowindow = new google.maps.InfoWindow({
content: "<div style='text-align:right'><h3>" + results[i].Date.substring(0, 10) + "</h3><p> התחלה: " + results[i].Starttime + " סיום: " + results[i].Endtime + "</p><p> &#8362 מחיר:" + results[i].Price + "</p></div>"
});
markers.push(marker);
infowindows.push(infowindow);
listenMarker(marker);
function listenMarker(marker) {
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
}
}

function GetMarkerSuccess(results) {
results = $.parseJSON(results.d);
markers = [];
infowindows = [];
for (var i = 0; i < results.length; i++) {
var myLatLng = { lat: results[i].Latitude, lng: results[i].Longitude };
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon:'images/car.png'
});
var infowindow = new google.maps.InfoWindow({
content: "<div style='text-align:right'><h3>" + results[i].Date.substring(0, 10) + "</h3><p> התחלה: " + results[i].Starttime + " סיום: " + results[i].Endtime + "</p><p> &#8362 מחיר:" + results[i].Price + "</p></div>"
});
markers.push(marker);
infowindows.push(infowindow);
listenMarker(marker);
function listenMarker(marker) {
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
}

I am trying to make a website that need a google map on it with some markers
I have a problem with reading a javascript 2D array multiple time it gives me error
Cannot read property '0' of undefined
and here its my code
function initialize() {
var locations = [
//'City',LatLng,LatLng,Zoom
['Egypt', 26.820553, 30.802498, 6], //Center of whole map
['Alexandria', 'Egypt'], //pointer
['Mansoura', 'Egypt'], //pointer
['Assiut', 'Egypt'] //pointer
];
var mapOptions = {
zoom: locations[0][3],
center: new google.maps.LatLng(locations[0][1], locations[0][2]),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var geocoder = new google.maps.Geocoder();
var image = 'flag.png';
for (i = 1; i < locations.length; i++) {
geocoder.geocode({ 'address': locations[i][0] + ' ' + locations[i][1] }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
map: map,
icon: image,
position: results[0].geometry.location,
title: locations[i][0]
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent('<b style="font-size:30px;">' + locations[i][0] + '</b>'
+ '<br><b>Starting Date:</b> 11/5/2012'
+ '<br><b>Ending Date:</b> 30/5/2012'
+ '<br>Event Website');
infowindow.open(map, marker);
}
})(marker, i));
}
});
}
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyA6yYH66F1L3NgHAobufuUF6l-jjVCLwfE&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
I got the error in this section
when I am trying to read locations[i][0] many times.
for (i = 1; i < locations.length; i++) {
geocoder.geocode({ 'address': locations[i][0] + ' ' + locations[i][1] }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
map: map,
icon: image,
position: results[0].geometry.location,
title: locations[i][0]
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent('<b style="font-size:30px;">' + locations[i][0] + '</b>'
+ '<br><b>Starting Date:</b> 11/5/2012'
+ '<br><b>Ending Date:</b> 30/5/2012'
+ '<br>Event Website');
infowindow.open(map, marker);
}
})(marker, i));
}
});
}
and if there is anyway that I can handle this code in c# code behind it will be nice

[ignore previous comment about results]
The problem is that you're referencing i in the geocode() callback. The geocode() method is asynchronous - i.e. your callback is called after the for-loop has already finished. And at that time, i = 4, meaning locations[i] is undefined.
You should read up on how closures work if that doesn't make sense, but basically the solution is to put the code inside your for-loop into a separate function and pass it the location entry you want to work with, like so:
function geocodeLocation(location) {
geocoder.geocode({ 'address': location[0] + ' ' + location[1] },
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
map: map,
icon: image,
position: results[0].geometry.location,
title: location[0]
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent('<b style="font-size:30px;">' + location[0] + '</b>'
+ '<br><b>Starting Date:</b> 11/5/2012'
+ '<br><b>Ending Date:</b> 30/5/2012'
+ '<br>Event Website');
infowindow.open(map, marker);
}
})(marker, i));
}
}
);
}
for (var i = 1; i < locations.length; i++) {
geocodeLocation(locations[i]);
}