单击另一个标记时自动关闭 InfoWindow Google Maps API

Question

我的 Google Maps API v3 脚本有问题。我正在使用 CodeIgniter 框架。 问题是当我单击一个标记，然后单击另一个标记时，前一个标记上的 InfoWindow Google Maps 没有关闭。这是我的代码：

<script type="text/javascript">
      var peta;
      var gambar_kantor = new Array();
      var nama     = new Array();
      var kategori = new Array();
      var alamat   = new Array();
      var telpon   = new Array();
      var x        = new Array();
      var y        = new Array();
      var i;
      var url;
      var gambar_marker;
      var gambar_kantor;
      var baseurl  = "<?php echo base_url() ?>";

      function map_init() {
          var map = new google.maps.LatLng(-6.990411, 110.422542);


          var myStyles =[
          {
              featureType: "poi",
              elementType: "labels",
              stylers: [
                    { visibility: "off" }
              ]
          }
          ];

          var petaoption = {
              zoom: 12,
              center: map,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              styles: myStyles 
              };

          peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);


          getdatabase();
      }

      function getdatabase(){
          var markers = [];
          var info= [];


          <?php
        $query = $this->db->query("SELECT l.id, l.nama, l.gambar, l.alamat, l.telp, l.latittude, l.longitude, k.nama_kategori, k.ikon
                                    FROM lokasi as l, kategori as k
                                    WHERE l.kategori=k.id");
          $i = 0;
          $js = "";

          foreach ($query->result() as $value) {

          $js .= 'nama['.$i.'] = "'.$value->nama.'";
                  alamat['.$i.'] = "'.$value->alamat.'";
                  telpon['.$i.'] = "'.$value->telp.'";
                  x['.$i.'] = "'.$value->latittude.'";
                  y['.$i.'] = "'.$value->longitude.'";
                  set_icon("'.$value->ikon.'");

                  var point = new google.maps.LatLng(parseFloat(x['.$i.']),parseFloat(y['.$i.']));

                  var contentString = "<table>"+
                                              "<tr>"+
                                                  "<td align=center><br><b>" + nama['.$i.'] + "</b></td>"+
                                              "</tr>"+
                                              "<tr>"+
                                                  "<td align=center width=300px>" + alamat['.$i.'] + "</td>"+
                                              "</tr>"+
                                              "<tr>"+
                                                  "<td align=center> Telp: " + telpon['.$i.'] + "</td>"+
                                              "</tr>"+
                                          "</table>";

                  var currentInfoWindow = null;

                  var infowindow = new google.maps.InfoWindow({
                      content: contentString

                  });


                  var marker = new google.maps.Marker({
                          position: point,
                          map: peta,
                          icon: gambar_marker,
                          clickable: true
                      });


                  markers.push(marker);
                  info.push(infowindow);


                  google.maps.event.addListener(markers['.$i.'], "click", function() {
                    info['.$i.'].open(peta,markers['.$i.']); 
                  });
               ';
            $i++;   
      }

      // echo JS
      echo $js;
      ?>
  }

当点击另一个标记时，有什么解决方案可以让 InfoWindow 自动关闭？ 我在 Stackoverflow 和 Google 上尝试了几种解决方案，但没有奏效。感谢您的热心帮助:)

Answer 1

您可以在循环之外仅声明一个信息窗口。然后，每个标记在单击时会自行打开该信息窗口，并用适当的内容填充它。

在以下示例中，我在标记本身上设置了contentString 属性。

var infowindow = new google.maps.InfoWindow();

<?php
foreach ($query->result() as $value) {
....
?>


    var marker = new google.maps.Marker({
                   position: point,
                   map: peta,
                   icon: gambar_marker,
                   clickable: true,
                   content: contentString
                 });


    markers.push(marker);

    google.maps.event.addListener(marker, "click", function() {
        infowindow.setContent(marker.content);
        infowindow.open(peta,marker); 
    });

<?php
  }
?>

Answer 2

也许这个链接对你有用？

之前回答：Close infowindow when another marker is clicked

确保在您的 JS 中的主要谷歌地图代码之外声明全局变量：

file: var lastOpenedInfoWindow;

祝你好运！