Develop Reference

JavaScript for loop inside async function

I am running into promise error inside for loop which is inside async function.
var circles=[];
async function displayMarkersOnGoogleMap(locations) {
try {
for (i = 0; i < locations.length; i++) {
var latlong = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
var marker = new google.maps.Marker({
position: latlong,
title: ""
icon: {
url: "https://maps.google.com/mapfiles/ms/icons/red-dot.png",
labelOrigin: { x: 12, y: -10 }
},
map: map,
label: {
text: "",
color: "red",
fontWeight: "bold",
fontsize:"16px"
}
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
console.warn("Business Marker clicked");
var distanceInMeters = google.maps.geometry.spherical.computeDistanceBetween(
currentPosMarker.getPosition(),
marker.getPosition()
);
try {
circles.forEach(async (circle) => {
await circle.setMap(null);
})
} catch (e) {
}
if (i == undefined)
i = 0;
setTimeout(() => {
var circle = drawCircle(map, latlong, locations[i].rangeLimitInMeters);
circles.push(circle);
}, 5000);
var content = "<span style='font-weight: bold;'>" + locations[i].locationName + "</span>"
content = content + "<br/> " + locations[i].address + "<br/> " + locations[i].city + ", " + locations[i].state;
if (locations[i].locationOpenStatus == "CLOSE") {
content = content + "<br/><span class='badge badge-danger'>" + locations[i].locationOpenStatus + "</span>";
}
else {
content = content + "<br/><span class='badge badge-success'>" + locations[i].locationOpenStatus + "</span>";
}
content = content + "<br/><span style='font-weight: bold;'> Time : </span> " + locations[i].locationStartTime + " To " + locations[i].locationStopTime;
infowindow.marker = marker;
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, i));
markersArrray.push(marker);
}
} catch (e) {
console.error("Javascript:displayMarkersOnGoogleMap:-" + e.errorMessage );
}
}
How do I get around this ?
All I am trying to do is clear all the previous Circles that I might have drawn , before drawing the new one.

circles.forEach(async (circle) => {
await circle.setMap(null);
})
This right here, wont work as you expect it to. forEach loop doesn't work with async callbacks. Even if you explicitly mark your callback function as async, forEach loop wont wait for it to complete the promise.
Instead try with a for...of loop.This would execute whatever is inside synchronously, in the order you normally read the code.
for(const circle of circles) {
await circle.setMap(null);
}

Mapbox Javascript API function event call order

