title: Storing Google Map Markers and Selecting a specific marker from it
body: <p>I have a webpage that receives AJAX data with values <code>listing_id, lat, lng</code> using <code>$.getJSON</code>.  The callback function takes these series of values and creates a Google map marker for each set of <code>listing_id, lat, lng</code>. The marker is then pushed into an array <code>markers</code> and its <code>listing_id</code> into an array <code>markersListingId</code>.</p>
  
  <pre><code>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);
  </code></pre>
  
  <p><strong>Problem:</strong> The problem arises when I want to select a specific Marker that corresponds to a particular <code>listing_id</code>, especially in more complicated situations with markers being deleted and added to the <code>markers</code> array. </p>
  
  <p>I can have for loops looping through all the marker's id in <code>markersListingId</code> array then using the loop's index <code>i</code> to get the marker in <code>markers</code> array, but this will make tracking very tricky.</p>
  
  <pre><code>var id_to_select = 1234;
  for(var i = 0; i &lt; markersListingId; i++) {
      if(markersListingId[i] == id_to_select) {
          markers[i].setMap(null);
      }
  }
  </code></pre>
  
  <p><strong>Question:</strong> How can I store the markers so that I can easily select a specific marker by using its <code>listing_id</code>?</p>