hi i wanted to display a us state on google map with borders drawn,
when the user opens up a page i wanted to show in the center that state...with borders drawn.
additionally i wanted to put a button on that page so that user clicks it and draws a rectangle on the state, the system will just have to popup the latitude and longitude of the selected area, and area ...
can you anyone guide me through the steps? or is there any good reference that i could follow. thanks in advance!
as an example of what i mean
http://opentopo.sdsc.edu/gridsphere/gridsphere?gs_action=lidarNSAF&cid=geonlidarframeportlet
I would start in the Google AJAX APIs playground, here: http://code.google.com/apis/ajax/playground/#map_simple
There are tons of samples here and by playing with them you should get an idea of how to do what you want and/or come up with some more specific questions.
Related
Why doesn't google map z (zoom) parameter work inside the url?
I' ve searched over so I got few solutions for sending zoom parameter in google map url but based on the old posts (stackoverflow) which deal with the zoom level within the url it seems that this functionalities do not work anymore.
I've used the following z parameter but it's not working:
http://maps.google.com/?q=38.6531004,-90.243462&z=12
Below is the link where they have mentioned z parameter for zoom level
link
For those who do not want to read,
this works (z range:[1-20]):
https://maps.google.com/?q=38.6531004,-90.243462&ll=38.6531004,-90.243462&z=3
There is no documentation that covers this problem. However, there are few hacks.
The link that you have provided,
URL (stackoverflow):What parameters should I use in a Google Maps URL to go to a lat-lon?
Will not help you with getting the desired google maps zoom level inside a url
The following examples which have been working for quite a while DO NOT WORK anymore (they work but without getting the desired zoom level)
Examples:
http://maps.google.com/?q=38.6531004,-90.243462&z=3
http://maps.google.com/?q=38.6531004,-90.243462&zoom=3
http://maps.google.com/maps?q=Scottish+Rite+Hamilton+ON&loc:43.25911+-79.879494&z=15
Instead, you can get the zoom level easily by trying the following examples:
https://www.google.com/maps/#38.6531004,-90.243462,9z
https://maps.google.com/?ll=40.7060471,-74.0088901&z=3
(Note: after clicking on google maps you will get a gray marker which appears and quickly disappears)
However the above URL's will not give you a static pinpoint for the specified lat&long.
There is a "hack" on how to get a fixed pinpoint (red marker pin) and that is by giving the q attribute (represents the search query) and the II attribute(latitude and longitude of the map centre point) along with the z (zoom attribute)
Example (with the OP coordinates):
https://maps.google.com/?q=38.6531004,-90.243462&ll=38.6531004,-90.243462&z=3
If you want to change the zoom level just change the value of 'z'.
After searching the web I found that only this website:
https://moz.com/blog/new-google-maps-url-parameters
deals with google maps parameters/attributes/arguments, where things actually still work. If anyone want's more functionalities within the url, then this is the site to check.
Zoom intervals explained (https://developers.google.com/maps/documentation/static-maps/intro#Zoomlevels):
The following list shows the approximate level of detail you can
expect to see at each zoom level:
1: World
5: Landmass/continent
10: City
15: Streets
20: Buildings
This works as of 5 Aug 2018
http://www.google.com/maps/place/<lat>,<lng>/#<lat>,<lng>,<zoom>z
For example
http://www.google.com/maps/place/49.46800006494457,17.11514008755796/#49.46800006494457,17.11514008755796,7z
As of 04/2020 ...."because google is always changing and evolving"
In complement to Eugen Sunic comments above, and an alternative update to the Solution.
When Logged in to google and getting map data from the google generator, it is not the same as copying the URL from the browser window (which my may be manipulated to load different zooms trough the various alterations, html, Css and script tricks).
But in the below, keep in mind that Your address info may need to be part of the google array of database, eg you have some address map info linked to your account, images, business name, etc. or not... maybe just typed in for a quick map search with a pin-point... the later I don't know.
Also the below is not some Google API pay per 1k clicks thing, which is more geared to the commercial development end of google tracking heat maps, etc. So if you just need a simple solution and certain zoom and marker to work..then you might try the below.
When logged in too your Google account (maybe not) and showing your location marker on the map screen...
Choose the zoom detail of the map you want to appear in your web page. eg Whole US, State views, City, Street (by clicking the + or - zoom feature).
Then go to the hamburger menu to the left, and look down the list for "Share or Embed Map" and the popup window should load the same zoom level of the map! Do not try to change the zoom in the popup window feature, it wont work to change the link code but will change the pop up windows zoom of the map. In short, the embedded link code is preset and will not change in the popup.
Above this popup window of the map there will be two options at the top (Share and Embed) button/link selections.
Click on the Embed link/button and it should generate the code for the zoom you previously chose.
Lastly, copy the code, paste it into your web page and TEST!
As far as I can tell, There is no altering this code as the others suggested above, changing(z=3, 9z, etc) as the code is entirely different. But it will allow you to get the zoom you need "if the google code generator or procedure does not change".
But the zoom level was altered and good enough for me when I figured the process out. Changing it to other zooms is another can of code.
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/
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
In some websites (example: http://www.dubizzle.com/) I have seen an excellent Google Map feature which allows the user to select a neighborhood/region from a dropdown and the Google map shown just below the drop downwill zoom to that area and highlighted the region using a polygon.. Can anyone please tell me how to achieve this functionality.. The screen shot of this is given below
Thanks
Anz
They are likely using a polyline overlay (example), or a KML layer (example).
Could you provide a link to the page that you grabbed the screenshot from?
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 .