I am trying to retrieve the "types" data from the GOOGLE API for POI by calling the API, getting a JSON object, and then print it. The call to the URL works fine and returns a JSON object, but everytime I try to access it, even print it on screen , I get the error on Chrome's console "Origin null is not allowed by Access-Control-Allow-Origin". I have also tried using $.getJSON and included callback=? in the URL , but no luck... Any help will be welcome.
<html>
<head>
<meta charset="UTF-8">
<title> Google Geolocation Test </title>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
var url = 'https://maps.googleapis.com/maps/api/place/search/json?location=51.2780637,1.0852839&radius=0.1&sensor=true&key=MYKEY&callback=?';
$.getJSON(url, function(data) {
console.log(data);
})
</script>
</head>
<body>
</body>
</html>
If have seen that many encountered this issue. Google apparently leaves you no option but to use the API for maps using a server connection. For those who only wish to retrieve information about places using the google maps API, which in the JSON provided by Google, I recommend using FourSquare's API instead, which allows cross-platform queries, something that Google Maps apparently does not.
And so, as for the solution, you can use the code above, but replace the content of the var url with this:
https://api.foursquare.com/v2/venues/search?ll=40.7,-74&radius=10&oauth_token=YOURKEY&v=20130628&callback=?
You can get a Key and the full code by registering on https://developer.foursquare.com/
Related
I created an Google login button:
<!DOCTYPE html>
<html>
<head>
<title>Google Auth Demo</title>
<meta name="google-signin-client_id" content="xxxx.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
function signOut() {
gapi.auth2.getAuthInstance().signOut().then(function() {
console.log('user signed out')
})};
function onSignIn(googleUser) {
console.log(googleUser.getBasicProfile());
}
</script>
</head>
<body>
<h1>Welcome to the Demo</h1>
<div class="g-signin2" data-onsuccess="onSignIn" data-ux_mode="redirect" ></div>
<button onclick="signOut()" >Sign out</button>
</body>
</html>
I changed a param from popup to data-ux_mode="redirect". How do I configure the field Authorized redirect URIs or change somethingelse for my app on https://console.developer.google so I can use it on localhost?
I had find a close issues here: https://github.com/google/google-api-javascript-client/issues/288#issuecomment-289064472 . So it's availabe for implement code authen button Google sample without open popup?
You need to add authorized domains and redirect URI's to your client ID or API keys using this URL
https://console.cloud.google.com/apis/credentials?project={YOUR-GOOGLE-CLOUD-PROJECT-NAME}
Basically in the GCP console, on the left navigation bar go to APIs and Services. Over there look for the oAuth2.0 client ID you are using in your project. Once you click on it you have an interface to configure Authorized redirect URIs and Authorized JavaScript origins
Edit: upon going through the linked github issue(which is still open by the way) it is not possible to get the token to a local machine using the redirect UX. They have plans to support it in the future but currently only works with popup method.
Hi #Jeevsxp, this is not possible to obtain an authorization code
without popup. This is a security restriction: an offline code will
allow you to obtain a refresh_token in the server, that gives you the
possibility to obtain a fresh access_token anytime you want. For that,
the user needs explicit consent
I have a Google Maps application that works perfectly on multiple developer machines but fails to run when deployed to an Internet facing Web server.
The developer machines all access the application using
http://localhost
However on the Internet facing web server the application is of course accessed via a valid domain
http://<Some Domain>/<application>
Debugging on the browser side I see that the last call made from the browser is
https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp://<the proper domain>/corpsuser/User_Page.html&callback=_xdc_._9p58yx&token=125651
(Domain name masked)
The Maps application code where things hang seems to be the javascript:
map = new google.maps.Map(document.getElementById('map'), mapOptions);
The element 'map' and object mapOptions are properly defined (after all, app works fine on dev machines)
I am guessing this is a licensing/Key issue.
I logged in to the Google Account used for enabling the Google Maps API and generated browser key and also added/associated the domain to the key but that didn't work. Noticed that there is a message that said it could take up to 5 minutes for changes to reflect. So waited for some time and still no luck.
Digging deeper, I saw that some of the calls, for example the snapToRoads API take in the Server API Key as a parameter.
However the call where the application hangs is the first call to setup the map and does not take in the API key.
The google documentation says I need to use this tag somewhere
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
Where should I add it? and Do I have to define the initMap function? or should it be used as-is?
Any help would be greatly appreciated.
Here is a sample code in where you need to place the line <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
You will notice that all example in these documentation uses that line, because you need this to load the Google Maps JavaScript API.
For the callback parameter, it explains here that when the async attributes lets the browser render the website while the Maps JavaScript API loads, when the API is ready, it will call the function specified using the callback parameter.
I had this problem and it turned out be related to caching. Some of the code involved in the loading and display of maps was in an external .js file that was being cached by Cloudflare. When I deployed to production, it was still using the old js. I needed to manually purge the cache within Cloudflare.
Using the same setup (devolper host vs. public host), facing the same symptoms (map shows on developer host while map loading stalled on public host with last log line on browser console "...maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp...&token=64530 [HTTP/1.1 200 OK 25ms]" the reason for failure was that (only on public host) the map container-div contained legacy direct element style formatting disabling display that overrode the used formatting so that the map stayed unvisible.
The probability the reported problem will have exactly the same reason might be small, but there are 2 findings:
The loading of Google maps api code and data might stop at unexpected positions as the reason for my failure was in no way related to authentication.
If a developer version is running, starting to derive the public version with an exact copy of the developer version seems to be a good, at least handy practice.
By the way, there are ways to not use the cited code to use Google maps, but it can also be done by dynamically include it (independent of async and defer settings).
I had the same experience with Chrome browser on Android. The reason was Chrome's data saver option which was enabled. The problem got solved on disabling this option. The second option is to go with SSL. Chrome does not compress the pages for data saving served as https.
I'm totally new to RESTful API and html and was wondering if I could get some advice.
Basically, I've made an application with a restful api using RestX, see picture, that can succesfully retrieve info, like a list of strings with node addresses.
And I want to make a HTML page that looks roughly like this (mockup):
I'm totally unsure how to actually do this however. Also, I'm unsure of how to display, for example, the list of strings I've received. In the mockup, the list of registered nodes should dynamically be made from the list received from the application, for example.
I've made a sample HTML text file (from another overflow post), but that doesn't really do anything...
See code:
<!DOCTYPE html>
<html>
<head>
<script src="the/Path/To/The/Downloaded/JQuery.js"></script>
<script>
//Usually, you put script-tags into the head
function myFunction() {
//This performs a POST-Request.
//Use "$.get();" in order to perform a GET-Request (you have to take a look in the rest-API-documentation, if you're unsure what you need)
//The Browser downloads the webpage from the given url, and returns the data.
$.get( "http://192.168.59.130:8080/api/#/ui/api-docs/#/operation/list/GET/___list___nodes", function( data ) {
//As soon as the browser finished downloading, this function is called.
$('#demo').html(data);
alert( "Load was performed." );
});
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
I'm lost, can anybody help?
Currently you are not using the REST APIs, but the URLs to access Restx UI interface.
The first thing you should do is to update the URL you are using to something like: http://192.168.59.130:8080/api/list/nodes
You'll get back a list of entities (at least, that's what the name of the API method suggests) in json that you can use in your javascript to populate the HTML form.
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 noticed that I am unable to load the google maps js libraries using labjs. I.e.
$LAB.script("//maps-api-ssl.google.com/maps/api/jslibraries=geometry&v=3&sensor=false").wait()
is not working for me (library is not available in my code) and I have to explicitely do
<script src="//maps-api-ssl.google.com/maps/api/js?libraries=geometry&v=3&sensor=false"></script>
Any idea why?
LAB.js can load Google Maps as long as you include a callback parameter, e.g.
window.noop = function() {};
$LAB.script("//maps-api-ssl.google.com/maps/api/jslibraries=geometry&v=3&sensor=false&callback=noop").wait()
Two urls are not the same. Did you check it?