Google Maps API v3: closing info-dubbing when a DOM element is clicked

Question

This is my first time playing with Google maps, so I looked at a good lesson in CSS Tricks: http://css-tricks.com/google-maps-slider/ I like working with jQuery better than pure JS, and this tutorial provides a good way to click in the place in the list to display the marker on 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 in the list and the card is removed, the infowindow remains open! I think because I need to bind infowindow.close () to the click event on "#locations li".

Here is my code that works 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

, InfoWindow . API Google:

( Google), , (, ).

, InfoWindow click :

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

InfoWindow close().