I am manually using Google Maps to create a Map, via an address, to get the embedded code to place on my Website. Is there a mechanism to bulk load addresses and get the embedded code out? I have thousands of addresses to convert to maps.
An example Address is:
428 E 4th St Charlotte, NC 28202
The embedded code from Google Maps (Enter address an using left tool menu, select share or embed map) looks like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3259.3378065507304!2d-80.84061599999997!3d35.22296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8856a02661c6b995%3A0xe460e1d558cda162!2s428+E+4th+St%2C+Charlotte%2C+NC+28202!5e0!3m2!1sen!2sus!4v1440885560942" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Use the Embed API
You can pass in your address as one of the parameters of the URL.
Example (address is URL encoded):
<iframe width="100%" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=428%20E%204th%20St%20Charlotte%2C%20NC%2028202&key=<your KEY>" allowfullscreen></iframe>
working example
Related
I am new in django and I am trying to create a web app for bycicle roads in a specific city.Till now I have managed to add a Map of the city in my project.Bellow a piece of the HTML:
'''
<iframe
width="100%"
height="100%"
frameborder="0" style="border:0"
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyB50AmUn73pxdoVuVhRAkjAjnhGjLp7ymM&q=streets+in+Sofia"
allowfullscreen>
</iframe>
'''
The question is following:
I have the Directions button on the map but it redirects to google.maps. I want to make the directions(Start and Endpoint) to appear right over the map(on the same page). Is this possible and how can I do this ?
Thank you!
I want the users of my webpage to be able to see an embedded google map with directions from their location to my address.
The following link correctly gets a users location and get the directions to London Bridge.
www.google.co.uk/maps?saddr=my%20location&daddr=london%20bridge
If I use google to get an embed link for that page the start address becomes static. So the embedded map wouldn't get the users location it would just use mine from when I created it.
Swapping the embed source from google with the above link results in a "could not be found" error.
<iframe src="https://www.google.co.uk/maps?saddr=my+location&daddr=london+bridge" width="600" height="450" style="border: 0;" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m26!1m12!1m3!1d158597.88842955438!2d-0.5380009862678417!3d51.60320274241831!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m11!3e6!4m3!3m2!1d51.704112699999996!2d-0.7091171!4m5!1s0x4876035159bb13c5%3A0xa61e28267c3563ac!2sLondon+Bridge%2C+London+SE1+9DD!3m2!1d51.5078788!2d-0.0877321!5e0!3m2!1sen!2suk!4v1485450192422" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Attempting to modify the embed code from google also results in a blank world google map.
<iframe src="https://www.google.com/maps/embed?saddr=my%20location&daddr=london%20bridge" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Trying to change the zoom level of the map returned below. I am using it as a link in excel. Have looked around and thought this should work as I change the z=1 to z=2, etc.
http://maps.google.com/maps?z=1&t=h&q=2517 MCDEARMON ST,SACHSE,TX,75408
That is with the "old" google maps, it was never documented and no longer works. If you want a URL for an embedded google map, use the Embed API, it has a documented zoom parameter.
example 2 embedded maps, just changing the zoom parameter in the URL
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=2517+MCDEARMON+ST,SACHSE,TX,75408&zoom=10&key=API_key" allowfullscreen></iframe>
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=2517+MCDEARMON+ST,SACHSE,TX,75408&zoom=1&key=API_key" allowfullscreen></iframe><script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
The embed urls produced by the new version of google maps look like this:
https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x47b161837e1813b9%3A0x4263df27bd63aa0!2sHamburg%2C+Germany!5e0!3m2!1sen!2s!4v1385644179838
How can I construct such a url programmatically given an address or latitude and longitude?
I wonder if this is the new version or not:
https://developers.google.com/maps/documentation/embed/guide
Address: Add a value following "q=" parameter (The Google Maps Embed API supports both + and %20 when escaping spaces.)
Latitude and longitude: "center=" parameter is for latitude and longitude, but you would
also want to set "zoom=" level in order to present in the way how
you want it to be displayed to users
<iframe src="http://maps.google.com/maps?q=pizza+pizza+oshawa&z=10&output=embed" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
The magic here is &output=embed.
This is an example using 2 parameters. Replace pizza+pizza+oshawa with an url-encoded address and 10 with zoom level you want.
As suggested by kjdion84, the following works perfectly:
<iframe src="http://maps.google.com/maps?q='.$geolat.','.$geolng.'&t=k&z=16&output=embed" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
How do I display map locations on load from my database using google maps?
Let's say I have 3 addresses from my database:
1685 Centennial Way Corona California Riverside County 92882
25492 Centennial Way Corona California Riverside County 92882
1596 Centennial Way Corona California Riverside County 92882
They all have different pages, but I want them to load the location in an iframe of google maps when the user clicks the page. Is there any code that can help me to achieve that without manually embedding the iframe code from google maps website?
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1685+Centennial+Way+Corona+California+Riverside+County+92882&aq=&sll=37.0625,-95.677068&sspn=42.089199,86.044922&ie=UTF8&hq=&hnear=1685+Centennial+Way,+Corona,+Riverside,+California+92882&t=m&z=14&ll=33.858119,-117.598538&output=embed"></iframe><br /><small>View Larger Map</small>
Generate all these values from my website to eliminate the need to manually get the code from google maps.
In Google Maps, there is a Link button (looks like a chain) which gives you the HTML for an iframe with your searched location.
For example, for your first example, it is as follows (line breaks inserted for readability):
<iframe width="425" height="350" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="https://maps.google.com/maps?
f=q&source=s_q&hl=en&geocode=&
q=1685+Centennial+Way+Corona+California+Riverside+County+92882&
aq=&sll=37.0625,-95.677068&sspn=53.87374,114.082031&
ie=UTF8&hq=&hnear=1685+Centennial+Way,+Corona,+Riverside,+California+92882&
t=m&z=14&ll=33.858119,-117.598538&output=embed">
</iframe>
The GPS data is unnecessary here, so you can make it:
<iframe width="425" height="350" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="https://maps.google.com/maps?
f=q&source=s_q&hl=en&geocode=&
q=1685+Centennial+Way+Corona+California+Riverside+County+92882&
ie=UTF8&hnear=1685+Centennial+Way,+Corona,+Riverside,+California+92882&
t=m&output=embed">
</iframe>
The link version, if necessary, is the same, except without escaped &s (&):
https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1685+Centennial+Way+Corona+California+Riverside+County+92882&aq=&ie=UTF8&hq=&hnear=1685+Centennial+Way,+Corona,+Riverside,+California+92882
You can then replace the address component with the relevant one (and properly URL-encode it) with your choice of scripting language.