I can't seem to get my Google Maps Embed iframe to work correctly and am completely lost...
Sometimes the iframe will zoom into the correct query location "Hilton Boston Downtown 89 Broad St, Boston MA 02110" and other times it will be entirely zoomed out and show the globe. I assume it means that it wasn't able to correctly find the address, but I have no idea why... Can anyone help?
<iframe
width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=Hilton+Boston+Downtown/Faneuil+Hall,+89+Broad+St,+Boston,+MA+02110,+United+States&key=AIzaSyAJHvZiuT2J60Yw6qCULpYaUPo4v-uelUg">
</iframe>
Here's a JSFiddle with the iframe code: https://jsfiddle.net/zhxjn5q9/
I would say the embed api is currently broken for that address, using the wizard gives me the same result.
You might try replacing the +'s in the URL with %20's (or URL encoding the query string).
Some addresses do work (like "89 Broad St, Boston, MA 02110").
Related
am trying to add an iframe map at this location:
https://www.google.com/maps/place/32.2221546+35.2965266/#32.2221546,35.2965266,17z
like
<iframe src="https://www.google.com/maps/place/32.2221546+35.2965266/#32.2221546,35.2965266,17z"></iframe>
but I get an error, somebody can help me
The location code you typed is a google map format. You should use this code when you need to share directly.(for example on WhatsApp, an e-mail)
Try this instead. when you copied the location code to browser, you will see the sharing settings. There is information enough on that page.
I found out your location on this page and saw following code.
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3375.3346517032583!2d35.2965266!3d32.2221546!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x24759be185862de8!2zMzLCsDEzJzE5LjgiTiAzNcKwMTcnNDcuNSJF!5e0!3m2!1str!2str!4v1643914372999!5m2!1str!2str" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
explanation
I saw the following Google Maps code in a website:
href="https://www.google.com/maps/dir//Borsigstra%C3%9Fe+4,+30115+Hamburg,+Niemcy/#82.528634,43.3909246,17z/data=!4m13!1m4!3m3!1s0x47a851eed437e2b7:0x31501b0af0ac91b4!2sBornigstra%C3%9Fe+4!3b1!4m7!1m0!1m5!1m1!1s0x47a851eed437e2b7:0x31501b0af0ac91b4!2m2!1d13.3909246!2d52.528634"
I wanted to replace this with my own location.
When I go to Google Maps, search my address and get the sharable html code, I get
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2533.5747769945215!2d8.672258415914873!3d50.579269285955185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bc58ec0d5dbe19%3A0x3e2e9cd7b8a6d28a!2sBleichstra%C3%9Fe+34%2C+35390+Gie%C3%9Fen!5e0!3m2!1sde!2sde!4v1529588183346" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
What is the difference between these 2 formats, and how could I get my own address in the format of the first format?
The latter can only be used as an embedded element i.e. appearing in the page like an image.
The former is a shortcut to the directions 'mode' in google maps
Is this the link you wanted? https://www.google.com/maps/dir//50.5792659,8.6744471/#50.579266,8.674447,16z?hl=en-GB
I am using the google embed code like this:
<iframe width="1170" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=hereismykey4&q=Curtain+Street,EC2A+3AR&zoom=18" allowfullscreen>
This is working but the pointer isn't quite in the right place so I tried to set the address to be 134+Curtain+Street not just Curtain+street however when I add in the 134+ I get a view of the whole wold.
How do I get the proper address with a house number in?
Well, first you need to know that the map show in Google Maps Embed API is came from the Google Maps itself. So if you place an address in your embed request, make sure that the Google Maps supported it or let say available in it.
If you try to search 134 curtain street, you will get a response "We could not find 134 curtain street"
So you should use a valid address that the Google Maps provide you a valid a result.
So use this address "134 Curtain Rd, London EC2A 3AR" in your embed code to properly view the street that you want.
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=134+Curtain+Rd,+London+EC2A+3AR&zoom=18&maptype=roadmap" allowfullscreen>
</iframe>
Here is the sample that I create.
Test page located at http://hmcc1.com/Contact_TEST.htm
I have tried both place_id and the actual address. ll as described in another Q&A (Google Maps Embed displaying incorrect address on directions) returned an invalid parameter error.
Whether I use place_id or the address, when I click on Directions, the wrong address appears on the Directions page.
Here is the code in the test page:
<iframe width="500" height="640" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=3060+N+Kennicott+Ave,+Arlington+Heights,+IL+60004#42.132098,-87.994873&key=AIzaSyA42PChU9T0qV5kw-ikHHUv4yarQhFFo9U" allowfullscreen></iframe>
I would be grateful for any assistance. Thank you in advance.
I am going to leave the test page up in case someone comes up with a fix, or as #geocodezip said, maybe the API has a bug and will (someday) be fixed. For the live page, I ended up using the Directions mode instead. It is not exactly what I wanted, but at least it does not give the wrong address. And it does work nicely for mobile users.
I was able to use the code exactly as generated by the Google Maps Embed Quick Start page:
<iframe width="500" height="500" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?origin=Current%20Location&destination=place_id:ChIJJ2uA_ly7D4gRRDjYtPvR62U&mode=driving&key=AIzaSyA42PChU9T0qV5kw-ikHHUv4yarQhFFo9U" allowfullscreen></iframe>
Thanks so much to all who commented!
I am trying to embed a map into my html code.
This is the map I need:
https://maps.google.es/maps?source=s_d&f=d&saddr=Av.+Andalucia&daddr=Carretera+desconocida&geocode=FcrYKwIdw5ax_w%3BFQyxLAId-qaw_w&sll=36.427964,-5.138029&sspn=0.004333,0.009452&hl=es&mra=mift&mrsp=0&sz=17&ie=UTF8&t=m&ll=36.464367,-5.173187&spn=0.110444,0.171318&z=12&output=classic
However, clicking on the embed/link button provides me with the following iFrame:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps?source=s_d&f=d&saddr=Av.+Andaluc%C3%ADa&daddr=Carretera+desconocida&geocode=FcrYKwIdw5ax_w%3BFQyxLAId-qaw_w&sll=36.427964,-5.138029&sspn=0.004333,0.009452&hl=es&mra=mift&mrsp=0&sz=17&ie=UTF8&t=m&ll=36.464367,-5.173187&spn=0.110444,0.171318&output=embed"></iframe>
which pulls back the new version of Google Maps and destroys my original route.
Anyone knows a workaround for this?
Thanks
It's possible that the Geocoding of that location is messed up. Why not use the lat/long coordinates as the destination and see if that works out for you before get the Embed link?
Seems like your destination is at 36.483361, -5.200168 in that particular map.