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/
Related
The question posted below
how to rotate a google map in a web application
can be use to rotate the map by rotating the div which contains the map
but if i do scroll or drag on the map the map is working in unpredictably way is there a way to retain those functionalities as it is
Note: i am rotating the map using div because the aerial tiles are not available at that location.
Please say whether this can be done with some other map api are how to go about it in google map API
It is difficult to answer with certainty unless you post a more complete answer, but I believe your issue is with the corrodinate system.
You are rotating the display of the map, but the x,y coordinates of your mouse are not. When you drag the mouse, the javascript is capturing the mouse movement relative to the screen and then you are rotating the output by 45 degrees. In other words, google maps has no idea that you have rotated it. It would be the same output if you just turned your monitor 90degrees, the mouse is still going to send the same x,y coordinates.
In order to do what I think you want you would need to take over the code handling the movement or accomplish it another way. You will notice that the dragging is disabled on the example you referenced.
This might be a place to start looking for getting the center of the map on mouse events:
https://developers.google.com/maps/documentation/javascript/3.exp/reference#MouseEvent
You might be able to get the current coordinates and "transform" the new coordiantes by looking at this example of getting pixels:
https://developers.google.com/maps/documentation/javascript/examples/map-coordinates
Here is a page explaining some things about transforming coordinate systems:
http://www.continuummechanics.org/cm/coordxforms.html
If this is something that you really have to do, it can probably be done, but it is likely a lot more trouble to get right than it is worth for an average map embed. It might also add a lot of processing that will make the interaction pretty laggy.
After saying all that, I'd still love to see an example of this working so if you do make it work please post some code.
I am doing some research for what Map API to use for a coming project.
The main requirement is the ability to lock a map, and the ability to disable parts of the map.
Think about a special purpose map for Europe where I would like to disable and gray out the non-european countries.
A click on those grayed out areas should do nothing, meaning for all of the world except for Europe.
So, is it possible to disable large portions of the map?
Is it possible to add layers for the borders for each country, that is clickable, for instance on Germany?
I am looking at Bing or Google Maps at this point. Which one is more developer friendly one?
Bing looks so much nicer with the birds eye, much easier to read out the map and know what you are looking at. I find Googles full of clutter and always have problem knowing what I am looking at.
Possible approach(google-Maps): use a Polygon with multiple paths.
1 path for the entire world(vertices defined in clockwise order)
other paths for the enabled area(vertices defined in opposite clockwise order)
The result will be a polygon that covers the entire world with a hole for the enabled area. The map will not respond to click-events outside the enabled area(because it's covered by the polygon). The map will still respond to dblclick and zoom in, but this may be avoided by cancelling the propagation of the dblclick-event of the polygon.
It wouldn't be possible to gray out the dissabled area, but you could use the fillColor of the polygon to signalize which part of the map is disabled.
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 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 .
I am using the Google Maps API to code a campus map for my university. On the main map, when it is being viewed in the "Map" maptype, there is a custom overlay of the campus, which is set (by using GEvent.addDomListener) to be removed when the map is viewed in Satellite or Hybrid mode. When the user gets directions, through my map, to and from the campus, a polyline and 2 markers show up, like normal. When the marker is clicked, a small popup map is display, focused on the area of campus around that particular marker.
I was wondering if anyone knew of a way to set attributes of these mini-popup-maps. I need to extend the event listener to make sure that the overlay gets taken off when the mini map is clicked out of "Map" mode. I also need to be able to set the zoom level for these maps.
Any ideas?
(code can be provided as needed, wasn't really sure what parts would be needed and didn't want to post the whole f'n thing up here.)
Doesn't look like there are any built in options to modify the infoWindow you get from the GDirection markers, but you can explicitly replace the markers once you get them back.
This post describes the process.