I've dispatched mouse over events on polylines. This event is fired even when I mouse over on an overlay which is on the polyline. How can I avoid it so the overlay actually hides the polyline under it?
The simplest approach is probably just to set the Polyline's clickable property to false when you add the other overlay (which I'm assuming is a custom overlay). Then, the Polyline won't respond to mouse events at all, if that is your goal. For that, you simply pass a PolylineOptions object to the Polyline constructor, or call the Polyline.setOptions function and pass a PolylineOptions object, if you want to make the change dynamically after construction.
If you want something with more fine-grained aspects, such as taking full control of the stacking order of overlays, you will want to look into the MapPanes. There are seven panes, which are essentially layers where overlays may be added to the map. From bottom to top, they stack in this order:
MapPanes.mapPane
MapPanes.overlayLayer
MapPanes.overlayShadow
MapPanes.overlayImage
MapPanes.floatShadow
MapPanes.overlayMouseTarget
MapPanes.floatPane
Since you are trying to cloak even the mouse events of the Polyline, you will probably have to place your other overlay at the top, on the floatPane. I do this for some of my InfoBoxes, which function as rectangle map label boxes. My goal was to put them above everything else on the map and they do appear above everything else (the map, markers, overlays, etc.).
Related
Anyone know of a way to make it so that my click handler is not called or if called can determine that click was on interior of unfilled (or fillOpacity of 0) polygon? (Polygon is NOT editable so path and vertex will not be included in click event)
I want to ignore such clicks and allow click to "bleed" through polygon, I only want to process clicks on polygon outline.
I suppose I could do something with the latlng of the click to determine if it is more then some number of pixels from an edge but that seems way to complicated, especially if strokeWeight and zoom levels need to be taken into account.
(I often have custom markers inside the polygon that I render myself by subclassing OverlayView and want to process clicks on them instead in such a case.)
Thanks
Setting clickable to false on the PolygonOptions didn't fix the issue? If not, try using a Polyline instead of a Polygon. Then you don't have to worry about clicks in the middle.
I need to show some nice tooltip with image and text on mouse hover of google maps marker.
marker.setTitle - works only with text but not with html
Does google maps api have standard solution ?
Can you please suggest lib to create tooltips and make them look nice ?
Here is what I did on a project if you want a DIY solution.
Create a hidden div on your page with css position set to absolute. Make sure your DIV appears on top of your map container (z-index).
Bind mouseover and mouseout events to your markers to trigger a showDiv / hideDiv function.
When mouse hovers a marker, get the mouse x,y position, set the DIV top and left css values accordingly and set its css to display:block;
When mouse is out, hide the DIV again.
This way you can really control how your "infowindow" appears and what it will contain. Good luck.
You could listen for the mouseover event on the marker, and trigger an infoWindow to appear with that event.
Once you have the infowindow, you can put pictures and text in it in a way that is well supported by the api.
Oleg, why are you you bound to the google maps api. You can inject a custom tooltip into the DOM.
Attach event listeners for mouseover, mousemove and mouseout listeners on the map (or specific parts of the map). Each of those listeners also gives you an argument giving you the mouse coordinates.
Use a fixed/absolute style on the tooltip's css for positioning it
on mouseover, inject the tooltip at the cursor position into the DOM
on mousemove, update the position (left and top)
on mouseout, remove the tooltip from the DOM.
I've recently built this for google maps polygons. You can repurpose my approach for any other part of your map since almost every feature on the google map supports events.
link: https://medium.com/#asimmittal/custom-tooltips-for-google-maps-in-pure-javascript-a8004b8e9458
In Google Map API v3, as the title, I only saw 2 types of animation in google map api, but I saw in some places the map marker animate like grow big when mouse over it? How to implement this?
Use marker's mouseover event handler and setIcon() method. You can use dynamic icons from google chart api for this purpose, and change the chld attribute to make the icon grow:
http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.5|0|FF8800|15|_|
http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.6|0|FF8800|15|_|
http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.7|0|FF8800|15|_|
Don't forget to set proper anchor point! For example:
marker.setIcon(new google.maps.MarkerImage(
'http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.65|0|FF8800|15|_|',
null,
null,
new google.maps.Point(11, 43) // this is the proper anchor point for scale 0.65
));
You could use your own image as a marker, then make use of the scaledSize property for the marker image to make it bigger when the mouseover event fires.
I don't know of a way to do this without doing some more complicated stuff like this.
Any ideas on how to bind a click event to an OverlayView in v3 of the GMaps API? The overlays seem to be buried under the map's panes so clicking on the overlay results in just a zoom. I'd ultimately like to bind an infowindow to the overlay but just being able to click it would be a fine start.
Would just changing the z-index be the way to go? I tried this for a little while but couldn't get through all of the nested divs loaded by the map.
This is the demo I'm playing with: dutrack.com/markerShapes.php.
Edit: The overlays on the demo map are the large 'teardrop' icons and the paths. The smaller blue icons are Markers at the moment.
Consider placing your overlays in a different pane so that their z-Index is higher than. According to the documentation, getPanes().floatPane will get you the pane which is above all other map panes.
Also give your overlays a high z-Index so that they appear above other content in this frame.
Then use google.maps.event.addDomListener(..) to attach a click listener to your custom overlay.
I have a map with about hundred location points (markers). Which are grouped with ClusterMarker http://googlemapsapi.martinpearman.co.uk/clustermarker
And then there's one "main" marker, which is draggable.
If main marker location is overlapping with other marker then it becomes undraggable. Or in another words: clicking takes action on marker which is behind the main marker.
Weird, because I'm setting zIndexProcess when creating the main marker, which brings it to the front of others (by default it's not like that).
So.. I don't know what's the problem and how to ask but I would try like this: How to get clickable area to the front if I have brought to the front main marker icon already? (at least it is visible on top of others)
P.S. I have GPolygon drawn on the base of main marker (radius, a circle) and this circle is drawn behind all markers. Don't know if this is relevant. Oh, and I can't bring this polygon to the front (seems like zIndexProcess does not work on this)
I had a similar situation and what you can do is pass the event through to another object. In my example here if the condition is met then I pass the event (by triggering it) on the map itself. You could do a similar check to see if the event point is inside a visible polygon (I won't put that code here as it should be relatively easily doable) and pass the click event onto the polygon.
Here is the code (lightly modified) that I use:
google.maps.event.addListener(this.intLineObj ,"click", function(latlng) {
if (<condition>)
{
//pass the event down to the map
google.maps.event.trigger(map, "click", latlng);
} else {
//do stuff
}
});
I hope that helps.