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)
Related
I embed a Google Maps view on my website, but the point is always centered. However, I want to move the point a bit to the left.
I already tried adding &ll to the end of the url, but this doesn't seem to work.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.3898312892516!2d-122.39498068385242!3d37.78090297975824!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808580787b995e7f%3A0x573dcb3f41440563!2sDropbox!5e0!3m2!1snl!2sbe!4v1565976484287!5m2!1snl!2sbe" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
So the cursor with 'Dropbox' is centralized, but I would need it to be on the left side of the map (while still having the pointer on Dropbox). How can I do this?
Got the embed iframe code from Google Maps. Searched the location, clicked 'share' in the left side panel and chose 'embed'.
It doesn't look like you can customize the output of the default Google Maps "share" output. I tried adjusting the map before getting the "Embed a Map" code, it doesn't modify it.
An option would be the Embed API, that has an optional center parameter that lets you adjust the center of the map.
Using the "Place mode" with the optional "center" parameter:
q=Dropbox,333+Brannan+St,+San+Francisco,+CA+94107¢er=37.7810556,-122.389
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Dropbox,333+Brannan+St,+San+Francisco,+CA+94107¢er=37.7810556,-122.389" allowfullscreen>
</iframe>
gives me:
live example
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'm embedding google maps to my website.
This link is what my website map looks like.
https://gyazo.com/fda645cc29b78ce791d90c878648b180
This is what I want my website to look like.
https://gyazo.com/2093195fd87a6e208c7d4d4510f02e81
This is what I have tried so far:
(Note: this is all html, no javascript)
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/directions?key=(APIKEY)&origin=Oslo+Norway&destination=Telemark+Norway&avoid=tolls|highways"allowfullscreen>
But I want something bit different. Basically, what I want is for users to have the option to put in where they are and where they are going.I don't want to have a preset option like the API directions gives me. Any help would be appreciated!
You can't use the Embed API to do that (origin and destination are required parameters in directions mode).
However you can go to http://maps.google.com, set up the map the way you want (with no origin or destination), then click on the "hamburger" menu, click on share or embed map, then the embed map tab and get an <iframe> URL that loads a map that looks like you want.
Example
From this URL:
https://www.google.com/maps/dir///#59.8937805,10.6450363,11z
Following that process yields this iframe code:
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d128083.93009419793!2d10.645036343724943!3d59.89378054345609!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m3!3e6!4m0!4m0!5e0!3m2!1sen!2sus!4v1471120225355"
width="100%"
height="450"
frameborder="0"
style="border:0" allowfullscreen></iframe>
live URL:
http://www.geocodezip.com/example_embedded_map_directions_SO_empty.html
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 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.