I am only attaching the script tag. Below is the flow of events that happen and the problem I see. I would appreciate any suggestions/advice.
I trigger the businessGeocoder by searching for an address, which triggers the businessAddress function inside the initialize function, which in turn triggers the businessLocationClickInfo function. This works perfectly.
Without refreshing the page I decide to use the employeeResidenceGeocoder by searching for an address, which triggers the employeeResidenceAddress function inside the initialize function, which in turn triggers the employeeResidenceLocationClickInfo function. This works perfectly. too.
Again, without refreshing the page I decide to use the businessGeocoder again by searching for an address, which triggers the businessAddress function inside the initialize function, which in turn SHOULD trigger the businessLocationClickInfo function, but instead, it triggers the employeeResidenceLocationClickInfo function. The employeeResidenceLocationClickInfo function, while it should have not been called, returns the correct data. I am having a hard time understanding why it is being called instead of the businessLocationClickInfo function.
Please note that doing it the other way, using employeeResidenceGeocoder first and then businessGeocoder, and then back to employeeResidenceGeocoder causes the same problem.
Update>> I ran console logs after each line and found out that because the click events are called in the initialize function, every time I click on the map both businessLocationClickInfo and employeeResidenceLocationClickInfo are being called, one replacing the other output div, whereas I want to only call one of them, depending on the geocoder. But I still haven't found a way/order to fix it.
<script>
var map;
var businessGeocoder;
var employeeResidenceGeocoder;
var businessLocationClickFeature;
var employeeResidenceLocationClickFeature;
var screenPoint;
var address;
var geocodeFeature;
var geocodePopup;
var geocodeCensusTract;
var geocodeCensusBlockGroup;
var businessLocationPolygon;
var employeeResidenceLocationPolygon;
function initialize() {
businessGeocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
flyTo: {
speed: 100
},
zoom: 17,
placeholder: "Search for a business location",
mapboxgl: mapboxgl
})
employeeResidenceGeocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
flyTo: {
speed: 100
},
zoom: 17,
placeholder: "Search for an employee's residence",
mapboxgl: mapboxgl
})
// // // adds geocoder outside of map (inside of map would make it a 'map control')
// document.getElementById('geocoder1').appendChild(businessGeocoder.onAdd(map));
// document.getElementById('geocoder2').appendChild(employeeResidenceGeocoder.onAdd(map));
map.addControl(businessGeocoder);
map.addControl(employeeResidenceGeocoder);
businessGeocoder.on('result', businessAddress);
employeeResidenceGeocoder.on('result', employeeResidenceAddress);
}
function businessAddress (obj) {
address = obj.result.place_name;
$(".geocode-result-area").html('<b>Geocoded Business Address: </b>' + address + '<br/><div class="medium-font">Click the blue address pin on the map for updated results.</div>');
$(".geocode-click-result-area").html("");
map.on('click', businessLocationClickInfo);
}
function employeeResidenceAddress (obj) {
address = obj.result.place_name;
$(".geocode-result-area").html('<b>Geocoded Employee Residence Address: </b>' + address + '<br/><div class="medium-font">Click the blue address pin on the map for updated results.</div>');
$(".geocode-click-result-area").html("");
map.on('click', employeeResidenceLocationClickInfo);
}
function businessLocationClickInfo (obj) {
businessLocationClickFeature = map.queryRenderedFeatures(obj.point, {
layers: ['tract-4332-1sbuyl','blockgroups-4332-9mehvk','businesslocation']
});
if (businessLocationClickFeature.length == 3) {
$(".geocode-click-result-area").html('<br/>This area meets the <span style="background-color:yellow">business location criteria</span> based on the following thresholds:'
+ '<table><tr><td>Renewal Community</td><td>' + businessLocationClickFeature[2].properties.Inquiry1 + '</td></tr>'
+ '<tr><td>CT & BG Poverty Rate ≥ 20%</td><td>' + businessLocationClickFeature[2].properties.Inquiry2 + '</td></tr></table>'
+ '<p><b>' + businessLocationClickFeature[0].properties.CountyName + " County" + '<br/>'
+ businessLocationClickFeature[0].properties.NAMELSAD + '<br/>'
+ businessLocationClickFeature[1].properties.NAMELSAD + '</b></p>'
+'<table><tr><th></th><th>Poverty Rate</th></tr><tr><td>CT '
+ businessLocationClickFeature[0].properties.TRACTCE + '</td><td>'
+ businessLocationClickFeature[0].properties.PovRate + "%" + '</td></tr><tr><td>BG '
+ businessLocationClickFeature[1].properties.BLKGRPCE + '</td><td>'
+ businessLocationClickFeature[1].properties.PovRate + "%" + '</td></tr></table>'
);
}
else {
$(".geocode-click-result-area").html('<br/> This area <u style = "color:red;">does not</u> meet the business location criteria based on the following thresholds:'
+ '<table><tr><td>Renewal Community</td><td>No</td></tr>'
+ '<tr><td>CT & BG Poverty Rate ≥ 20%</td><td>No</td></tr></table>'
+ '<p><b>' + businessLocationClickFeature[0].properties.CountyName + " County" + '<br/>'
+ businessLocationClickFeature[0].properties.NAMELSAD + '<br/>'
+ businessLocationClickFeature[1].properties.NAMELSAD + '</b></p>'
+ '<table><tr><th></th><th>Poverty Rate</th></tr><tr><td>CT '
+ businessLocationClickFeature[0].properties.TRACTCE + '</td><td>'
+ businessLocationClickFeature[0].properties.PovRate + "%" + '</td></tr><tr><td>BG '
+ businessLocationClickFeature[1].properties.BLKGRPCE + '</td><td>'
+ businessLocationClickFeature[1].properties.PovRate + "%" + '</td></tr></table>'
);
}
}
function employeeResidenceLocationClickInfo (obj) {
employeeResidenceLocationClickFeature = map.queryRenderedFeatures(obj.point, {
layers: ['tract-4332-1sbuyl','blockgroups-4332-9mehvk','employeeresidencelocation']
});
if (employeeResidenceLocationClickFeature.length == 3) {
$(".geocode-click-result-area").html('<br/>This area meets the <span style="background-color:yellow">employee residence location criteria</span> based on the following thresholds:'
+ '<table><tr><td>Renewal Community</td><td>' + employeeResidenceLocationClickFeature[2].properties.Inquiry1 + '</td></tr>'
+ '<tr><td>CT % LMI ≥ 70%</td><td>' + employeeResidenceLocationClickFeature[2].properties.Inquiry2 + '</td></tr>'
+ '<tr><td>CT & all BG Poverty Rate ≥ 20%</td><td>' + employeeResidenceLocationClickFeature[2].properties.Inquiry3 + '</td></tr></table>'
+ '<p><b>' + employeeResidenceLocationClickFeature[0].properties.CountyName + " County" + '<br/>'
+ employeeResidenceLocationClickFeature[0].properties.NAMELSAD + '<br/>'
+ employeeResidenceLocationClickFeature[1].properties.NAMELSAD + '</b></p>'
+ '<table id="CensusTable"><tr><th></th><th>Poverty Rate</th><th>LMI</th></tr><tr><td>CT '
+ employeeResidenceLocationClickFeature[0].properties.TRACTCE + '</td><td>'
+ employeeResidenceLocationClickFeature[0].properties.PovRate + "%" + '</td><td>'
+ employeeResidenceLocationClickFeature[0].properties.LMIPerc + "%" + '</td></tr>');
var BGsin20PovertyCT = map.queryRenderedFeatures(
{ layers: ['blockgroups-4332-9mehvk'],
filter: ["==", "TRACTCE", employeeResidenceLocationClickFeature[0].properties.TRACTCE]
});
var unique = [];
var distinct = [];
for (let i = 0; i < BGsin20PovertyCT.length; i++ ){
if (!unique[BGsin20PovertyCT[i].properties.BLKGRPCE]){
distinct.push(BGsin20PovertyCT[i]);
unique[BGsin20PovertyCT[i].properties.BLKGRPCE] = 1;
}
}
for (let i = 0; i < distinct.length; i++ ){
$("#CensusTable").append('<tr><td>BG ' + distinct[i].properties.BLKGRPCE + '</td><td>'
+ distinct[i].properties.PovRate + "%" + '</td><td>-</td></tr></table>'
);
}
}
else {
$(".geocode-click-result-area").html('<br/> This area <u style = "color:red;">does not</u> meet the employee residence location criteria based on the following thresholds:'
+ '<table><tr><td>Renewal Community</td><td>No</td></tr>'
+ '<tr><td>CT % LMI ≥ 70%</td><td>No</td></tr>'
+ '<tr><td>CT & all BG Poverty Rate ≥ 20%</td><td>No</td></tr></table>'
+ '<p><b>' + employeeResidenceLocationClickFeature[0].properties.CountyName + " County" + '<br/>'
+ employeeResidenceLocationClickFeature[0].properties.NAMELSAD + '<br/>'
+ employeeResidenceLocationClickFeature[1].properties.NAMELSAD + '</b></p>'
+ '<table id="CensusTable"><tr><th></th><th>Poverty Rate</th><th>LMI</th></tr><tr><td>CT '
+ employeeResidenceLocationClickFeature[0].properties.TRACTCE + '</td><td>'
+ employeeResidenceLocationClickFeature[0].properties.PovRate + "%" + '</td><td>'
+ employeeResidenceLocationClickFeature[0].properties.LMIPerc + "%" + '</td></tr>');
var BGsin20PovertyCT = map.queryRenderedFeatures(
{ layers: ['blockgroups-4332-9mehvk'],
filter: ["==", "TRACTCE", employeeResidenceLocationClickFeature[0].properties.TRACTCE]
});
var unique = [];
var distinct = [];
for (let i = 0; i < BGsin20PovertyCT.length; i++ ){
if (!unique[BGsin20PovertyCT[i].properties.BLKGRPCE]){
distinct.push(BGsin20PovertyCT[i]);
unique[BGsin20PovertyCT[i].properties.BLKGRPCE] = 1;
}
}
for (let i = 0; i < distinct.length; i++ ){
$("#CensusTable").append('<tr><td>BG ' + distinct[i].properties.BLKGRPCE + '</td><td>'
+ distinct[i].properties.PovRate + "%" + '</td><td>-</td></tr></table>'
);
}
}
}
mapboxgl.accessToken = 'pk.eyJ1Ijoia3l1bmdhaGxpbSIsImEiOiJjanJyejQyeHUyNGwzNGFuMzdzazh1M2k1In0.TcQEe2aebuQZ4G7d827A9Q';
map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/kyungahlim/ckd226uao1p7i1iqo8ag2ewmu',
center: [-95.925, 29.575],
zoom: 7
});
map.on('load', initialize);
// // Center the map on the coordinates of any clicked symbol from the 'symbols' layer.
// map.on('click', 'symbols', function(e) {
// map.flyTo({
// center: e.features[0].geometry.coordinates
// });
// });
// // Change the cursor to a pointer when the it enters a feature in the 'symbols' layer.
// map.on('mouseenter', 'symbols', function() {
// map.getCanvas().style.cursor = 'pointer';
// });
// // Change it back to a pointer when it leaves.
// map.on('mouseleave', 'symbols', function() {
// map.getCanvas().style.cursor = '';
// });
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-95.925, 29.575]
},
properties: {
title: 'Mapbox',
description: 'Washington, D.C.'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-122.414, 37.776]
},
properties: {
title: 'Mapbox',
description: 'San Francisco, California'
}
}]
};
// // geocode the typed-in address, zoom to the location, and put a pin on address
// function codeAddress() {
// sAddress = document.getElementById('inputTextAddress').value;
// geocoder.geocode( { 'address': sAddress}, function(results, status) {
// //latitude = results[0].geometry.location.lat();
// //longitude = results[0].geometry.location.lng();
// coordinate = results[0].geometry.location;
// if (status == google.maps.GeocoderStatus.OK) {
// if (GeocodeMarker){
// GeocodeMarker.setMap(null);
// }
// // bounds.extend(results[0].geometry.location);
// // PuppyMap.fitBounds(bounds);
// PuppyMap.setCenter(results[0].geometry.location);
// PuppyMap.setZoom(14);
// GeocodeMarker = new google.maps.Marker({
// map:PuppyMap,
// position: results[0].geometry.location,
// animation: google.maps.Animation.DROP,
// icon: housePin,
// zoom: 0
// });
// }
// else{
// alert("Geocode was not successful for the following reason: " + status);
// }
// });
// }
var marker = new mapboxgl.Marker(document.createElement('div'))
.setLngLat( [-95.925, 29.575])
.addTo(map);
// // add markers to map
// geojson.features.forEach(function(marker) {
// // create a HTML element for each feature
// var el = document.createElement('div');
// el.className = 'marker';
// // make a marker for each feature and add to the map
// new mapboxgl.Marker(el)
// .setLngLat(marker.geometry.coordinates)
// .addTo(map);
// });
</script>

