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
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.
My web application constructs a URL to go to Google Maps based on the lat and long of a place. Works great, however, the pin does not show up on the map of the location. For example, if I have this URL: https://www.google.com/maps/#39.0522772,-94.3865605,17z
Is there a specific parameter I need to pass in order for Google to show the pin?
There is a list of query params here but it doesn't include showing a pin.
You can do this a couple of ways
Using preview
https://www.google.com/maps/preview?q=39.0522772,-94.3865605
Creating directions to and from the same place
https://www.google.com/maps/dir/39.0522772,-94.3865605/39.0522772,-94.3865605/#39.052269,-94.3885508,17z
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.
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.
how do get different link of "send to friend", "print map", and "get direction" link in the marker info box related to that marker.
Is there any API for that to get this type links.??
Thanks in advance.
There is nothing explicit in the Google Maps API that will show the maps.google.com InfoWindow , you will have to build that functionality into your own GInfoWindow. For the functionality you describe, you could do the following:
send to friend - Some server side code to email your site URl to a user specified email address?
print map - Link to a cut down page that displays a Google Static Maps image (for the equivalent location). The various browsers will do a better, more predictable job of printing an image than they will a Google Map DIV.
get direction - You can use the GDirections object to GeoCode to addresses and display the driving directions between those two points (on the map and with instructions).