CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3ionic-framework
Oscar Franco
Oscar Franco

Reputation: 6220

ionic, how to display correct infowindow on google maps?

I have several markers in a google map using their javascript API and I want to display an info window on top of the tapped marker, however when you tap in one of the markers in opens the info window in the last marker created not in the corresponding marker, sample code:

    for(var i = 0; i < points; i++) {
      var randomLatLong = new google.maps.LatLng(position.coords.latitude + getRandomArbitrary(-radius, radius), position.coords.longitude + getRandomArbitrary(-radius, radius));

      var marker = new google.maps.Marker({
          map: $scope.map,
          animation: google.maps.Animation.DROP,
          position: randomLatLong,
      });

      var infoWindow = new google.maps.InfoWindow({
          content: "Here is something to see!"
      });

      marker.addListener('click', function () {
          infoWindow.open($scope.map, marker);
      });
    }

here is a codepen:

http://codepen.io/ospfranco/pen/yOPpey

just tap on one of the markers and te info will open on other marker

Anyone knows how to solve this?

Upvotes: 0

Views: 1058

Answers (1)

user13136
user13136

Reputation: 74

Just change 'marker' to 'this' in your listener.

 marker.addListener('click', function () {
          infoWindow.open($scope.map, this);
      });

Upvotes: 1

Related Questions