Clicking same Marker twice opens two InfoWindows

Question

I got infowindows working, but for some reason if I click the same marker multiple clicks it opens multiple of the same infowindow. I have a feeling it has to be something with my code, but I cant quite put my finger on what it is. Any help is appreciated.

var map;
var markers = [];

function initMap() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 14,
        center: new google.maps.LatLng(33.6894120, -117.9872660),
        mapTypeId: 'roadmap',
        disableDefaultUI: true
    });



    function addMarker(feature) {
        var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map,
            type: feature.type,
            title: feature.title,
            description: feature.description
        });
        marker.addListener('click', function() {
            map.setCenter(marker.getPosition());

            var infoWindow = new google.maps.InfoWindow({
                map: map, 
                pixelOffset: new google.maps.Size(0, -60)
            });
            infoWindow.setContent(marker.description);
            infoWindow.setPosition(marker.position);

            google.maps.event.addListener(map, 'drag', function() {
                infoWindow.close();
            });
            google.maps.event.addListener(map, 'click', function() {
                infoWindow.close();
            });
        });
        markers.push(marker);
    }

    filterMarkers = function(getType) {
        //console.log(getType);
        for (var i = 0; i < markers.length; i++) {
            if (markers[i].type == getType || getType == "") {
                markers[i].setVisible(true);
            } else {
                markers[i].setVisible(false);
            }
        }
    }

    var features = [

        {
          position: new google.maps.LatLng(-33.91721, 151.22630),
          type: 'type1',
          description: 'Description1'
        },{
          position: new google.maps.LatLng(-33.91721, 151.22630),
          type: 'type2',
          description: 'Description2'
        },{
          position: new google.maps.LatLng(-33.91721, 151.22630),
          type: 'type3',
          description: 'Description3'
        }


    ];

    for (var i = 0, feature; feature = features[i]; i++) {
        addMarker(feature);
    }
}

$(document).ready(function(){
    initMap();
});

Can you give more of your code? Where do you create markers variable? — Mert Metin, Dec 04 '16 at 17:17
What I am saying is that you are pushing to markers array but I cannot see where you defined it which is probably the reason why you are having this error. — Mert Metin, Dec 04 '16 at 18:15
Mert, I have added my complete code. Do you see anything that could be the bad code? — oompahlumpa, Dec 04 '16 at 18:22
can you define map and markers variable inside of initMap function and try again? — Mert Metin, Dec 04 '16 at 18:24
does the same thing.. still producing multiple infowindows with multiple clicks. — oompahlumpa, Dec 04 '16 at 19:21
If found the problem. Give me a few mintues. I will post it. — Mert Metin, Dec 04 '16 at 19:26
@geocodezip I removed that part of the code as I didn't want a bunch of unneccesary code in there.. so it would be expected that a referenceerror would occur. — oompahlumpa, Dec 05 '16 at 17:22
Then you should have also removed the dependencies on that code — geocodezip, Dec 05 '16 at 17:39

score 2 · Answer 1 · answered Dec 05 '16 at 05:38

If you don't want an infowindow created every time you click on the marker, don't create a new one every time you click on the marker, create one for the marker (or one for the map, if you only ever want one open), and open it in the click listener.

function addMarker(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    map: map,
    type: feature.type,
    description: feature.description
  });
  // create infowindow for the marker 
  var infoWindow = new google.maps.InfoWindow({});
  marker.addListener('click', function() {
    map.setCenter(marker.getPosition());
    // set the content of the infowindow
    infoWindow.setContent(marker.description);
    // open the infowindow on the marker.
    infoWindow.open(map,marker);
  });
  markers.push(marker);
}

proof of concept fiddle

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

You are creating a new InfoWindow with every marker click:

marker.addListener('click' ... var infoWindow = *new google.maps.InfoWindow( ...*

It is expected that you get multiple instances.

If you want one InfoWindow for all markers you can follow this example

If you want to have one per each marker check out this SO answer.

edited May 23 '17 at 12:08

Community

1
1

answered Dec 04 '16 at 20:58

kaskader

1,931
16
24

Both of those examples appear to be using a single content string. I want to be able to define my content strings in my array of markers. – oompahlumpa Dec 04 '16 at 23:44

Clicking same Marker twice opens two InfoWindows

2 Answers2