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>
Related
I am using google map iframe embedded at my site and the code is
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1085.7167751755183!2d90.3674116098519!3d23.750896076109!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755bf51d563ecbb%3A0x1c5247613aecf1e8!2zS2lkcyAmIE1vbXMg4KaV4Ka_4Kah4Ka4IOCmj-CmqOCnjeCmoSDgpq7gpq4!5e0!3m2!1sen!2sbd!4v1493197219814&output=embed&iwloc=near" width="800" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
I want to remove address box from it and for that I have followed a solution
How to remove box from new Google Maps embeds? rawnewdlz solution. But the solution also removes the marker pointer. I need to keep that.
Please need help!
I have noticed a pattern just a few characters had to be removed.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.9916256937586!2d2.2922926160647448!3d48.858370079287475!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!3m2!1sen!2sin!4v1493209164303" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
I have removed the following portion: 1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sEiffel+Tower!5e0!
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">
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
Following is a code of my iframe kindly let me know is it possible to remove all the controls like removing selecting map type, direction control from following:
<iframe width="80%" height="150" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&msid=214928275585170600122.0004d0fda61d060c1d69e&iwloc=&output=embed"></iframe>
You cannot remove the map type controls when using the embed (iframe) method.
You could try developing your map using the Maps API javascript API that allows more granular control over the look and feel of your map.