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
Related
Instead of the default position above the marker , I want the InfoWindow to be open to the top right corner of the map . How to do that ?
Infowindows may be attached to either a marker object or on the map itself at a sepcified lat,lng. That being said, if you allow users to pan your map, there isn't a good way to put the infowindow at the top-right corner of the map. You can only anchor it to a marker or specific lat,lng. Moving the map will move the infowindow whether it is anchored to a marker or a lat,lng.
One possible thing you could do as a workaround is use custom controls as documented here:
https://developers.google.com/maps/documentation/javascript/controls#CustomControls
You can put these custom controls at the top-right corner of the map. Depending on what you were wanting the infowindow to have inside of it, you may be able to use the custom controls in the link above to accomplish what you need. The custom controls are really intended for user interaction, but if you need to have an info-window at the top-right of your map to display information, I believe this would be a good workaround.
I hope this helps!
I am trying to make a Polyline editor, just like the one from Google Drawings Library. (for specific reasons, i can't use that one)
It works on the same principle. Start with a point, then for each click add new points and make the polyline.
On the editor from Google Drawings Library, while you are editing a polyline, you're mouse can't interact with other items from the map.
Inspecting with firebug, i see that they have an overlay of 20000000 z-index inside the map.
Is there any way of creating the same overlay for my map using default Google Maps functions?
It's a custom overlay inside the overlayMouseTarget-pane with the same size as the map and a draw-method that updates the position of the overlay. You may do the same.
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.).
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.