title: Google Maps API v3: Close infowindow when DOM element is clicked
body: <p>I'm playing around with Google maps for the first time, so I looked at a nice tutorial over at CSS Tricks: <a href="http://css-tricks.com/google-maps-slider/" rel="nofollow noreferrer">http://css-tricks.com/google-maps-slider/</a> I like working with jQuery better than pure JS, and this tutorial makes a nice way to click on a place in a list to display the marker in the map. </p>
  
  <p>I liked it that way, but I need to add infowindows to the marker. Which I did, but when I click on a place on the list and the map pans away, the infowindow stays open! I think it's because I need to attach the infowindow.close() to the event of clicking on a "#locations li". </p>
  
  <p>Here's my code, which runs on document.ready:</p>
  
  <pre><code>  $(function() {
  
                    var chicago = new google.maps.LatLng(41.924832, -87.697456),
                        pointToMoveTo, 
                        first = true,
                        curMarker = new google.maps.Marker({}),
                        $el;
  
                    var myOptions = {
                        zoom: 10,
                        center: chicago,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                      };
  
                    var map = new google.maps.Map($("#map_canvas")[0], myOptions);
  
                    $("#locations li").click(function() {
  
                      $el = $(this);
  
                      if (!$el.hasClass("hover")) {
  
                        $("#locations li").removeClass("hover");
                        $el.addClass("hover");
  
                        if (!first) { 
  
                          // Clear current marker
                          curMarker.setMap(); 
  
                          // Set zoom back to Chicago level
                          // map.setZoom(10);
                        }
  
                        // Move (pan) map to new location
                        function move(){
                          pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
                          map.panTo(pointToMoveTo);
  
                        }
  
                        move();
  
                        // Add new marker
                        curMarker = new google.maps.Marker({
                            position: pointToMoveTo,
                            map: map
                        });
  
  
                        // Infowindow: contenido
                          var contentString = '&lt;p&gt;'+$el.find("h3").html()+'&lt;/p&gt;';
                          contentString += 'hola' ;
  
  
                          var infowindow = new google.maps.InfoWindow(
                           { 
                             size: new google.maps.Size(150,50),
                             content: contentString
                           });
  
  
                          // On click, zoom map
                          google.maps.event.addListener(curMarker, 'click', function() {
                             //map.setZoom(14);
  
                             infowindow.open(map,curMarker);
  
                          });
  </code></pre>