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.
Related
My app website is not working fine on IE11.
The website is not loading, it gives me a blank page
This is the error thrown on IE11 :
SCRIPT5005: String expected
js (26,286)
SCRIPT5022: Exception thrown and not caught.
polyfills.js (3234,3)
I'm enclosing the screen capture on on the console
I have included the API in my index.html like this :
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
It should include googlemaps after my polyfills.js, but I'm not sure on how to do that
I've tried to use agm-map, and others solutions but so far, nothing is working.
You could add the Google Maps script to the ngOnInit() method instead of in the tag.
let googleMapsScript = document.createElement('script')
googleMapsScript.setAttribute('src', 'https://maps.google.com/maps/api/js?v=3.38&key=YOURGOOGLEMAPSAPIKEY&libraries=places')
document.head.appendChild(googleMapsScript)
This will load the Google Maps script after the main JS for the application is loaded.
I don't use Angular but a similar approach works well in VueJS.
I had the same issue. Not Angular but same issue.
I changed the following:
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places,geometry"></script>
to
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places,geometry"></script>
I am following the introduction to Leaflet from https://maptimeboston.github.io/leaflet-intro/. At the first Rat Map, my code failed to show the rodent objects/locations on the map. I c/v the tutorial code directly and still failed to get objects on my map. All of the necessary files are in the same directory (and are appropriately named) as the html file being used.
I'm new to HTML, GeoJSON, and have been unsuccessful in finding a method that I could use to troubleshoot. The data files are complete and have all of the values/objects expected. I'm used to Python/R/VBA, so not having an error message is new to me as well.
I am running the HTML file through a Chrome browser. The HTML files are being written in Sublime Text
//make sure you have the jQuery and rodent GeoJSON files in HTML directory
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([42.35, -71.08], 13);
// load a tile layer
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by MAPC, Data by MassGIS',
maxZoom: 17,
minZoom: 9
}).addTo(map);
// load GeoJSON from an external file
$.getJSON("F://FinanceServer//HTML//rodents.geojson",function(data){
// add GeoJSON layer to the map once the file is loaded
L.geoJson(data).addTo(map);
});
</script>
</body>
</html>
I was expecting to see something resembling the third map from the aforementioned tutorial site.
The URL to your local file should never work, especially as an absolute path.
Browsers prevent you from accessing the client file system, for well known security reasons.
Even if you open your HTML page directly from file system (with file:// protocol), Chrome browser prevents you from making AJAX requests to other local files. Last time I tried it works in other browsers, though.
Even if you use another browser, your URL should be relative, or specify the protocol / start with double slash to make it absolute.
To avoid most of these limitations, the standard practice in web development is to serve files with a small local server.
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 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/
Is it possible to access google closure library functions from google app scripts via HtmlService? The html files in the google scripts seems to be filtering out anything related to closure library.
project: I am exploring DOM manipulation utilities from Google Closure library from within the google app scripts using HtmlService. I intend to run this as a stand alone web app.
The closure functions work when directly loaded into the browser from its local client environment - but they dont work when injected from GAS app via the HtmlService utility.
Here is the code I am using in the GAS.
html file
<html>
<head>
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
function c_sayHi() {
var newHeader = goog.dom.createDom('h1', {'style': 'background-color:#EEE'},'Hello world!');
goog.dom.appendChild(document.body, newHeader);
}
</script>
</head>
<script>
function c_updateButton(date, button) {
button.value = "clicked at " + date;
}
</script>
<body onload="c_sayHi()">
<input type='button' value='Never Clicked'
onclick='google.script.run.withSuccessHandler(c_updateButton).withUserObject(this).s_getCurrentDate()'>
<input type='button' value='Never Clicked'
onclick='google.script.run.withSuccessHandler(c_updateButton).withUserObject(this).s_getCurrentDate()'>
</body>
</html>
Google Script file
function s_getCurrentDate() {
return new Date().toString();
}
function doGet(e) {
return HtmlService.createTemplateFromFile('hello').evaluate();
}
I have prefixed c_ to client side functions and s_ for server side fns. When running this as a web app,
Function c_sayHi has no effect - I am not sure if it is even invoked.
Functions s_getCurrentDate and c_updateButton work fine as described in google's documentation https://developers.google.com/apps-script/html_service.
Is there a way to get closure library working from the web apps as attempted above?
Couple of things here -
All .gs files is JavaScript that runs on the server side. So the DOM is not really relevant there.
You can run client side JavaScript by returning code in HtmlService. This is what I believe you want to do. However, jQuery is the best supported library on this approach. Closure might end up working but the team does not specifically test against that library.
The problem is that Closure's dependency structure is executing before the window load event, otherwise it will not work. So any require and provide statements are taken care of way before window load. When you inject them through the HTML Service, you are forcing their execution at a different stage then required, which causes everything to fail.
If you would be using a COMPILED Closure Library source, you will not have any problems with running Closure. Learn how to use the Compiler and Builder to make Closure Work properly. Also, you can use lazy loading to simulate your HTML Service.
With that, you can make javascript load dynamically onclick, onload or whatever the hell you want. This is called lazy-loading and it is used as a standard practice for all large web applications. Monitor the Network tab of Firebug when browsing through Gmail or Facebook.
Arun Nagarajan is right, jQuery is the easier solution but if you are doing something proper that requires breadth, scale and speed, jQuery is a toy for kids.