Anyone know of a way to make it so that my click handler is not called or if called can determine that click was on interior of unfilled (or fillOpacity of 0) polygon? (Polygon is NOT editable so path and vertex will not be included in click event)
I want to ignore such clicks and allow click to "bleed" through polygon, I only want to process clicks on polygon outline.
I suppose I could do something with the latlng of the click to determine if it is more then some number of pixels from an edge but that seems way to complicated, especially if strokeWeight and zoom levels need to be taken into account.
(I often have custom markers inside the polygon that I render myself by subclassing OverlayView and want to process clicks on them instead in such a case.)
Thanks
Setting clickable to false on the PolygonOptions didn't fix the issue? If not, try using a Polyline instead of a Polygon. Then you don't have to worry about clicks in the middle.
Related
First, I have been reviewing some of the different Google Maps API docs, but I've never done much coding with it. I'm trying to build a simple game for kids in which, if the user clicks on a map within a certain distance of a key map point (could be within 1 mile, 100 yards, 5 miles...depending on situation), then the map point becomes visible and a custom message is displayed with it.
Which google maps api calls would enable this to work? How would I embed a hidden point on the map? With the map being rendered on the client, for security, if I could detect the point clicked and send that point via ajax to the server, then the server could send back whether there is a hidden point at that location, that seems like it could work. Or maybe there's a better way.
Can someone point me in the right direction, as to which API calls, and maybe code samples if possible? To summarize, I'm looking for the following functionality:
Track the lat/long coords of any user-clicked point on a google map. Have that click send the coords to my javascript function.
Have hidden points on the map that the user can't see, but either Maps (or at least just my server via ajax) can be aware of.
Ability to display a custom message right next to the clicked spot or hidden point, when needed.
Thanks!
When I understand correctly what you are trying to achieve it's much easier.
Draw a circle and hide the circle by setting the strokeWeight and fillOpacity to 0 . As radius use the allowed distance, as center the LatLng of the point
Although the circle now is not visible, the API will still respond to click-events on the circle, you only have to set a click-listener for the circle and create e.g. a marker at the center of the circle.
Note: a clickable circle will have a different cursor, you must set a unique cursor for the complete map, otherwise the users will be able to find the circle by hovering the map.
Demo: http://jsfiddle.net/doktormolle/0secbwuf/
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.).
Is there any tool that can help me with getting the coordinates for a specific area/polygon?
I usually use Google Earth.
Draw a polygon, then move the mouse over and right click > copy.
Then you can paste it in the notepad and you will find the coordinates there (remeber the format (long, lat,n) the reverse of Google Maps format.
You can also use online tools to format the information or remove parts.
http://www.earthpoint.us/Shapes.aspx
So the idea is to have a map, draw a polygon on it (I assume by placing the vertexes) and then getting the coordinates of the vertexes?
You can make markers draggable when you create then. You can also get the lat/lng position of the markers when certain events fire: the 'dragend' event, for instance.
With these tools, you have the basics of your requirements here. Make a button that places vertexes on the map - just use a marker with custom graphics - and let the user drag the vertex to whatever position they need. Record the new position of the vertex whenever the dragend event fires. Draw lines on the map between the markers, to show to the user the area selected. Have a button to 'complete' the shape, linking the last vertex up with the first vertex.
There may be some existing code to do this, but I am not aware of it. However, it should be possible to throw something together with a bit of work.
I have a map with about hundred location points (markers). Which are grouped with ClusterMarker http://googlemapsapi.martinpearman.co.uk/clustermarker
And then there's one "main" marker, which is draggable.
If main marker location is overlapping with other marker then it becomes undraggable. Or in another words: clicking takes action on marker which is behind the main marker.
Weird, because I'm setting zIndexProcess when creating the main marker, which brings it to the front of others (by default it's not like that).
So.. I don't know what's the problem and how to ask but I would try like this: How to get clickable area to the front if I have brought to the front main marker icon already? (at least it is visible on top of others)
P.S. I have GPolygon drawn on the base of main marker (radius, a circle) and this circle is drawn behind all markers. Don't know if this is relevant. Oh, and I can't bring this polygon to the front (seems like zIndexProcess does not work on this)
I had a similar situation and what you can do is pass the event through to another object. In my example here if the condition is met then I pass the event (by triggering it) on the map itself. You could do a similar check to see if the event point is inside a visible polygon (I won't put that code here as it should be relatively easily doable) and pass the click event onto the polygon.
Here is the code (lightly modified) that I use:
google.maps.event.addListener(this.intLineObj ,"click", function(latlng) {
if (<condition>)
{
//pass the event down to the map
google.maps.event.trigger(map, "click", latlng);
} else {
//do stuff
}
});
I hope that helps.
I have a web application that needs to display 30,000 markers on a map at the same time. I don't want to use any kind of clustering. I need them to all be displayed.
I also need them to be clickable. The user can click on each point and a popup will come up with information about that point. Even at a low zoom level when there are thousands of markers in a single 256x256 square, the user needs to be able to click on them. It may be cumbersome for the user to click on a point thats bunched up with hundreds of other points, but if there happens to be one marker in the middle of nowhere, I want the user to be able to click on it right there instead of having to zoom in.
How do I do this? I know it's possible because I watched a video on google video where this guy creates a GTileLayerOverlay app that had clickable markers. He didn't explain how it was done though.
Is my only option to just remove the GTileLayerOverlay at high zoom levels and replace it with a true GMarker layer? I really don't want to do that. It seems over engineering to me.
If you were me, how would you go about this?
I found this example is in the Google Maps API Demo Gallery:
Clickable Tile Layer
This example creates a custom map type (GMapType) that shows regional borders and squares for county centers. When the squares are clicked, an info window opens with information about that county. The clickability is accomplished by passing in information about clickable pixel bounds in the cookies attached to the tiles, and doing a client-side check on mouseover for whether the mouse position was within the pixel bounds.
Here's some commentary on his method.
I don't have any experience with GTileLayOverlays, but I believe it is possible to accomplish what you're trying to do without using GMarkers.
Would it be possible to utilize clustering if each cluster could bring up a list of the markers it represents? It seems like having 30,000 markers visible at once would be visually confusing and difficult to navigate .