title: Creating a Select drop down menu for marker on Google Maps v3
body: <p>I have created some simple maps following the Google API tutorials.
  The code used is shown below with only two markers in the array, but more are used.
  As some markers are close together on the map I would like to read the markers into a select / option drop down menu so markers can be selected by name "cave:" in the array in addition to being able to click on the markers.. I have not been able to find a way to do this as yet. Is this possible?</p>
  
  <p>Also is there a way to close the previous infowindow when a new one is opened? </p>
  
  <pre><code>&lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&amp;amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
        function initialize() {
          var mapOptions = {
            mapTypeId: google.maps.MapTypeId.SATELLITE
          };
          var map = new google.maps.Map(document.getElementById("map-canvas"),
          mapOptions);
  
      var markers = [
      { lat: 51.589994, lng: -4.112497, cave: "Cat Hole Cave", name: "&lt;h2&gt;Cat Hole Cave&lt;/h2&gt;&lt;img src='http://www.ogof.org.uk/Pictures/Entrances/1118.jpg' width='200' height='150'&gt;&lt;br&gt;&lt;h3&gt;&lt;A href='http://www.cambriancavingcouncil.org.uk/registry/ccr_registry_view.php?ID=1118' target=_blank&gt;Cambrian Cave Registry Entry&lt;/A&gt;&lt;br&gt;&lt;br&gt;SS 53757 90020&lt;br&gt;Altitude 51m&lt;br&gt;Length 30m&lt;/h3&gt;", site: "blue_cave.png"},
      { lat: 51.564564, lng: -4.274611, cave: "Mewslade Quarry Cave - Left", name: "&lt;h2&gt;Mewslade Quarry Cave - Left Entrance&lt;/h2&gt;&lt;img src='http://www.ogof.org.uk/Pictures/Entrances/1570.jpg' width='200' height='150'&gt;&lt;br&gt;&lt;h3&gt;&lt;A href='http://www.cambriancavingcouncil.org.uk/registry/ccr_registry_view.php?ID=1570' target=_blank&gt;Cambrian Cave Registry Entry&lt;/A&gt;&lt;br&gt;&lt;br&gt;SS 42440 87530&lt;br&gt;Altitude TBCm&lt;br&gt;Length 10m&lt;br&gt;&lt;br&gt;Photo courtesy of Gary Evans&lt;/h3&gt;", site: "blue_cave.png" },
  ];
  
  for (index in markers) addMarker(markers[index]);
  function addMarker(data) {
  
      var marker = new google.maps.Marker({
      position: new google.maps.LatLng(data.lat, data.lng),
      map: map,
      title: data.cave,
      icon: data.site
    });     
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    title.innerHTML = data.name;
    content.appendChild(title);
    var infowindow = new google.maps.InfoWindow({
    content: content,
    maxWidth: 180
      });
  
    google.maps.event.addListener(marker, "click", function() {
    infowindow.open(map, marker);
    });
  }
  var bounds = new google.maps.LatLngBounds();
      for (index in markers) {
        var data = markers[index];
        bounds.extend(new google.maps.LatLng(data.lat, data.lng));
      }
      map.fitBounds(bounds);
    }   
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
  &lt;div id="map-canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is a link to the page as it works at the moment. 
  <a href="http://www.ogof.org.uk/Gower-Cave-Location-Map.html" rel="nofollow">http://www.ogof.org.uk/Gower-Cave-Location-Map.html</a></p>