Google Maps API zooming too far out on load - google-maps

I can not for the life of me figure out why when I copy and paste the maps API embed code from the google site, that's supposed to be setup to show a location, that it zooms out to show multiple maps of the globe. If anyone can help me out that'd be great.
I am looking more specifically for a style or something thats small to set the load up zoom?
Any help is greatly appreciated
Please note that the ADDRESS and KEY are indeed valid, I just dont want to post that info on the site.
html:
<iframe width="100%" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=ADDRESS&key=KEY"></iframe>

Suggestion: Use the embedded map creation wizard.
When I used q=77+Mass+Ave,+Cambridge+MA and my key, I got the same behavior you describe. When I used the Autocomplete in the embedded map creation wizard, it gave me:
q=77%20Mass%20Ave%20-%20MIT%2C%20Cambridge%2C%20MA%2C%20United%20States
(q=77+Mass+Ave+-+MIT%2C+Cambridge%2C+MA%2C%+United+States)
which works as expected

Related

Will this specific method of dynamically embedding Google Maps without API key work for 1000s of page views?

With the 2018 changes in Google Maps pricing, we can't afford to use it as we have done so far. We're considering moving to another provider, but also discovered a working way to embed a map without providing an API key:
<div style="width: 100%">
<iframe width="100%" height="600"
src="https://maps.google.com/maps?output=embed&width=100%&height=600&hl=en&q=1600%20Pennsylvania%20Ave%20NW%2C%20Washington%2C%20DC%2020006%2C%20USA+(Example%20Address)&ie=UTF8&t=&z=16&iwloc=B"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
Notes:
We have thousands of page views, daily, for different addresses.
We couldn't find this way of displaying a map documented by Google.
Other ways to load a map in an iframe didn't seem to work without an API key. (Exception: URLs generated by clicking 'Share' on Google Maps, of the form <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!...other params that only Google knows how to generate here...></iframe> - obviously we can't do this by hand.)
Our questions:
Why did Google leave this method of freely embedding dynamic Google Maps without an API key?
Is there a request limit (e.g. 100 per day) to this?
Is there some documentation somewhere on this?
The iframe in your example was generated using the consumer application on maps.google.com. Please note that web site maps.google.com is not related to Google Maps APIs. These are different products managed by different teams at Google.
As you generated an iframe on maps.google.com and it doesn't use API you don't need any API key.
This feature of the Google Maps web site is documented on
https://support.google.com/maps/answer/144361
As far as I know there is no daily limit for these kind of iframes.
I hope this helps!

Google Maps Error. API? ReferenceError: Can't find variable: google

I am encountering some issues with the google maps component of a site.
I understand there has been recent changes to the use of maps and have generated an API key to use on the site.
The map is displaying fine on the idex.html page but displays error..
ReferenceError: Can't find variable: google
on the other two pages?
I am really in out of my depth with these type of things and appreciate any support that may be offered. The site is live at maverickonthebay.com.au
I check the page(url),
I guess you need to remove the defer attribute from the google-maps-api load script tag.
Because the code is minify, is hard to check whats wrong and why.

Advice Needed -- Converting to IFRAME google apps Script

I am stuck on converting my web app to IFRAME. I have stripped the code back as much as i can and the script itself works to a point.
The issue i am having is when it was running in NATIVE, it would return some html once complete, now it gets to that point and just sits there although it has done everything correctly to that point.
I am new to this and not sure if i should post code or a link to the web app but any help would be gratefully received.
Link to web app
https://docs.google.com/spreadsheets/d/1hXdgqwKAfbouV5CHo4wLJTpbP_d6TLIANlsU1Fvv0xk/edit?usp=sharing
You can create an iframe with the link in src attribute.
HTML
<iframe src="https://docs.google.com/spreadsheets/d/1hXdgqwKAfbouV5CHo4wLJTpbP_d6TLIANlsU1Fvv0xk/edit#gid=703430807">
</iframe>
This code can you include in your website. Let me know if this is what you want.
See this fiddle

Google customs maps iframe not working for public

I have created a custom Google map, and follow all instructions like share it to everyone (public) and try to embed on my website via iframe.
Here you can see the iframe:JSFiddle
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=z76-dWS2uqvM.kbKEneg2wOL0" width="640" height="480"></iframe>
It looks ok, when the user is logged-in into the Google account, but if you try to open it in Firefox (logged-out) it returns an empty iframe.
So, when I embed this on my website, people cannot see it. How to make this working, and how to display this multiple pin map to everyone who enters my website?
Unfortunately, this is an old issue which still shows up sometimes. But, try out the steps mentioned in this link. If that doesn't help either, give this a try. And if you're doing this by using the Maps API, this might help. Hopefully one of these helps.

Language parameter while embedding Google map in website

I am trying to embed Google map on my multi-lingual website. I want to translate entire google map interface depending on my current language. Entire interface not getting translated (links such as "Singin, Get Directions"). I facing this problem only after embedding the MAP CODE in the HTML and then looking at the MAP from within the web page.
Here are the steps that I followed
Get embed code by adding "?hl=ja" in url
Change search language to japan then get the embed code
Change browser default language
Set domain to google.co.jp
Please guide me to achieve this
Sample code
/***Starts here***/
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1619.1747385460585!2d139.7973569!3d35.7422141!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188e5cee002b37%3A0xe25ef9bf0ae8fb71!2sSenjuohashi+Station!5e0!3m2!1szh-CN!2s!4v1412779067090" width="600" height="450" frameborder="0" style="border:0"></iframe>
/***Ends here***/
Create your map using https://developers.google.com/maps/documentation/embed/start
Add your API key
Generate the iframe code
Add &language=ja to the iframe src
Hope this helps.