Newbie Center/Set Zoom of Map to cover all visible Markers? [duplicate]

This question already has answers here:
Center/Set Zoom of Map to cover all visible Markers?
(4 answers)
Closed 6 years ago.
I am not a java programmer but I am using some code I found to create a map with multiple markers on so that I can display it within my application. I want the map to be positioned so that it is in the centre of all the markers zoomed out to see them all. I have found some code that that should do this but I don't know where to put it within the code I have. I am also a little unsure if the code i have is good and efficient. Any help would be most appreciated. The code I believe I need is
var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].getPosition());
}
map.fitBounds(bounds);
and my code is.....
var locations = [
['C1',-36.8604268000000,174.8360801000000,13140,'521 3131','E','Keith','','',6.72],
['C2',-36.9127356000000,174.9177729000000,16638,'535 5710','E','Debra','d#xtra.co.nz','027 1234546',15.59],
['C3',-36.9045042000000,174.8237394000000,28477,'725 5566','E','Yolande','y#a.kiwi.nz','027 1234546',8.31],
['C4',-36.8945087000000,174.8511699000000,25075,'70 5055','E','Vanessa','accounts#b.co.nz','027 1234546',9.44],
['C5',-36.9045042000000,174.8237394000000,25854,'25 5566','E','Yolande','z#f.kiwi.nz','027 1234546',8.31],
['C6',-36.8845042000000,174.8499481000000,21292,'7 3056','E','Paul','p#xtra.co.nz','027 1234546',8.79],
['C7',-36.8927054000000,174.8331774000000,30664,'06695791777','Not Rated','Jackie','admin#xyz.kiwi','027 1234546',8.01],
['C8',-36.9046501000000,174.8236843000000,25146,'789 525 3123','E','Debra','','02027 1234546',8.31],
['C9',-36.9338100000000,174.8967737000000,23342,'9274 4620','E','Janneane','j#adn.co.nz','',15.29],
['C10',-36.9222589000000,174.8529857000000,21336,'333 0793','E','Cynthia','cynthia#vt.co.nz','027 123 935',11.53],
['Test Client',-36.8484597000000,174.7633315000000,13983,'0652988421','E','Mickey Mouse','r#xyz.com','',0.10],
['Test Client 9 ACC',-36.8484597000000,174.7633315000000,27264,'8956398842','E','Matt','kn#ec.com','021 288 9999311',0.10],
['Test Client 6',-36.9316457000000,174.5736167000000,23605,'33 814 9577','E','John','ward#xtra.co.nz','027893068',19.17],
['Test Client 7',-36.8658161000000,174.5801917000000,22566,'44 232 0082','E','Yolanda','sw#stu.co.nz','02374585',16.33],
];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-36.8484480000000,174.7621910000000),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("default"),
myOptions);
setMarkers(map,locations)
}
function setMarkers(map,locations){
var marker, i
for (i = 0; i < locations.length; i++)
{
var name = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var code = locations[i][3]
var phone = locations[i][4]
var rating = locations[i][5]
var contact = locations[i][6]
var contactemail = locations[i][7]
var contactmobile = locations[i][8]
var Kms = locations[i][9]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map, title: name , position: latlngset
});
map.setCenter(marker.getPosition())
var content = "Client: " + name + '</p>' + '</h3>' + "Client No: " + code + '</p>' + '</h3>' + "Telephone: " + phone + '</p>' + '</h3>' + "Rating: " + rating + '</p>' + '</h3>' + "Contact Name: " + contact + '</p>' + '</h3>' + "Contact Email: " + contactemail + '</p>' + '</h3>' + "Contact Mobile: " + contactmobile + '</p>' + '</h3>' + "Kms From Start Point: " + Kms
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
}

