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
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
Currently I use the Google Maps API to generate a map with a marker (given a lat/long set of coordinates) to a given location. In AMP HTML, it appears the way to do this currently is using the amp-iframe extension https://github.com/ampproject/amphtml/tree/master/extensions. The issue is you cannot use Google Maps embed code with coordinates unless you are using a 'view' map. I don't have a Place ID, so I cannot use the Place mode. I can't use 'View' mode, since that has no markers. I've looked high and low at https://developers.google.com/maps/documentation/embed/guide#overview
What is the proper way to include a Google Map on an AMP HTML page that has a marker placed on it? I don't see any existing questions about this on the forum or in Github issues, so I'm curious if anyone else has run into this same scenario.
The trick is to not use the "view" mode, but rather the "place" mode. With the place mode, you don't need a place ID, you can simply use coordinates. As an example:
<amp-iframe
width="600"
height="400"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
frameborder="0"
src="https://www.google.com/maps/embed/v1/place?key=<key>&q=44.0,122.0">
</amp-iframe>
As an additional note, if you are using this with AMP, I recommend you include a placeholder image in case the iframe is too close to the top of the page (an AMP rule). In that case, I might use an <amp-img>, like so:
<amp-img
src="https://maps.googleapis.com/maps/api/staticmap?key=<key>¢er=44.0,122.0&zoom=15&size=600x400"
width="600"
height="400"
layout="responsive"
placeholder
/>
within the iframe, so that it has the following format:
<amp-iframe ... >
<amp-img .../>
</amp-iframe>
I found this code on their GitHub Repository https://github.com/ampproject/amp-by-example/blob/master/src/20_Components/amp-iframe.html#L72-L84
<amp-iframe width="600"
height="400"
title="Google map pin on Googleplex, Mountain View CA"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
frameborder="0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6j4ARbn5u_wAGqWA&key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848">
Embedding a page in an amp-frame requires:
Additional Javascript (<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>)
Placement at least 600px from the top of the amp page.
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 have added an embedded map in a html page. code for it is as bellow
<iframe width="100%" height="300" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=q&source=s_q&hl=en&geocode=+&q=anaveer+info+media&ie=UTF8&hq=anaveer+info+media&hnear=Ahmedabad,+Gujarat&ll=23.036523,72.560641&spn=0.011078,0.021136&t=m&z=19&iwloc=A&cid=8621019355742313992&output=embed" align="middle"></iframe><br />
I have one problem that this map is not getting zoom in and out on mouse scroll. can any one have solution for that
You are using the Static Maps API which if I'm not mistaken does not have the zoom functionality you seek. If you want to enable mouse zoom, you should use the Google Maps Javascript API v3
I am using the link iframe code, directly from the google maps site, but the map when rendered on the page is very different. It is too close and it lacks the custom objects I have placed on the map.
The map is saved and public.
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&
amp;msid=105969386264938156859.0004933a7b5534e8bb519&ll=51.442667,-2.076416&
amp;spn=0.032099,0.051327&z=13&output=embed"></iframe><br /><small>View
<a href="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&
amp;msid=105969386264938156859.0004933a7b5534e8bb519&ll=51.442667,-2.076416&
amp;spn=0.032099,0.051327&z=13&source=embed" style="color:#0000FF;
text-align:left">Fitzgraham Academy of Dance</a> in a larger map</small>
The embedded maps are shaky at best, I recommend you look into Google Maps API and program a perfect map for yourself
I suggest you look at this link. It allows you to control the content a lot better. If you have any issues look at the source code on the Samples.