i have a problem with Google maps iframe on my website
when i use iframe form Google maps website and put zoom not work
iframe src="https://mapsengine.google.com/map/embed?mid=zCqArMwLBI1M.kOBWLJlkdlWY&zoom=21" width="640" height="250"></iframe>
can any one help me
thanks
Use z= instead of zoom=
<iframe src="https://mapsengine.google.com/map/embed?mid=zCqArMwLBI1M.kOBWLJlkdlWY&z=15" width="640" height="250"></iframe>
The zoom level must be (1-20)
DEMO
Edit - 22nd April 2017
As per Connor William's comment
Google has updated its API use ZOOM instead Z=
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
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.
I want to remove a signin link from google map, the code which is displaying map is :
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3770.8179999384315!2d72.82549100000001!3d19.071738!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c97259c1c731%3A0xea3269aa63a17fc0!2sLe+Sutra!5e0!3m2!1sen!2sin!4v1414997099454" width="450" height="285" frameborder="0" style="border:0"></iframe>
Thanks in advance.
Doesn't look like you have control over that with the embed API. You can do it with the Google Maps Javascript API v3
Related question: How to hide the Sign in button from Google maps?
I am using Google Maps Embed API with place mode in an iframe. I am passing the zoom parameter but it's not working. However, when I click on "View larger map" the zoom level is used.
The embedded URL is
https://www.google.com/maps/embed/v1/place?key=AIzaSyAb9V7hKU334BfV4yLIOhcQyUu1ERkU_ZQ&q=44215+15th+St+W+Lancaster,CA+93534¢er=34.4503429,-117.923845&zoom=17
<html>
<body>
<iframe
width="450"
height="250"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAb9V7hKU334BfV4yLIOhcQyUu1ERkU_ZQ&q=44215+15th+St+W+Lancaster,CA+93534¢er=34.4503429,-117.923845&zoom=17">
</iframe>
</body>
</html>
It seems to be the center parameter that's causing this (although I'm unsure why as according to the Embed API the center parameter is supported by all 4 map modes
I changed the URL to https://www.google.com/maps/embed/v1/place?key=AIzaSyAb9V7hKU334BfV4yLIOhcQyUu1ERkU_ZQ&q=44215+15th+St+W+Lancaster,CA+93534&zoom=17 and it seems to work
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)