Google Maps API v3: Close infowindow when DOM element is clicked

Question

Hi, I'm playing around with Google maps for the first time, so I looked at a nice tutorial over at CSS Tricks: http://css-tricks.com/google-maps-slider/ 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.

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".

Here's my code, which runs on document.ready:

  $(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 = '<p>'+$el.find("h3").html()+'</p>';
                        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);

                        });

Answer 1

It looks like you're creating a new InfoWindow for each marker. Quoting from the Google Maps API Docs:

If you only want one info window to display at a time (as is the behavior on Google Maps), you need only create one info window, which you can reassign to different locations or markers upon map events (such as user clicks).

Therefore, you may simply want to create one InfoWindow object just after you initialize your map, and then handle the click event handler as follows:

google.maps.event.addListener(curMarker, 'click', function() {
   infowindow.setContent(contentString);
   infowindow.open(map, curMarker);
});

Then the InfoWindow should automatically close when you click on a new marker without having to call the close() method.