I am trying to add google maps Embed API to my site. I keep getting this error:
"The Google Maps API server rejected your request. This IP, site or mobile application is not authorized to use this API key."
The API key is correct. I have Static Map turned on. Two of the most common trouble shots.
Code is formatted as follows:
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=XXXXXXXXXXXXXXXXXXXX&q=Space+Needle,Seattle+WA">
</iframe>
I put the < infront of iframe in my code. Any help would be great. Thanks!
Any one have any suggesions?
Static Maps and the Embed API are different things and controlled differently. Do what the message suggests (in its round about way) and turn on the Embed API in the Google API console.
Google Maps Embed API
Static Maps API
I found that the placeholder in Google's HTTP referrers inputs of <https (or) http>://*.example.com/* are misleading, because it suggests that the whole <https (or) http> thing is parsed as some actual "or" statement. In reality, it is not.
You must specify your protocol exactly, such as https://*.example.com. And, if you need support for both protocols, you must specify them as unique rows.
Hope that helps someone out there.
Related
I already registered my project with Google to get an API_KEY.
I already enable the Google MAP API in the API console. See here
I already set the referred to my JSFiddle Account.
[ http://jsfiddle.net/bheng/* ]
Here the link LINK
I am not sure why, it didn't load the map while it should.
What am I doing wrong ?
You are not including the Google Maps Javascript API. Note that you don't need a key (particularly for jsfiddle). Add this to the "External Resources":
https://maps.googleapis.com/maps/api/js
And add JQuery under "Frameworks & Extensions":
http://jsfiddle.net/9wc30ndf/2/
But you need to read the message also (you are missing the "q=")
http://jsfiddle.net/9wc30ndf/3/
You need to use *fiddle.jshell.net/bheng/* as the referrer expression for your browser-API-key since jsfiddle loads the JS sources from this domain (see referer request-header).
I am creating an app that uses google map. i inserted the map api key inside the html page.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api /js?key=AIzaSyDcvUkjiKRkJ2zV8cYElZy55JLZDjiL9g8&sensor=false"></script>
i keep getting error saying " Google has disabled use of the Maps API for this application. The provided key is not valid Google API key, or it is not authorized for google Maps Javascript API v3 on this site ". i just followed whatever they had mentioned in here
https://developers.google.com/maps/documentation/javascript/tutorial#api_key
i don't have any problem when run this code in my html. Only problem is that some of the map page don't render out properly. Which version is better to use V2 or V3 ?
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
i am kinda confused. Can someone help me out what i doing wrong or what do i need to do. Since my app is totally based google map. Thanks
I see two possibilities for you:
Either you use this line in your code <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=CHANGE_YOUR_KEY_HERE&sensor=false"></script> and you generate a new key for you application: https://developers.google.com/maps/documentation/javascript/tutorial#api_key
(on the screenshot you can see the link "Generate new key...")
Or you use this line without bothering with having a key. (for example: http://jsfiddle.net/LZmQ2/)
I have tried, but without any luck.
Bootstrap provides this really awesome theme called Stylish Portfolio (http://startbootstrap.com/stylish-portfolio) which comes with a cool Google-map location.
This is a fairly standard thing nowadays. However, I need to change the location of the map to match Copenhagen in Denmark.
I've tried to look up other ressources/help/support from the template creators, bot cant seem to find anything on the map coordinates - which is why I'm here at SO now.
I've been looking through the html, and this seems to be the code for the map?
<!-- Map -->
<div id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
</small>
</iframe>
</div>
<!-- /Map -->
Clearly, it's not just a simple google-maps link/coordinates - can somebody help explaining to me, what I'm actually looking at here?
Thanks in advance
The solution to your problem is quite easy...
Follow these steps:
Go to https://developers.google.com/maps/documentation/embed/start
Search for business or place (where it says "Highlight a place or an address") then click "Looks Good!".
Enter your API key, if you dont have an API key follow the istractions bellow and create one (API key), if you have an API key skip steps 3.1, 3.1.1, 3.1.2., 3.1.3., 3.1.4.,
3.1 Creating the API key
3.1.1. Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
3.1.2.Click the Services link from the left-hand menu.
3.1.3.Activate the Google Maps Embed API service.
3.1.4.Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.
Your API key looks something like this: AIzaSyCwI3k7JC29_KzlX1S_bC8fARpocLX5bRY
After you ender your API key click "DONE"
Copy And Paste the code you'll get to your templates index.html and you're done.
Change the height and width to 100% (where is says
That's all!
I have changed the language for the google maps to Hebrew in the language setting but I would like to use the <iframe> code for my website. However, I can only seem to get this in English. How do I set it for Hebrew?
The URL has hl=he but I can't seem to get it to work for the <iframe> code.
My code is:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d27130.99130966173!2d35.186535!3d31.787558!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502d64c6e5bf91d%3A0x2f55a98e4e4ab5e9!2z15vXoNek15kg16DXqdeo15nXnSAxNQ!5e0!3m2!1siw!2s!4v1395222081666" width="600" height="450" frameborder="0" style="border:0"></iframe>
Thanks
You need to add language parameter of API call for embed map. For Hebrew language, src of <iframe> should be like:
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d27130.99130966173!2d35.186535!3d31.787558!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502d64c6e5bf91d%3A0x2f55a98e4e4ab5e9!2z15vXoNek15kg16DXqdeo15nXnSAxNQ!5e0!3m2!1siw!2s!4v1395222081666&language=iw"
More info at Google Maps Embed API
More info about Google Maps API language support:
https://developers.google.com/maps/faq#languagesupport
idk if this is really functional for other countrys but when im building a mock, and i found a google map iframe, and my client is by Example: US but im Mx the:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3063.7150513838938!2d-84.19918628432937!3d39.83580597943695!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x884081e28cd77f07%3A0xf7f318d105021243!2sBuckeye+Harley-Davidson!5e0!3m2!**1ses!2smx**!4v1556548028269!5m2!**1ses!2smx**"
allowfullscreen></iframe>
i just update this info in the Url, 1sen!2sus, then the iframe is shown in english.
i hope this can helps to you to.
In 2016 it doesn't work anymore for embedded code directly taken from maps.
But &language=ru would work if you generate your code here: https://developers.google.com/maps/documentation/embed/start
You'll have to create api key.
Also you can use link like this -
src="https://maps.google.com.ua/maps?q=Майдан+Незалежності,+Київ&hl=uk&output=embed"
Майдан+Незалежності,+Київ - map locaton
uk - language
While using Google Map embeed iframe you can replace default language parametr on the src , you can look at at my example I point the placement of default language code : For example - az for Azerbaijan language
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3038.7779420053535!2d49.85933131574896!3d40.39161387936813!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40307d151fdf42df%3A0xb3dd9195f4676922!2z0JzQuNC90LjRgdGC0LXRgNGB0YLQstC-INC-0LHRgNCw0LfQvtCy0LDQvdC40Y8g0JDQt9C10YDQsdCw0LnQtNC20LDQvdGB0LrQvtC5INCg0LXRgdC_0YPQsdC70LjQutC4!5e0!3m2!1sru!2s!4v1574328901852!5m2!1s{you can find this point and replace with your locale language for example 'az' then iframe will translate into your locale language}!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
I had the same problem.
I am a Dutchman living in Brazil.
I developed a website for a Brazilian firm.
The result the iframe rendered in the web-page was in Dutch.
Then my client tested the site and everything was in Portuguese.
The answer can be found in the native browser settings (Dutch for me), (Portuguese for my client).
Dirk Detmar
Teresina, Piaui
Brazilie
While using Google Map embed iframe changing the default language parameter works for me. See here which parameter to change:
In the image currently, the Nepalese language is used and if we change the language parament "ne" to "en", all the text in the map will appear in the English language.
Also, you can change the language parameter from the google maps page. In the bottom right corner, click the location icon which shows your location, and change it to the required country you want.
So to sum the answers to this question up, the language key depends on what API you are using:
https://www.google.com/maps/embed
key : hl
list of possible parameters (search page for keyword "hl")
https://www.google.com/maps?output=embed
key : language
list of possible parameters
To insert a map into my website, I have been using server-side code to create something like the following. I thought I had a good reason for originally doing it this way, but now do not recall the reason. Doing a quick search shows that most solutions use an IFRAME. Is the IFRAME solution the best approach, or are there reasons why my IMG solution is sometimes better? Thanks
<img alt="Map" src="http://maps.google.com/maps/api/staticmap?center=5th+%26+College+St%3Ch1%3EHello%3C%2Fh1%3E+SEATTLE+WA+98101&zoom=14&size=400x400&sensor=false">
Using IMG, which uses the Google Maps Static Maps API, creates a static image that your users can only see, for example as seen in this Fiddle:
That uses the following code:
<img alt="Map" src="http://maps.google.com/maps/api/staticmap?center=5th+%26+College+St%3Ch1%3EHello%3C%2Fh1%3E+SEATTLE+WA+98101&zoom=14&size=400x400&sensor=false">
However, when you create an IFrame, that allows the users to interact with the map, for example pan, zoom out, choose between "Map, Sat, Ter, and Earth modes", as seen in this Fiddle:
The code that produced that:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&ie=UTF8&ll=53.800651,-4.064941&spn=11.629588,33.815918&t=m&z=6&output=embed"></iframe>
So too recap, IMG produces a STATIC image, while IFrame produces a dynamic interaction (Panning, zooming etc.)
NOTE: Google limits you if you go the IMG way to
25 000 free static map requests per application per day.
which should be enough for most but it is useful to know. If you need more, look into Google Maps API for Business.