title: google map close markers while others are opened
body: <p>I have been working with cutsomizing a google map for my website for a while now, and Can't figure out how to close other markers when another is opened.  I have called for the mouseout code to close the markers for now, but it's a lame patch and would like to figure out a better way to do it.</p>
  
  <p>Here's some of the marker script.</p>
  
  <p>I think if I added something like <code>infoWindow.close();</code> or 
  <code>infoWindow. + infoWindow2. + infoWindow3. + close();</code>
  to the onClick function() it might work but I don't know the proper area to do this or if this is valid.</p>
  
  <pre><code>    // Get the HTML DOM element that will contain your map 
        // We are using a div with id="map" seen below in the &lt;body   
        var mapElement = document.getElementById('map');
        // Create the Google Map using out element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);
  
        var image = 'img/marker.png';
      var office = new google.maps.Marker({
        position: myLatLng,
        map: map,
        animation: google.maps.Animation.BOUNCE,
        icon: image,
        title: 'Coven-Goldman'
      });
  
          myInfoWindowOptions = {
      content: '&lt;div class="hideonmob info-window-content"   &lt;h4   Hello! This is our office. &lt;/h4   &lt;p   Please click on the other locations to see
  information on our properties.&lt;/p   &lt;p   &lt;img style="width:20px"
  src="img/logosmall.png"   &lt;/p   &lt;/div   ',
      maxWidth: 275   };
  
    infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);
  
    google.maps.event.addListener(office, 'click', function() {
      infoWindow.open(map,office);   });
  
    google.maps.event.addListener(office, 'dragstart', function(){
      infoWindow.close();   });
  
    google.maps.event.addListener(office, 'mouseover', function(){
      infoWindow.close();   });
  
    infoWindow.open(map,office);
  
  
  
        var image = 'img/marker.png';
      var marker2 = new google.maps.Marker({
        position: buildingone,
        map: map,
        animation: google.maps.Animation.DROP,
        icon: image,
        title: 'Coven-Goldman'
      });
  
  
          myInfoWindowOptions = {
      content: '&lt;div class="hideonmob info-window-content"   &lt;h4   24475 Hilltop Dr &lt;br    Beachwood, OH &lt;/h4   &lt;p   Please click on the other
  locations to see information on our properties.&lt;/p   &lt;p   &lt;img
  style="width: 100%;" src="img/23800CommerceShad.jpg"   &lt;/p   &lt;/div   ',
      maxWidth: 275   };
  
    infoWindow2 = new google.maps.InfoWindow(myInfoWindowOptions);
  
    google.maps.event.addListener(marker2, 'click', function() {
      infoWindow2.open(map,marker2);   });
  
    google.maps.event.addListener(marker2, 'dragstart', function(){
      infoWindow2.close();   });
  
   google.maps.event.addListener(marker2, 'mouseover', function(){
      infoWindow2.close();   });
  
  
   var image = 'img/marker.png';
      var marker3 = new google.maps.Marker({
        position: buildingtwo,
        map: map,
        animation: google.maps.Animation.DROP,
        icon: image,
        title: 'Coven-Goldman'
      });
  
  
               myInfoWindowOptions = {
      content: '&lt;div class="hideonmob info-window-content"   &lt;h4   24475 Hilltop Dr &lt;br    Beachwood, OH &lt;/h4   &lt;p   Please click on the other
  locations to see information on our properties.&lt;/p   &lt;p   &lt;img
  style="width: 100%;" src="img/23800CommerceShad.jpg"   &lt;/p   &lt;/div   ',
      maxWidth: 275   };
  
    infoWindow3 = new google.maps.InfoWindow(myInfoWindowOptions);
  
    google.maps.event.addListener(marker3, 'click', function() {
      infoWindow3.open(map,marker3);   });
  
    google.maps.event.addListener(marker3, 'dragstart', function(){
      infoWindow3.close();   });
  
   google.maps.event.addListener(marker3, 'mouseover', function(){
      infoWindow3.close();   });
  
  
   var image = 'img/marker.png';
      var marker4 = new google.maps.Marker({
        position: buildingthree,
        map: map,
        animation: google.maps.Animation.DROP,
        icon: image,
        title: 'Coven-Goldman'
      });
  
  
                   myInfoWindowOptions = {
      content: '&lt;div class="hideonmob info-window-content"   &lt;h4   24475 Hilltop Dr &lt;br    Beachwood, OH &lt;/h4   &lt;p   Please click on the other
  locations to see information on our properties.&lt;/p   &lt;p   &lt;img
  style="width: 100%;" src="img/23800CommerceShad.jpg"   &lt;/p   &lt;/div   ',
      maxWidth: 275   };
  
    infoWindow4 = new google.maps.InfoWindow(myInfoWindowOptions);
  
    google.maps.event.addListener(marker4, 'click', function() {
      infoWindow4.open(map,marker4);   });
  
    google.maps.event.addListener(marker4, 'dragstart', function(){
      infoWindow4.close();   });
  
    google.maps.event.addListener(marker4, 'mouseover', function(){
      infoWindow4.close();   });
  </code></pre>
  
  <p>"</p>
  
  <p>A live link to my site</p>