See the example code working on JSFiddle.net and follow along using this document to discover the wonderful world of WHAT THE F&%^K!(https://jsfiddle.net/t3jt3szr/)
Goal: To allow a user to add a new marker to a google map and utilize the "drag and drop" 1 marker feature to reposition the marker after adding it to the map.
Desired Feature: When a user finishes dragging a marker in to position, to check if the marker is positioned over a "POI"2 already loaded to the map.
Problem: Google maps API only exposes a 'click' event for these markers for use by developers. This means that the only way to know if a "POI" Icon exists in a specific x/y pixel coordinate position on a loaded map is to click that position on the map. All other mouseEvents do not pass placeId data to the event handler.
Attempt 1: Triggering a googleMouseEvent('click') on the map w/ the pixel coordinates of the dragEnd
Results 1: A click event fired which implemented my click listener but only pixel coordinates were passed to the click event unlike a click event is fired from clicking on a POI icon where the event contains data including pixel coordinates, lat/lng, and PlaceId.
Attempt 2: Loading all google places "points of interest" inside of the map viewport and storing them in a variable. On dragend I was going to see if there was a lat/lng value that matched the lat/lng coordinates of the dragged and dropped marker.
Results: The icons on the page are not all POIs within the viewpoint, so loading in ALL of them resulted in a lot of unnecessary points stored in this array. Google does not expose any algorithm or rhyme or reason for which icons are shown on the map or why, so this ultimately failed because it became unruly.
Attempt 3: Found a map method called 'getClickablePoints()'.
Results: All that seems to do is tell you if you have "clickablePoints" set to true.
Attempt 4: Final attempt: Triggering a click on the map container element using a browser-triggered new MouseEvent to try to really trick google maps in to believing someone ACTUALLY clicked on that exact location.
Results: My click event handler fires, but it seems to be targeted to the marker that was dragged in place and not the map tiles as a whole. This results in the click handler only seeing the marker data which is only pixel coords and lat/lng coords even though the context in which the mouse event was fired was via the window.
- [1] Maps API Javascript Events Docs
- [2] When displaying a google map on a web page google by default will show a Point of Interest (POI) icon on the map. The map owner can control the styling of these icons (look/graphics or hide via styling) and set these icons as "clickableIcons" to allow an infoWindow to show on click or to disable this feature at the map object creation level via map setOptions().