var markers = []; //some array
var locations = [
['C1', -36.8604268000000, 174.8360801000000, 13140, '521 3131', 'E', 'Keith', '', '', 6.72],
['C2', -36.9127356000000, 174.9177729000000, 16638, '535 5710', 'E', 'Debra', 'd#xtra.co.nz', '027 1234546', 15.59],
['C3', -36.9045042000000, 174.8237394000000, 28477, '725 5566', 'E', 'Yolande', 'y#a.kiwi.nz', '027 1234546', 8.31],
['C4', -36.8945087000000, 174.8511699000000, 25075, '70 5055', 'E', 'Vanessa', 'accounts#b.co.nz', '027 1234546', 9.44],
['C5', -36.9045042000000, 174.8237394000000, 25854, '25 5566', 'E', 'Yolande', 'z#f.kiwi.nz', '027 1234546', 8.31],
['C6', -36.8845042000000, 174.8499481000000, 21292, '7 3056', 'E', 'Paul', 'p#xtra.co.nz', '027 1234546', 8.79],
['C7', -36.8927054000000, 174.8331774000000, 30664, '06695791777', 'Not Rated', 'Jackie', 'admin#xyz.kiwi', '027 1234546', 8.01],
['C8', -36.9046501000000, 174.8236843000000, 25146, '789 525 3123', 'E', 'Debra', '', '02027 1234546', 8.31],
['C9', -36.9338100000000, 174.8967737000000, 23342, '9274 4620', 'E', 'Janneane', 'j#adn.co.nz', '', 15.29],
['C10', -36.9222589000000, 174.8529857000000, 21336, '333 0793', 'E', 'Cynthia', 'cynthia#vt.co.nz', '027 123 935', 11.53],
['Test Client', -36.8484597000000, 174.7633315000000, 13983, '0652988421', 'E', 'Mickey Mouse', 'r#xyz.com', '', 0.10],
['Test Client 9 ACC', -36.8484597000000, 174.7633315000000, 27264, '8956398842', 'E', 'Matt', 'kn#ec.com', '021 288 9999311', 0.10],
['Test Client 6', -36.9316457000000, 174.5736167000000, 23605, '33 814 9577', 'E', 'John', 'ward#xtra.co.nz', '027893068', 19.17],
['Test Client 7', -36.8658161000000, 174.5801917000000, 22566, '44 232 0082', 'E', 'Yolanda', 'sw#stu.co.nz', '02374585', 16.33],
];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-36.8484480000000, 174.7621910000000),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("default"),
myOptions);
setMarkers(map, locations)
}
function setMarkers(map, locations) {
var bounds = new google.maps.LatLngBounds();
var marker, i
for (i = 0; i < locations.length; i++) {
var name = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var code = locations[i][3]
var phone = locations[i][4]
var rating = locations[i][5]
var contact = locations[i][6]
var contactemail = locations[i][7]
var contactmobile = locations[i][8]
var Kms = locations[i][9]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map,
title: name,
position: latlngset
});
map.setCenter(marker.getPosition())
var content = "Client: " + name + '</p>' + '</h3>' + "Client No: " + code + '</p>' + '</h3>' + "Telephone: " + phone + '</p>' + '</h3>' + "Rating: " + rating + '</p>' + '</h3>' + "Contact Name: " + contact + '</p>' + '</h3>' + "Contact Email: " + contactemail + '</p>' + '</h3>' + "Contact Mobile: " + contactmobile + '</p>' + '</h3>' + "Kms From Start Point: " + Kms
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
return function() {
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, content, infowindow));
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#default {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<div id="default"></div>

