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.
Related
I have initialized the map on load and after clicking on a list item markers will be added to the map based on data from backend. After that by clicking a button the map should be displayed in another view.The map is displayed as a small square in the top left corner.
I know this problem is caused due to initializing the map onload. But I have few more map views so I dont want to initialize everytime.
Is there anyway to solve this?
I am using the resize method..But I want to know where exactly I need to use the function..If in div containing the map container, on which event should I attach resize?
When you are doing the resize, you could fire a topic publish and on the subscribe for that topic, you could fire the resize trigger within Google Maps API?
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
I'm displaying InfoWindow popups (using InfoBubble, a stylable subclass implemented by some open source badasses) when map elements are hovered. If the thing on the map is at the edge, then the InfoBubble will be truncated.
Of course, there is the autoPan option, but that makes the performance bad because of the constant panning. Instead, I would like to either:
have the contents of the InfoWindow / InfoBubble be visible even though it extends beyond the map edge, or
intelligently switch the position and dimensions of the InfoWindow depending on where the edge is.
Option 2 is not what I want to be coding right now.
Anybody know of a way to achieve Option 1?
(Google Maps API v3)
I would try to set high z-index(say 1000) on the div that wraps the info bubble.
I think I solved this by ... not using the info bubble. I made a custom info bubble that just displayed a regular DOM node (a div) at the position that I wanted. It was therefore not subject to the limit of being inside of the map pane.
You can see the result on https://givelocal.drivetoendhunger.org/stats (the pop up that is displayed when you hover over the map is not an 'info bubble').
The Google map info window will not appear when I click on a marker using the iphone. The same code works on the desktop on Android.
I need the map hidden by default and then loaded in only when the user clicks the view map button as I want to keep the weight of the page down as this is for a mobile site.
The click event handler is being fired as I put an alert on it and it worked. I think it might be something to do with the order of the code when I attacked the click handlers, but thats a guess. Also, when I add draggable: true to the markers the bubble appears but I dont want the markers to be draggable.
I have set up a test page http://www.clawg.co.uk/nearby/testmap.html
A run through of this is:
I scan the DOM for data attributes values which I use to create an array of data that will be used for info windows.
I create a button on the fly that will make the map appear when clicked
When the button is clicked the map api is loaded in if its not already available
The map is then loaded
The markers are positioned on the map
The default marker icons are too small for iphone 4 making them unclickable, so I used a custom marker that was 42x42 in size.