Google Maps Marker Click Event Bubbling - javascript

I have a marker on a Google Map using the v3 Javascript API that is beneath another marker. When I click on the topmost marker, I would like to have the click event bubble up (down?) to the bottom-most marker with the goal of providing an optional menu for the user to choose which marker they meant to click.
Is this possible with the google.maps.event.addListener for click events?
Can I query the map for all markers that are contained by a given location, apart from hacking it myself?

As far as I know there isn't a builtin way to cycle through the markers on the click event. You can control the zIndex of each marker via the MarkerOptions which will override the default stacking based on vertical position:
All markers are displayed on the map
in order of their zIndex, with higher
values displaying in front of markers
with lower values. By default, markers
are displayed according to their
vertical position on screen, with
lower markers appearing in front of
markers further up the screen.
It think you will have to code this up yourself. I would love to hear how that goes.

Related

Leaflet events to control other layers in a layer group

For a map that I am working on, I have several GeoJSON FeatureCollections, one for each address in my data set. In each FeatureCollection, there is a Point marker for the address, as well as several PolyLines representing routes to that address. I would like to do the following:
1) Initialize the map showing only the Address point markers.
2) On mouseover of the Address point marker, show ALL of the route polylines for that feature collection.
It seems fairly easy to attach an event to a given feature in a layer group (like trigger a popup or change marker color when the point is clicked). However, I can't find a way to trigger the polylines to show when the point marker is clicked. Is there a way to do this?
You can initialize the map with all the points and polylines, but hide the polylines setting opacity to 0 in the options.
There was a very similar question here: Make Leafletmarkers searchable and blurr out the others
You can use this example: https://yafred.github.io/leaflet-tests/20170205-newsrooms-and-articles/ but set opacity to 0

Zoom map out to contain the given map bounds

I have a google map app and the user is able to perform a marker search.
The search has the current mapBounds so that I can search only in the current view. However, if I don't have any results in the current view - I'm trying to do a search within 100km of the center of the map.
If I find location within 100km I want to zoom out the map in order to show the locations I've found.
On the server I go through all my locations and get the sw and ne points. So basically in my ajax response I can directly create latLngBounds (no need to loop through the markers locations and extend the bounds).
The issue is whenever I try to do map.fitBounds(mynewbounds); nothing happens. The map stays as it is.
It seems that since the center of the map is the center of the new bounds, the map doesn't want to move. If I do map.pantobounds then the map moves to the northwest corner of the bounds.
The behavior of pantoBounds is expected according to the documentation:
https://developers.google.com/maps/documentation/javascript/reference
If the bounds is larger than the map, the map will be shifted to include the northwest corner of the bounds
Any ideas how to make the map zoom out in order to contain the new bounds?
Okay, I just figured out what is going on. Right before I set the boundaries I was trying to remove my zoom_out and dragend events. Unfortunately I opted in for using the clearListeners event, which was removing all events set on the map (even the one that are not set by me). So it seems that fitBounds issues are zoom_changed event, but the map was not responding to it, as all listeners were removed.
Once I removed the correct events by using removeListener(listenerInstance) the fitBounds function started to behave as expected.
So just as a warning to everyone else! Don't use clearListeners if you don't know what you are doing. It removes all events assigned to the map object which can lead to nasty behavior!

Place a draggable image above marker in google maps

Is there a way to do this? I've got markers placed on the map, but above it, I want to add an image, that looks exactly like the marker, that I can drag. I want to achieve effect that I drag the image to the defined place simultaneously the marker will still stay there so I'm actually operating with copy of this marker.
Thanks.

Custom InfoWindow size/pointer position in Google Maps API

I have a map application that can be seen here:
http://chrismcaleenan.com/map/?page_id=25
Each of the Malaysian states in the application will have an InfoWindow that displays additional information. You can see an example of this by mousing over 'Kedah' either in the main data table on the right or on the state itself in the map.
The problem, as you can see, is that the map pans in order to position the InfoWindow. Is there a way to fix the map position and set the InfoWindow size or position so that it is fully displayed without panning? In the Kedah example, one could have the InfoWindow positioned directly to the right and/or use a shorter tail.
One option would be to create a custom graphic for each state, but I'd rather avoid this as I will be running into the same issue with add'l data (e.g. click Kedah to zoom - will have InfoWindows on all data points on zoom).
If you're playing around double-clicking the water will zoom back out and reset map.
Thanks!
Yes, and sometimes the pan pulls the mouse outside of the state, which causes the InfoWindow to disappear. I know that's not what you want. The Google Maps demo catalog includes a sample that I think will give you what you want for your map. It's named SmartInfoWindow. Take a look, click on some of the markers, check out how the SmartInfoWindow behaves, and see if that might help you achieve what you want. It's not perfect, but it keeps the pan at the absolute minimum.

Moved marker disappears when using Marker Clusterer

I have an application that has a large number of markers (hence the desire to use Marker Clusterer), but I want to allow the user to move the marker around. Unfortunately, the marker disappears after it has been moved and you zoom out / in. Precisely, these are the steps that reproduce the problem:
Create all the markers / add them to a marker clusterer object.
Zoom in to see an individual marker.
Move the marker to a new location.
Zoom out until the clustering kicks in (and groups the moved marker with at least one other marker)
Zoom back in to see the marker that was moved.
I would expect the marker to still be there after zooming back in, but it is not. After step 3, the marker remains visible -- it only disappears after zooming out and then back in. The clustering still counts the marker correctly (it appears in the cluster total when zoomed out), but the marker doesn't ever appear again.
I have tried using the latest versions of MarkerClusterer and MarkerClustererPlus and I'm dealing with v3 of the maps API. Additionally, I have an event listener that calls repaint on the cluster after a marker dragend occurs (thinking that a repaint would cause the marker to be placed proper).
[Edit]
A minimal example (based on the Marker Clusterer example) that demonstrates the problem can be found here. The only things changed from this example are the lines including the javascript libraries (made absolute links), and adding draggable: true to the marker options. Following the above 5 steps should reproduce the problem.
This is a bug that has been reported to the google maps api team (issue # 167). See here
It is triggered any time by a setMap(map) followed by any sort of marker movement (including animation) followed by a setMap(null). At that point the marker cannot be shown again.

Categories