Auto close InfoWindow Google Maps API when click another marker

Question

I have problem with my Google Maps API v3 script. I am using CodeIgniter framework. The problem is when I clicked a marker, and then click another marker, InfoWindow Google Maps on previous marker didn't close. This is my code:

<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;
      ?>
  }

Any solution to make InfoWindow auto close when another marker clicked? I have tried several solutions on Stackoverflow and Google but didn't worked. Thanks for your kindly help :)

ffflabs ffflabs · Accepted Answer · 2017-03-29T18:54:11

You could declare just one infowindow, outside of your loop. Then each marker, when clicked, opens that infowindow on itself, filling it with the proper contents.

In the following example I set the contentString property on the marker itself.

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
  }
?>

Auto close InfoWindow Google Maps API when click another marker

2 Answers