I am just starting out with the google maps API and following the tutorials. This first one works fine
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
But it seems that none of the others are working and I'm not sure why. Let's keep it simple with two examples. The first one linked above works and loads the map as expected.
Then I try this one (or pretty much any other one) and nothing loads
https://developers.google.com/maps/documentation/javascript/examples/icon-simple
I am putting my API key in properly, and I have gone into my API console and enabled my blog to use the API.
I turn no the javascript console and get :
"the target origin provided" "does not match the recipient window's origin"
But I think it is a red herring because I get that as well for the one that works. Same messages.
Any idea what I am doing wrong?
I googled those errors and got a whole bunch of stuff that does not seem to apply to maps APIs.
Thanks.
That error isn't specific to the Google Maps API; rather it suggests you're mixing protocols (http and https). See answers to this question if you want more details.
In short, try changing API calls from http to https, or vice-versa. If you have references like: //maps.googleapis.com/maps/api/js..., try explicitly putting "https" or "http" at the start.
I'll edit my answer with more information if you provide more details (code, complete error message).
Related
I am developing in JavaScript/HTML/CSS an app that uses Google Maps. I am getting the following alert dialog box:
"This page was unable to display a Google Maps element. The provided Google API key is invalid or this site is not authorized to use it. Error Code: InvalidKeyOrUnauthorizedURLMapError"
The app does actually display the map element; the alert is not a problem except it should not appear at all. The map displays properly.
I have gone in to the Google Developer's Console and, in the "Credentials" section, have "edited allowed referrers" to be mydomain.com/*
I have also gone in to the Google Developer's Console in the APIs section and enabled 11 Google Maps APIs.
After lots of referrer combinations, deleting and re-creating credentials i realized that i didn't enabled "Google Maps JavaScript API". What a shame. :)
For anyone who is having trouble to get google maps api work please check if the API enabled first.
After struggling a lot with this issue I've found 1 solution for me. It might help people who are searching for a proper and exact solution but not the comments, downvotes and links.
(Map was not displayed in my case.)
If suppose,the link of page where you are loading map is
http://example.com/abc/def/ghi/kpn.php
then give thesame(exactly the same) under Edit allowed references
If you try loading the same page using:
www.example.com/abc/def/ghi/kpn.php
or
http://www.example.com/abc/def/ghi/kpn.php
then your page is loaded but not your map, and this alert is generated.
CONCLUSION
Use the same path(Url address) at these 2 places.
While loading the page which has map.
Under Edit allowed references.
After following this I've got rid from this alert.
First you need to go to https://console.developers.google.com/ and select APIs.
In Google Maps APIs select Google Maps JavaScript API and make sure you enable API for Google Maps JavaScript.
Secondly, you need to create an API key:
Go to Credentials
Create new key and select Browser Key
No need to specify any referrers
So you should see Any referrer allowed after you save.
After a lot of trial and error this worked for me (by Eduardo. Thanks !)
The URL that needs to be authorized is the one in the Referrer header for the requests the browser sends to Google to load the API.
Under Browser Credentials > REFERERS
Add these
.example.org/
www.example.org/*
http://www.example.org
http://example.org
geocodezip provided the info i needed. I was indeed loading the googlemaps library twice: once in my index.html file and once in an iFrame. I changed my code so that the iFrame did not load the googlemaps library but, instead, used the parent. Thanks geocodezip!
Go to APIs menu and find "Google Maps JavaScript API" after you open it just press "Enable API"
I was able to get this to work by deleting all my referrers and allowing all. Apparently there is a bug in the developer console that is causing problems. Some people say that they can get referrers to work by deleting all then adding all back in at once instead of line by line:
https://productforums.google.com/forum/#!topic/maps/mSVyDazRMQo
Previous things I tried:
Regenerating Key
Setting all maps apis to enabled
Hard coding absolute paths of referrers
A side note, when I didn't include my api_key everything worked fined, though I'm sure they will eventually turn you off if you don't use your api_key.
What worked for me was to use Firebug in order to find the exact URL that made the request to the Google Maps API. As stated in Google Maps API documentation on troubleshooting authorization, "How to find the correct URL" part:
The URL that needs to be authorized is the one in the Referrer header
for the requests the browser sends to Google to load the API.
In my case, lets suppose I have a website example.com. In the developer console, under Google Maps API key, I've added many combinations of referrer such as example.com/*, *.example.com/*, example.com, but still the InvalidKeyOrUnauthorizedURLMapError persisted.
My solution, as I've mentioned, to use Firebug: open example.com and look for what was the referrer making request to https://maps.googleapis.com/maps/api/js?..., and it was http://example.com, and that is it. I've added http://example.com/* to the enabled URLs in the Developers Console under my respective API key and now everything works fine.
It is important to know where to look for on Firebug: it is the Net tab. Just click on the request to maps.googleapis ... and look for the Referer
I got it to work by exchanging the keys with my own special created keys AND reading this webpage a few times very carefully. My advice is to add or exchange your Google API Keys at https://console.developers.google.com/apis/credentials before embarking in very complicated scripting.
Insert your own API keys in the very first line of the Google Map javascript:
If you have been setup all configuration like api key etc, and you still got the error,
please enable all your mandatory APIs regarding to google maps.
Like:-
Google Maps Embed API
Google Maps Geocoding API
Google Maps Geolocation API
Google Maps JavaScript API
I search Google for a phrase which brings up my website.
Google shows a URL similar to
https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=my%20search
This brings up my website. On the landing page of my website, I have the following javascript
alert(document.referral);
This shows me the value
https://www.google.co.uk/
No querystring!
Research suggests the issue is likely due to my website being HTTP but both Google and my website use HTTPS
Why can I not get the search phrase from the query string?
Edit
Based upon the links I've been provided (thanks) I can see what you are claiming the issue is. Google doesn't allow it! However, I'm not sure I agree with this - there are many web analytical programs which provide this information. The company I have used (which admittedly can only provide keywords for 5% of all visitors) can do this... And I only embed some javascript. I can only assume it's because visitors can home HTTP:://google as opposed to HTTPS::google
have a look at this document: http://blogs.adobe.com/digitalmarketing/analytics/the-impact-of-google-encrypted-search/
It apparently has something to do with google running HTTPS. on my local tomcat server running HTTP, i get
http://servername/tools/errorlog.jsp?env=Prod&logType=EXTAUTHLOG when running
alert(document.referrer) in a console
Duplicate of:
How can I get the correct referer via JavaScript if the referrer uses https? ??
Trying to use the StockTwits Widget in a web page that is (and must remain) served over SSL.
Since the widget-loader.min.js script link was being called via http, I copied the code to our domain so it would be served over our SSL. Problem still not solved. Chrome 25 says my page "ran insecure content" and completely refused to run or even display the widget.
So I dug into the .js file and found this little bit:
m=b.ssl?"https://":"http://"
Figuring the warning was coming from the widgets CALL to the service, I hacked this line as follows:
// add one character ↓
m=b.ssl?"https://":"https://"
Initially I thought I had success, because Chrome 25 loaded the widget! But my glee was short lived once I saw that the nice GREEN https:// in the address bar had changed to a yellow warning sign. Clicking it for info revealed a warning: "...displayed insecure content from http://assets1.stocktwits.net....". {darn}
Since the .js is secure, and the CALL to stocktwits is made with https thanks to the hack, I have to conclude that stocktwits either isn't able or configured to reply over HTTPS.
Do you have any experience with this widget, or see something I am not doing correctly? TIA.
We've fixed the widget to use protocol-less URLs now. Let us know if that fixes this issue for you.
Currently the widget is not fully SSL compatible.
We will look into seeing what would be involved to have an SSL option with the widget. Seems like it could be done with minimal impact.
I am using Simple Facebook Connect for Worpress.
However I am getting some javascript errors.
View Image Full Size
www.connect.facebook.com/widgets/fan.php?api_key=xxxx&channel_url=http%3A%2F%2Fjquery.webspirited.com%2F%3Fxd_receiver%3D1&id=189373481094312&name=&width=285&connections=10&stream=0&logobar=1&css=
GET (same url as above) undefined (undefined) Unsafe
JavaScript attempt to access frame with URL http://jquery.webspirited.com/ from frame with URL
http://www.facebook.com/extern/login_status.php?api_key=xxxx&extern=2&channel=http%3A%2F%2Fjquery.webspirited.com%2F%3Fxd_receiver%3D1&locale=en_US.
Domains, protocols and ports must
match.
How can I fix these errors?
Short answer: You can't. This error happens in Safari and sometimes Chrome. The webkit based browsers have a somewhat tighter security model for cross domain same-origin policies. The way Facebook Connect works is that it tries one method to make things work, then if that fails, it falls back to another approach.
The fall back means that the code still works, but the error comes up because they try that method first.
This is how Facebook's code works. You can't fix it. You can't work around it. If you're going to use Facebook's code, then you learn to live with it.
last time, when i got an error like this, i forgot to set up the url in my facebook-application.
http://www.facebook.com/developers/ > Application settings > Web Site > Site URL, Site Domain
The api-key is alway linked with your url. The url of the website, where u implement the iframe must have the same URL like this.
You might like my Simple Facebook Comments For Wordpress wordpress plugin I recently released. It makes the whole process of adding facebook connect comments to your wordpress site super easy and fast.
http://www.davidswordpressplugins.com/simple-facebook-comments-for-wordpress/
I wrote a Google Maps API wrapper in JS, did some local tests with static html, and everything worked just fine. Then I loaded the files into a local web server running in localhost:8080, tested the map panels, and once again, everything worked just fine.
Then a week went by, I added a map to a page, and I couldn't get it to load. Nothing has changed (that I know of anyway, obviously something has), and static tests continue to work just fine, but when I try to load the API from the server I get this in the debug console:
XMLHttpRequest cannot load http://maps.google.com/maps/api/js?sensor=false.
Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.
I read a bit around, but I still can't understand the error, much less fix it. Can someone please give me a hand?
edit: I use a simple tag to load google's js. No jQuery, no nothing.
Thanks in advance!
#Santiago hopefully I can help you now :) The error you are receiving is due to Google's prohibiting of cross site scripting. You can find the info here: Google which also references:Wikipedia Article
It looks like you'll need to create a proxy service for your client on your public facing webserver. Since the request comes from your public webserver and the reply goes back to your webserver it will meet the same domain requirements that Google requires. I do not know enough python yet to create a pythonic cgi proxy but I have to think that there are many different solutions out there already. Plus you will be limited by your server as to what type of solution you employ.
HTH!
~MWR