Google Maps API v3: закрытие информационного окна при нажатии на элемент DOM

Question

Я впервые играю с картами Google, поэтому я посмотрел хороший урок по CSS Tricks: http://css -tricks.com / google-maps-slider / Мне нравитсяработа с jQuery лучше, чем с чистым JS, и этот урок дает хороший способ щелкнуть место в списке для отображения маркера на карте.

Мне понравилось, но мне нужно добавить инфоокна к маркеру.Что я и сделал, но когда я нажимаю на место в списке и карта перемещается, информационное окно остается открытым!Я думаю, это потому, что мне нужно прикрепить infowindow.close () к событию нажатия на «#locations li».

Вот мой код, который работает на 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().