javascript - Google Maps infobox position next to marker not over the marker - Stack Overflow

admin管理员组

文章数量:1399823

I want to know how I can position the infobox for the Google markers, not over the pin but something similar to this website. Here, when you hover over group of markers the infobox is shown at the same point thus the mouseout event is not triggered because the mouse is still over the group of markers.

I want to know how I can achieve something similar with the post I did yesterday. So to wrap up the post, is there any styling code which I can apply so I can show the infobox right over the marker?

I want to know how I can position the infobox for the Google markers, not over the pin but something similar to this website. Here, when you hover over group of markers the infobox is shown at the same point thus the mouseout event is not triggered because the mouse is still over the group of markers.

I want to know how I can achieve something similar with the post I did yesterday. So to wrap up the post, is there any styling code which I can apply so I can show the infobox right over the marker?

• javascript
• google-maps
• google-maps-api-3
• google-maps-markers
• markerclusterer

Share Improve this question Follow edited Oct 9, 2022 at 19:31 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Nov 20, 2013 at 20:40 LazialeLaziale 8,2354848 gold badges155155 silver badges271271 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

It is set at 140px in right by default, so set the values for x and y respectively and the box will appear there everytime.

offset values you can arrange yourself.

try this code..

 var infowindows = []; //make it global
 var popup = new InfoBox({
      // size: new google.maps.Size(420,130),
        content:content_info
       ,pixelOffset: new google.maps.Size(10, -100) //these are the offset values to be adjusted accordingly..
       ,disableAutoPan: false
       ,closeBoxMargin: "5px 5px 2px 2px"
       ,boxStyle: {opacity: 0.95
              }

    });

infowindows.push(popup);
 google.maps.event.addListener(marker, 'mouseover', function() {
        close_popups();
        map.panTo(mycenter1);
        popup.open(map, marker);


        // currentPopup = null;
      });

function close_popups(){
      for(var i = 0; i<infowindows.length; i++){
        infowindows[i].close();
      }
    }

You can use the alignBottom and pixelOffset properties of InfoBox to achieve what you want. I created a fiddle which admittedly looks terrible, but I think it can get you on the right track in terms of the implementation. You can polish it to your liking after you get it working :) FIDDLE

Basically, you specify the options like:

var ibOptions = {
    content: 'your content',
    pixelOffset: new google.maps.Size(-5, -15),
    alignBottom: true
};

You can adjust the pixelOffset to your liking, so the content shows over the marker and the mouseout is not triggered.

Then you do this to bind to the mouseover event (which you probably already know):

google.maps.event.addListener(marker, "mouseover", function (e) {
    ib.open(map, this);
});

本文标签： javascriptGoogle Maps infobox position next to marker not over the markerStack Overflow