Cant define data. why is this?

I'm working on a small funny bit of code and i'm stuck.
on line 66 in the JS file. it cant define data... it is in the scope right?
please help me.
http://codepen.io/shiva112/pen/JGXoVJ
function PlaceMarkers(data){
for (i = 0; i < data.length - 1; ++i) {
if (data[i].country == "NL"){
map.addMarker({
lat: data[i].lat,
lng: data[i].lng,
title: 'Marker with InfoWindow',
infoWindow: {content: "Station: " + data[i].name},
click: function(e) {
$("#info h2").remove();
$("#info").append( "<h2>U hebt station " + data[i].name + " geselecteerd.</h2>" );
}
});
}
}
the append line is not working. data[i].name 2 lines above is in the scope!! but why not the data[i].name in the append line..

data[i].name in the click handler isn't evaluated until after the for loop has finished, and the values have changed. You can create an immediately invoked function expression to get around this:
function PlaceMarkers(data) {
for (i = 0; i < data.length; ++i) {
if (data[i].country == "NL") {
(function(station) {
map.addMarker({
lat: station.lat,
lng: station.lng,
title: 'Marker with InfoWindow',
infoWindow: {
content: "Station: " + station.name
},
click: function(e) {
$("#info h2").remove();
$("#info").append("<h2>U hebt station " + station.name + " geselecteerd.</h2>");
}
});
})(data[i]);
}
}
}
http://codepen.io/anon/pen/obxzmG

Like #JasonP said, in the click handler i isn't evaluated until after the for loop has finished.
You could set a custom key name and then access it by using this.name like this:
map.addMarker({
lat: data[i].lat,
lng: data[i].lng,
name: data[i].name,
title: 'Marker with InfoWindow',
infoWindow: {content: "Station: " + data[i].name},
click: function(e) {
$("#info h2").remove();
$("#info").append( "<h2>U hebt station " + this.name + " geselecteerd.</h2>" );
}
});
http://codepen.io/pespantelis/pen/LGNRgL

Google Map Geocoded TypeError in Callback function

I have the following 2 functions to pull in, geocode, and place markers in a google map.
I keep getting a TypeError: adds[i] is undefined, which of course is causing the rest of the map to bomb.
Here is my code:
// Place Markers on the Map
var PlaceMarkers = function (iw, adds, gc) {
var image = {url: "http://meatmysite.com/Images/star2.png", size: new google.maps.Size(24, 24)};
var aCt = adds.length;
for(var i = 0; i < aCt; ++i) {
GetLatLng(gc, adds[i].address, function(pos) {
if(pos) {
var ipop = '<h1>' + adds[i].title + '</h1>'; // <----- TypeError: adds[i] is undefined
if(!isBlank(adds[i].url)){
ipop += '' + adds[i].url + '<br />';
}
ipop += '<div class="map_item_content" id="mi_content' + i + '">' + adds[i].content + '</div>';
if(!isBlank(adds[i].mainphone)){
ipop += '<br /><strong>Phone:</strong> ' + adds[i].mainphone + '';
}
if(!isBlank(adds[i].mainemail)){
ipop += '<br /><strong>Email:</strong> ' + adds[i].mainemail + '';
}
console.log('HEY NOW: ' + pos.toString() + ' - Location Found!');
var mark = new google.maps.Marker({title: adds[i].title, position: pos, map: map, icon: image, html: ipop});
google.maps.event.addListener(mark, 'click', function(){
iw.setContent(this.html);
iw.open(map, this);
});
}
});
}
};
// Get Lat/Lng Location
var GetLatLng = function(gc, add, f) {
var ret = '';
gc.geocode({'address': add}, function(res, status) {
if (status == 'OK') {
f(res[0].geometry.location);
console.log('Found Here: ' + ret.toString());
}
});
return -1;
};
DEMO RETURNED DATA FOR adds
[
{
"address": "1 My Street Gilbert, AZ 85234",
"title": "My Title 1",
"url": "http://www.myurl.com/",
"mainphone": null,
"mainemail": null,
"content": "1 My Street<br />Gilbert, AZ 85234"
},
{
"address": "2 My Street North Richland Hills, TX 76182",
"title": "My Title 2",
"url": null,
"mainphone": null,
"mainemail": null,
"content": "2 My Street<br />North Richland Hills, TX 76182"
}
]

One option, pass the complete "address" object into the GetLatLng function, and from there into its callback (so you get function closure on it):
// Get Lat/Lng Location
var GetLatLng = function (gc, add, f) {
gc.geocode({
'address': add.address
}, function (res, status) {
if (status == 'OK') {
f(res[0].geometry.location, add);
}
});
};
Then use it like this inside the callback (you could pass just the index into the array also):
GetLatLng(gc, adds[i], function (pos, add) {
if (pos) {
var ipop = '<h1>' + add.title + '</h1>';
if (!isBlank(add.url)) {
ipop += '' + add.url + '<br />';
}
ipop += '<div class="map_item_content" id="mi_content' + i + '">' + add.content + '</div>';
if (!isBlank(add.mainphone)) {
ipop += '<br /><strong>Phone:</strong> ' + add.mainphone + '';
}
if (!isBlank(add.mainemail)) {
ipop += '<br /><strong>Email:</strong> ' + add.mainemail + '';
}
console.log('HEY NOW: ' + pos.toString() + ' - Location Found!');
var mark = new google.maps.Marker({
title: add.title,
position: pos,
map: map,
icon: image,
html: ipop
});
google.maps.event.addListener(mark, 'click', function () {
iw.setContent(this.html);
iw.open(map, this);
});
}
});
proof of concept fiddle
code snippet:
var geocoder = new google.maps.Geocoder();
var map;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
PlaceMarkers(infoWindow, adds, geocoder);
}
google.maps.event.addDomListener(window, "load", initialize);
// Place Markers on the Map
var PlaceMarkers = function(iw, adds, gc) {
var bounds = new google.maps.LatLngBounds();
var image = {
url: "http://meatmysite.com/Images/star2.png",
size: new google.maps.Size(24, 24)
};
var aCt = adds.length;
for (var i = 0; i < aCt; ++i) {
GetLatLng(gc, adds[i], function(pos, add) {
if (pos) {
var ipop = '<h1>' + add.title + '</h1>'; // <----- TypeError: adds[i] is undefined
if (!isBlank(add.url)) {
ipop += '' + add.url + '<br />';
}
ipop += '<div class="map_item_content" id="mi_content' + i + '">' + add.content + '</div>';
if (!isBlank(add.mainphone)) {
ipop += '<br /><strong>Phone:</strong> ' + add.mainphone + '';
}
if (!isBlank(add.mainemail)) {
ipop += '<br /><strong>Email:</strong> ' + add.mainemail + '';
}
console.log('HEY NOW: ' + pos.toString() + ' - Location Found!');
var mark = new google.maps.Marker({
title: add.title,
position: pos,
map: map,
// icon: image,
html: ipop
});
bounds.extend(mark.getPosition());
map.fitBounds(bounds);
google.maps.event.addListener(mark, 'click', function() {
iw.setContent(this.html);
iw.open(map, this);
});
}
});
}
};
// Get Lat/Lng Location
var GetLatLng = function(gc, add, f) {
gc.geocode({
'address': add.address
}, function(res, status) {
if (status == 'OK') {
f(res[0].geometry.location, add);
}
});
};
var adds = [{
"address": "1 My Street Gilbert, AZ 85234",
"title": "My Title 1",
"url": "http://www.myurl.com/",
"mainphone": null,
"mainemail": null,
"content": "1 My Street<br />Gilbert, AZ 85234"
}, {
"address": "2 My Street North Richland Hills, TX 76182",
"title": "My Title 2",
"url": null,
"mainphone": null,
"mainemail": null,
"content": "2 My Street<br />North Richland Hills, TX 76182"
}];
function isBlank(str) {
return (!str || /^\s*$/.test(str));
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

This looks like a typical binding issue. By the time your callback is called, the value of adds[i] will have changed. It is likely that the loop terminated and i has now a value of last index + 1, which is pointing to nothing. Note that it could also point to the wrong index, that would not fail but use the wrong data.
You must bind the value of adds[i] locally for each iteration or the callback will just use a reference to a global value. There a multiple ways to go about this, here is a simple one where we keep passing adds[i] along as a function argument.
Replace adds[i].address with adds[i] when calling GetLatLng and add a second parameter add to the callback:
GetLatLng(gc, adds[i], function(pos, add) {
...
});
Then modify GetLatLng to use add.address instead of just add and add add to the callback call:
// Get Lat/Lng Location
var GetLatLng = function(gc, add, f) {
var ret = '';
gc.geocode({'address': add.address}, function(res, status) {
if (status == 'OK') {
f(res[0].geometry.location, add);
console.log('Found Here: ' + ret.toString());
}
});
return -1;
};
Then in the callback function, replace all instances of adds[i] with add to use the local variable.
I didn't set up a test but it should theoretically work.

you appear to be overcomplicating things. Any reason why you can't do this?
// Place Markers on the Map
var PlaceMarkers = function (iw, adds, gc) {
var aCt = adds.length;
for(var i = 0; i < aCt; ++i) {
var obj=adds[i];
GetLatLng(gc, obj)
}
};
// Get Lat/Lng Location
var GetLatLng = function(gc, obj) {
var ret = '';
gc.geocode({'address': obj.address}, function(res, status) {
if (status == 'OK') {
var pos=res[0].geometry.location;
var ipop = '<h1>' + obj.title + '</h1>'; // <----- TypeError: adds[i] is undefined
if(!isBlank(obj.url)){
ipop += '' + obj.url + '<br />';
}
ipop += '<div class="map_item_content" id="mi_content">' + obj.content + '</div>';
if(!isBlank(obj.mainphone)){
ipop += '<br /><strong>Phone:</strong> ' + obj.mainphone + '';
}
if(!isBlank(obj.mainemail)){
ipop += '<br /><strong>Email:</strong> ' + obj.mainemail + '';
}
console.log('HEY NOW: ' + pos.toString() + ' - Location Found!');
var mark = new google.maps.Marker({title: obj.title, position: pos, map: map, html: ipop});
google.maps.event.addListener(mark, 'click', function(){
iw.setContent(this.html);
iw.open(map, this);
});
} else {
console.log("geocoder problem!")
}
});
};

for(var i = 0; i < aCt - 1; ++i). You need to add "-1" in you for-loop. The array starts at index 0 and not 1. You also need to be careful with using functions in a for loop. Within javascript a for-loop does not have a scope from itself. Only functions create new scopes.