Currently, on a web application I am working on, one of our clients asked for a feature I am not quite sure how to implement. We have a Google Map on the main page and our client wants to be able to draw on that map for presentations. I have seen two examples of what our client wants. The first example is at http://www.scribblemaps.com/ where I can draw lines, shapes, and in the Pro version "block arrows" which is what our client is asking for. However, this application only allows you to create the map on their site and then save it as a JPEG. Our client wants to do this within our application. Scribble Maps accomplishes this by using Adobe Flash and I'm guessing they place a Google Map in the background which I am not sure would be the best route for us.
I also found this blog http://googlegeodevelopers.blogspot.com/2011/11/make-your-map-interactive-with-shape.html describing User Editable Shapes. On this example I am able to create shapes and Adjust the size post creation. I was wondering if it were possible to create a custom polygon like a block arrow as another button on the map where the user could add that shape to the map and edit the size? I realize the user could use the custom polygon button but I know our client won't want to draw their own arrow each time.
* EDIT *
So that I am clear I am not asking anyone to write any code for me but point in the direction of information. I want to know if it is possible to pre-create polygon shapes like "block arrows" so that our client can click and drag to draw this arrow on the map like circles or rectangles using just the Google Maps API.
I had vary similar tasks to perform in my project.
You can let them draw shapes on the map. In my project I have let he user draw there shape by clicking on map and adding a marker on each click and when he clicks on the existing marker all the makers form a closed polygon. Then you can save it to database. As far as that editing part you mentioned above, you can set editable property of polygon to true to let them play with polygon.
Hope this helps you in your project.
Happy Coding !! Good Luck
Maybe a late answer but I think this one would be useful for you.
https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes
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'm trying to integrate my own markers as pointers on my map. The defaults of circle, rectangle diamond etc... are not what I need and I'm looking for arrow symbols instead. Ideally the popular Microsoft wingdings arrows. I'm surprised simple arrows are not on the default list, I'd thought there would be many a need to indicate a rise or fall with any numeric data on a map.
I would like to solve this with an expression to force an arrow icon as a marker, can this be done by using it's character code etc..? I'm using SSDT to design the report.
Alternatively I'll just have to do this in paint and upload via the image import.
Food For Thought
I see they've done a great job in making the map process easy to set up, but when it comes to customisation from the norm it is extremely difficult.
TechNet: Understanding Marker type Rules:
http://technet.microsoft.com/en-us/library/ee240825.aspx
As you can see from the link (Which is one example as not to swarm this post with links) Microsoft make no mention of image upload or Expression input for maps. This I find is one example, the maps are great, but I feel it's difficult to get documented resources to further customise my report.
You'll need to use an image of an arrow for your custom marker, and you will still be able to change other attributes of it (size, transparency, etc).
If you use a custom image marker, you may run into problems where Visual Studio fails to render the map in design mode from time to time - it's incredibly annoying, so I find it best to drop in the custom images as the very last thing I do when building a map (just use a circle marker or something in the interim).
I know this will be a complex solution. I would appreciate it if you could push me in the right direction.
Please have a look at http://www.rightmove.co.uk/draw-a-search.html. I am interested in finding out how this is possible. what steps do I have to take to achieve this?
There's quite a few things going on here.
You need to have event listeners for when the user clicks on the map.
You need to place markers where they click.
You need to draw two types of polylines; the static type connecting two markers, and the dynamic dotted line as they move the cursor or drag a marker.
When you've closed up the polygon, you need to make your search only return properties inside that shape (although they're actually doing it within X miles radius from that shape).
They're also inserting markers half-way along the lines that you can drag - this will require the geographical library, using the interpolate function.
I'd like to create / use a UI element for a web-site that provides a world map, on which the user can draw a circle to indicate an area of interest. I'd like information on the coordinates of the area covered by the circle to be available to me via Javascript for sending back to the server over Ajax.
Does such a control exist, and if not how difficult would this be to implement using something like Google Maps?
Google would have that as part of it's api as would OpenLayers
maybe Artem GoogleMap can help you.
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 .