CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
FeanDoe
FeanDoe

Reputation: 1668

InfoWindow doesn't open correctly with link when marker is outside view on Google Maps V3

I made a map with markers clustered on Google Maps. The makers have a listener that set the zoom, then center the map and then open a infowindow.

In a for loop I made a list with links to every marker that looks like this

<a href="javascript:google.maps.event.trigger(markers['+i+'],\'click\');">' + item.nombre + '</a>

If I click a marker on the map there is no problem: the map is centered and the infowindow is showed.

The problem is if I press a link form the list: if the maker is not showing on the map the infowindow is open incorrectly (in a wrong position and overlapping an icon) and the map is not centered (the map doesn't even show the correct place of the marker).
like this
Strangely, if I zoom out the map at a point that the real position of the marker is showed the InfoWindow is set correctly on the correct marker and there is no problem if I press the same link again, just like in the second image.
No problem

Here is the jsfiddle, the error could be reproduced if I click on Playa Maqui Lodge and then on any other link using Firefox 43

So, what am I missing? Why the map is not centering on the link?

Upvotes: 0

Views: 1347

Answers (1)

geocodezip
geocodezip

Reputation: 161384

The marker isn't added to the map until it is "unclustered", zoom to it then "click" on it. The zoom must be higher than the maxZoom of the markerClusterer.

Either set the markerClusterer maxZoom to 15 or change your code to zoom in closer to the marker.

google.maps.event.addListener(marker, 'click', function() {
  infowindow.close();
  map.setZoom(21);
  map.setCenter(this.getPosition());
  infowindow.setContent(this.html);
  infowindow.open(map, this);
});

proof of concept fiddle

Looks like there is an issue with the computation of the anchor using a custom infowindow (which I didn't see before as you didn't provide your custom marker). It works if you don't use the InfoWindow.open(map, anchor) syntax and set the pixelOffset and position of the InfoWindow manually. 

var infowindow = new google.maps.InfoWindow({pixelOffset:new google.maps.Size(0,-35)});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.close();
  map.setZoom(16);
  map.setCenter(this.getPosition());
  infowindow.setContent(this.html);
  infowindow.setPosition(this.getPosition());
  infowindow.open(map);
});

updated proof of concept fiddle (with custom marker)

Upvotes: 1

Related Questions