CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
HerrimanCoder
HerrimanCoder

Reputation: 7226

How to hide points of interest in google maps and detect clicked coords

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:

Thanks!

Upvotes: 0

Views: 395

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

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/

Upvotes: 2

Related Questions