I've got an embedded google mymaps. It seems the zoom parameter doesn't work at all. I cannot find any useful information on google documentation.
Mymaps seem not to follow the standard iframe maps api.
<iframe src="https://www.google.com/maps/d/embed?mid=1gatxEY51NXkSRl461HgAxmk2bwI" width="640" height="480"></iframe>
EDIT:
Following Matej's accepted answer, I found a couple of useful links:
What parameters should I use in a Google Maps URL to go to a lat-lon?
https://moz.com/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters
And then modified my embed code like this, so I could add zooming (through 'z' param) and centering (through 'll' param):
<iframe src="https://www.google.com/maps/d/embed?mid=1gatxEY51NXkSRl461HgAxmk2bwI&z=5&ll=43.7695600,11.2558140" width="640" height="480"></iframe>
And by the way: I usually like to find my lat/lng position with this site:
http://mygeoposition.com/
Try add z=nn parameter to the url where nn is the zoom level.
This works for me:
<iframe src="https://www.google.com/maps/d/embed?mid=1gatxEY51NXkSRl461HgAxmk2bwI&z=10" width="640" height="480"></iframe>
Try add zoom=nn parameter to the url where nn is the zoom level.
This is how I solved the issue.
Related
The Google Maps Embed API for directions doesn't always show the origin and destination in the frame. Sometimes the default zoom level is zoomed-in too much.
<iframe
src="https://www.google.com/maps/embed/v1/directions?
origin=%2020858%20King%20Hezekiah%20Way%20%20Bend%20Oregon%20United%20States&
destination=1180%20SE%203rd%20Street%2C%20Bend%2C%20OR&
key=******************************"
width="281"
height="370">
</iframe>
(Whitespace added for readability.)
Almost solutions:
for JavaScript API version 3, using map.fitBounds(), https://stackoverflow.com/a/19304625/673991
for JavaScript API, using map.getBoundsZoomLevel(), https://stackoverflow.com/a/2362436/673991
with explicit zoom, https://stackoverflow.com/a/23300810/673991 (The explicit zoom parameter is not a general solution because it's impossible to know the correct value. In this example it would be zoom=14.)
Here's how it should look (e.g. with zoom=14 or - manual zoom-out):
Here is a live example.
Are there any solutions or workarounds within the Embed API? Is this a bug?
UPDATE in February 2018 this appears to have been fixed. That is, on the live example the Bad Map now looks the same as the workaround. Guess that's better than an answer or a mea culpa.
<div style="height: 400px">
<iframe width="100%" height="100%"
src="https://www.google.com/maps/embed/v1/directions?
origin=%2020858%20King%20Hezekiah%20Way%20%20Bend%20Oregon%20United%20States&
destination=1180%20SE%203rd%20Street%2C%20Bend%2C%20OR&
key=******************************" allowfullscreen>
</iframe>
</div>
you can try like this. Just set fixed width and height to div not to iframe
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.
i'm having a problem with new google maps embed.
As you can see in my print off my site, the maps embed is so far zoomed out.
How can i solve this problem ? I want to embed the map with a regular/normal zoom
I can't add image to this post because i don't have the necessary reputation.
Here's a link of my print: http://imageshack.com/a/img89/958/figs.jpg
Thanks guys!
You can add a zoom paramater to the src part of your html code. The lower the number the farther out you zoom. Zoom = 10 is a good place to start testing.
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=Space+Needle,Seattle+WA&zoom=10"></iframe>
You can find out more in Google's documentation on this page under "Optional Parameters".
https://developers.google.com/maps/documentation/embed/guide
Use <embed>[…]</embed> instead of <iframe>[…]</iframe>.
<embed src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3691.5217809275764!2d-48.55680935!3d-22.296098!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94c7580226334421%3A0xc3000e7281a1ebdb!2sRua+Louren%C3%A7o+Prado%2C+218+-+Centro!5e0!3m2!1spt-BR!2sbr!4v1394721710945%22; width="400" height="300" frameborder="0" style="border:0"></embed>
Source: https://productforums.google.com/d/msg/maps/kcjwmB5XFx8/qjR9DyAFPDwJ
All you do is in the url after your coordinates or place of interested you add &zoom=n (n being the zoom level)
I am attempting to embed a google map into a page of a website using google maps' iframe capabilities (so that I can avoid having to add things within the head and inside the body tag of the page)
When I create the iframe code, everything is fine except for the fact that the info window associated with the pin is opening by default when the page loads.
I'm wondering if anyone has successfully overridden this behavior. I've found a few posts describing how to do it for a geocoded address but not for a specific place of business (it seems the attributes are different)
Code:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=Madison+Square+Garden+New+York+NY&hl=en&cd=1&ei=PoNXS-hcmuLJBNfexZUI&sig2=dFymmpNhsjY6dEvjphBbPQ&sll=40.731053,-73.951703&sspn=0.127506,0.130247&ie=UTF8&view=map&cid=5487804314630162138&ved=0CCUQpQY&hq=Madison+Square+Garden+New+York+NY&hnear=&ll=40.750354,-73.992491&spn=0.006295,0.006295&iwloc=A&output=embed"></iframe>
(This is the suggestion I found on 'net that does not seem to work for a specific place of business: http://www.sugarwebdev.co.uk/blog/hide-or-remove-the-info-window-on-an-embedded-google-map/)
I tried the solution posted in your question, using the iframe code you provided and it worked fine. I added:
&iwloc=near
right after the 'output=embed' at the end.