Question

I have a webpage that receives AJAX data with values listing_id, lat, lng using $.getJSON. The callback function takes these series of values and creates a Google map marker for each set of listing_id, lat, lng. The marker is then pushed into an array markers and its listing_id into an array markersListingId.

var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
var marker = new google.maps.Marker({
                position: latLng,
                icon: base_url + 'images/template/markers/listing.png',
            });
markers.push(marker);
markersListingId.push(json[i].listing_id);

Problem: The problem arises when I want to select a specific Marker that corresponds to a particular listing_id, especially in more complicated situations with markers being deleted and added to the markers array.

I can have for loops looping through all the marker’s id in markersListingId array then using the loop’s index i to get the marker in markers array, but this will make tracking very tricky.

var id_to_select = 1234;
for(var i = 0; i < markersListingId; i++) {
    if(markersListingId[i] == id_to_select) {
        markers[i].setMap(null);
    }
}

Question: How can I store the markers so that I can easily select a specific marker by using its listing_id?

Answer 1

When you create the markers, instead of using an array, can you use a hash table?

http://jsfiddle.net/j9J8x/

    var markers = {};

    //id goes in place of 1234
    n = 1234;
    markers[n] = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(0,0)
    });

    s = '2234'
    markers[s] = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(20,0)
    });

    google.maps.event.addListener(map, 'click', function(event) {
      k = 1234;
      markers[k].setMap(null);
      markers['2234'].setMap(null);
    });
  }