I've defined an overlay (implementing OverlayView) and after defining my overlay, I need to update some content in overlay. But it doesn't take effect unless I move the map.
What method to call so my overlay updates without moving the map? Is there a update/render method to update the view?
You can call the draw() function on the OverlayView, see the reference for more info.
I resolved the issue by using setMap(null) for removing the overlay and then redraw the complete overlay.
Related
Is it possible to create a webapp using Google Maps API V3 that uses custom images for countries or regions, that change on mouseover and mouseclick?
I have looked at google.maps.GroundOverlay and ProjectedOverlay but haven't found a solution. An example would be also great. Thank you.
Yes, it's possible..there are a couple ways to do it
One way is to use OverlayView - see demo here Showing/Hiding overlays
From the documentation:
Set the custom object's prototype to a new instance of google.maps.OverlayView(). This will effectively "subclass" the overlay class.
Create a constructor for your custom overlay, and set any initialization parameters to custom properties within that constructor.
Implement an onAdd() method within your prototype, and attach the overlay to the map. OverlayView.onAdd() will be called when the map is ready for the overlay to be attached..
Implement a draw() method within your prototype, and handle the visual display of your object. OverlayView.draw() will be called when the object is first displayed as well.
You should also implement an onRemove() method to clean up any elements you added within the overlay.
After that, you would then need to add an eventListener on the map for the click event for instance to activate this OverlayView, here's an example of how to add a click eventListener on the map https://developers.google.com/maps/documentation/javascript/examples/event-arguments
Hi~ I have about 200 markers on my map.
I want to make them dropping one by one when the page is loaded, i.e. adding a small delay/interval to each marker's dropping animation.
I tried to archive it by using jQuery's wait()delay() and JS's setTimeout() methods, but the animation seems to be triggered by the creation of the Marker instances, while those methods only working with methods calls. (eg: setTimeout(function(), 1000); )So I could get none of them working.
Can anyone please provide a simple solution for this problem? Thanks in advance!
Quick suggestion:
Create your markers but don't set them on a map. Add them to an array. When you're done creating the array, pop the first one and drop it on the map. Set an animation_changed event on the marker. When the marker stops dropping it will change it's animation to null. In the event, test what the animation is, and if it null, pop the next marker off and repeat.
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.).
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.