All the "simple examples" of geocoding load a hard-coded long/lat pair and then, after the map is displayed, they load the arbitrary user-supplied address. Unfortunately for me, this means the hard-coded location always appears first and then the map shifts to the user-supplied address. What I'd like to find out is how to geocode an arbitrary address first, then initialize the map to the location in one step, so that when the map appears on the screen it is already showing the correct location.
I've been unable to deduce how this could be done from the API docs, however. All the examples show "new google.maps.Map()" being called prior to geocoding and it appears you have to already have a location to create the map, so it's impossible to geocode before displaying the map. On the other hand, it seems to me this would be the most common way to use a google map, so surely there's some way to do it?
Is this possible and does anyone have an example they could point to? Thanks!
If I understood you correctly, I created a simple page here
http://jsfiddle.net/4QGKq/1/
There's a hardcoded human readable address in the HTML ("Sardegna")
The geocoder figures out LatLng from Sardegna
Map is created and centered there.
To change the default map center, change the address in the Source HTML panel, not the textbox, then click on the blue "Run" button.
Related
I have a google map with a few markers already on it. When a user clicks a Get Directions button, I'd like a search box with the same functionality as the Google Map's. When users type an address/postcode in it, they get a "directions" button and if clicked on it will calculate and draw the distance between the address you typed in and the closest marker to it. I've had a very good look at the API, especially this page https://developers.google.com/maps/documentation/javascript/places but I couldn't find anything that matches exactly the google search box and its functionalities. Does anybody know if the above is doable?
You can use the Places Search Box as far as implementing something similar to Google Maps. However, from what you've said, rather than Places, you can probably get away with just an input box, unless you actually need Places data. If all you need is to get directions, you'll want to incorporate the Directions API. With the input box as the origin and the nearest marker as the destination, you can then calculate directions.
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 need a url that shows the pointer without directions. At the moment I am using the scheme below. it asks for my current location. I want it to just display the map and the pointer.
http://maps.google.com/maps?&daddr=51.55762,-0.282384(Hilton)
You should be using places, like below:
https://www.google.com/maps/place/51.55762,-0.282384+(Hilton)
I want to have customers be able to enter their address into a text box, press submit, and then display the results on my own page instead of it going directly to maps.google.com. I am not familiar with the Google Maps API, so I was wondering how I could go about doing this?
I know how to have customers enter their address and get directions (via this link: http://css-tricks.com/snippets/html/get-directions-form-google-maps/) but now I just need to know how to take those results and embed them into a page on my site.
Read this page to get started (an API key is optional)
https://developers.google.com/maps/documentation/javascript/tutorial
Then, you need a text field and a button, to convert (geocode) an address like 123 Main St. to latitude and longitude coordinates. You may have to validate and create fields like town and state because the geocoder might send the marker to the wrong place.
Read this page for the details, I think the example is enough:
https://developers.google.com/maps/documentation/javascript/geocoding
I need to get the specific address (or lat/long coordinates) of a place based on that place's name.
Specifically, I need to determine the location of supermarkets in a given area so that I can use those locations as 'markers' in my implementation of google maps static maps api.
Using the following, I can if you input a specific location in the area that currently says "INSERT_LOCATION_HERE", then you will get a google map of the specified area with markers at the locations.:
http://maps.google.com/maps/api/staticmap?center=Ithaca,%20NY&size=512x512&maptype=roadmap&markers=color:blue|label:S|INSERT_LOCATION_HERE&sensor=false
For example (the marker indicates the local Wegmans store based on its address:
http://maps.google.com/maps/api/staticmap?center=Ithaca,%20NY&size=512x512&maptype=roadmap&markers=color:blue|label:S|500%20So.%20Meadow%20Street&sensor=false
If anyone knows how to do this without using google maps places api, that would be extremely helpful!
If you want to get the name as a string intead of an image, you can do it with a little help for Google. That'll match nicely with the static map that you're using.
Let's say you want to search for "Den Haag"...
Construct a URL like this, and parse the result:
http://maps.google.com/maps/geo?q=den%20haag
You can also specify the output format:
http://maps.google.com/maps/geo?q=den%20haag&output=xml
http://maps.google.com/maps/geo?q=den%20haag&output=csv
http://maps.google.com/maps/geo?q=den%20haag&output=json
You can also provide coordinates instead of a name, and get a full name+coordinates in return:
http://maps.google.com/maps/geo?q=52.0467315,4.3796239&output=json
For some reason the links don't work when you click them from this page. I guess google doesn't accept a referrer in the request, so just copy and paste the links... That works.