Question

I’m really stuck on this project that I’m doing. Below is my code. I am using the Google Maps API by the way.

var arr = new Array();
arr[0] = lat1, lon1
arr[1] = lat2, lon2
arr[2] = lat3, lon3
for (each i in arr){
    var newCenter = "<button onClick='map.setCenter(arr[i])'>Center Map</button>";
    $("#myTable").append(newCenter);
}

Now I know that

'map.setCenter(arr[i])'

is incorrect because it’s basically hard coding “arr[i]” into the DOM. What I want to do is use arr[i] as a variable so that the DOM has:

<button onClick='map.setCenter(arr[0])'>Center Map</button>
<button onClick='map.setCenter(arr[1])'>Center Map</button>
<button onClick='map.setCenter(arr[2])'>Center Map</button>

I have tried

"<button onClick='map.setCenter(" + arr[i] + ")'>Center Map</button>"

but that doesn’t work. I have been stuck on this for a pretty long time. Any help would be appreciated. Thank you.

Answer 1

1- to loop an array you use for (var i = 0 ; i < arr.length ;i++) and not the in operator.

2- You need to create your links on a separate function to obtain closure, (explanation here)

3- you array should hold google.maps.LatLng() objects.

var arr = new Array();
arr[0] = new google.maps.LatLng(lat1, lon1);
arr[1] = new google.maps.LatLng(lat2, lon2);
arr[2] = new google.maps.LatLng(lat3, lon3);


for (var i = 0 ; i < arr.length ;i++) {
    var button = createbutton(arr[i],i);
 }

function createbutton(latlon,index) {
    var button = document.createElement('button');
    var container = document.getElementById('containerDiv');
    button.onclick = function(){map.setCenter(latlon)};
    button.value = 'Center Map at ' + index;
    container.appendChild(button);
}

…and in your HTML:

<div id ="containerDiv"></div>