CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
Richard
Richard

Reputation: 4415

Position Gmaps infowindow in order to not make the map pan


I want to change the current behaviour of my Google Map, so that it display's the infowindow on mouseover and open's a certain link onclick. Displaying the infowindow is not a problem, but the issue now is that the mapcenter will change if the infowindow doesn't fit in the current div; which means the marker position will change and it is not 'mouseover' anymore and the infowindow disappears.

I'm trying to create similar behavious as on e.g.: http://www.booking.com/city/nl/amsterdam.html?sid=de243c5062b6be49f9a67baa38992974;city=-2140479

imho there are 2 solutions I can think of that would do the trick;

  1. calculating the position of the marker and position the infowindow based on that
  2. Not letting the map change position when the infowindow is displayed, but this would mean the info window might not be visible in some cases, so not ideal.

In the given example, they don't use google.maps.Marker() to add the markers, but they add div's using own code.

createMarker: function (d, g, n, l, e, m) {
    var i = this.b_map_icons[e];
    var b = (i.height) ? i.height : 20;
    var h = (i.width) ? i.width : 17;
    var f = i.iconAnchor[0];
    var a = (i.zOrder) ? i.zOrder : 20;
    var k = g - i.iconAnchor[1];
    var o = (e == "cluster") ? '<div class="ml-text">' + m + "</div>" : "";
    var c = "display:block;width:" + h + "px;height:" + b + "px;left:" + (d - f) + "px;top:" + k + "px;position:absolute;cursor:pointer;z-index:" + (a + 1) + ";";
    var j = $('<div class="marker marker_type_' + e + '" id="' + n + '" style="' + c + '">' + o + '<img alt="' + l + '" src="' + i.image + '" style="position:absolute;top:0px;left:0px;z-index:12000;" /></div>');
    return j
},

Preferrably I'd position the infowindow based on the marker position so it always displays in the current map, is this possible?

Upvotes: 0

Views: 1986

Answers (1)

Kenneth Jakobsen
Kenneth Jakobsen

Reputation: 458

Yup, its very possible just add an eventlistener to the marker:

 google.maps.event.addListener(marker, 'mouseover', function () {
       info.open(map, this.position);
 });

The above is from a solution i have written, but I think you get the pictur :) just use the marker position (this.position)

EDIT:

After looking at your example, it occurs to me that you are not in need of an infowindow at all, you need a custom overlay, which is essentially a DOM element with Coords in it.

Documentation

Upvotes: 0

Related Questions