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>
Related
when I put this into code embed in a google website:
<script>alert('test')</script>
gets replaced with:
<script>alert('test')</script>
Any suggestions?
I was expecting an alert window to appear.
I need to embed an external script to provide chat support, something like this (example):
<script async defer src="https://tool.test.com/example.js?site=111111"></script>
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 have really strange problem with Google Maps. Before closing body tag i'm putting this line:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY_IS_HERE&sensor=false"></script>
And when I'm trying to load the page I get such error:
Uncaught TypeError: Object #<Object> has no method 'Load'
I investigated a little bit, and I know that the problem is connected with loading google maps files twice. I previewed the file and google maps appends two libraries:
<script src="https://maps.gstatic.com/intl/pl_pl/mapfiles/api-3/15/11/main.js" type="text/javascript"></script>
and
<script src="https://maps.gstatic.com/intl/en_us/mapfiles/api-3/15/11/main.js" type="text/javascript"></script>
It's loaded dynamicaly. I think that the problem is with two languages: pl_pl and en_us. But why is it happening? Do You have any ideas how to solve this weird issue ? :D
Remove this script from the source:
<script src="https://maps.gstatic.com/intl/en_us/mapfiles/api-3/15/11/main.js" type="text/javascript"></script>
It will be loaded automatically by https://maps.googleapis.com/maps/api/js?key=API_KEY_IS_HERE&sensor=false
I got some issue in Google Map api in my project. I didn't handled anything related to this part and it was working fine before today.
But now, If i run the application, i got this popup msg and after that, the pages that are using google map api aren't working with this error.
I googled and followed this step.
1) https://code.google.com/apis/console/b/0/#project:40595208241:access
2) generate a new key
3) copy the new key to the index.htm inside key value
<script src="http://maps.google.com/maps?file=api&v=2.x&key=AIzaSyAJz86xjTce_oqnSTw8MoNaY-13tIx03XU" type="text/javascript"> </script>
<script type="text/javascript" src="extJS-ux/GMapPanel.js"></script>
<link href="extJS-ux/Ext.ux.grid.RowActions.css" rel="stylesheet" type="text/css" />
<script src="http://www.google.com/jsapi?key=AIzaSyAJz86xjTce_oqnSTw8MoNaY-13tIx03XU" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
</script>
So i've followed this same step, but now it doesn't work anymore. It doesn't show the error msg anymore, but it doesn't also show up the result. It says no result and do nothing. It worked right yesterday!!
I tried to do some other ways, but there wasn't a good solution for this.
Can you help me with this?
You are using v=2.x (the "experimental version). That is not recommended for production sites. It might start working if you call for v=2 or v=2.s (the "stable" version), if this was a change in the API.
Note that you are using v2 of the Google Maps API which is deprecated and may stop working May 19, 2013; definitely not recommended for production sites.
I'm having a problem with getting my Google Maps API key to work. I originally had the problem when trying to access http://dev.domain.com using a key generated for http://domain.com, however I subsequently tried generating a key for http://dev.domain.com and it still didn't work.
I get the typical This web site needs a different Google Maps API key. A new key can be generated at http://code.google.com/apis/maps/. alert message when trying the site. Checking their FAQ and following it's instructions to alert(window.location.host) to check the domain returns dev.domain.com which looks correct (unless it's meant to have http:// at the start? In which case I don't see how I've done something wrong).
Both keys (dev.domain.com and domain.com) work correctly on localhost.
Does anyone have any ideas on what I can do to solve this or any further tests I can do to work it out?
I came across this question as I was just now beating my head against this same issue. I finally noticed that the code Google provided for linking to the API was different from what I'd been using. I replaced this
<script type="text/javascript" src="http://www.google.com/jsapi?key=___">
</script>
<script type="text/javascript">
google.load("maps", "2.x", { "language": "en" });
</script>
with this
<script type="text/javascript"
src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=___">
</script>
and the error went away.
I was having the same problem and it turned that i was doing 2 calls to the http://www.google.com/jsapi url. The first one for adsense (without the key parameter) and then the second one for google maps with the key. Pretty stupid mistake but the result is that the although you put the key on the second call it doesn't use it.
I was getting the same problem and when i look at src part i found that my querystring part of src is wrong.
<script src="http://maps.google.com/maps?file=api&v=2&&hl=en;key=MY_API_KEY&sensor=true"
type="text/javascript"></script>
I clearly typed wrong querystring part. &\amp;&hl=en;
I put & to wrong place. Then i changed my wrong syntax with a correct one
<script src="http://maps.google.com/maps?file=api&v=2&hl=en&key=MY_API_KEY&sensor=true"
type="text/javascript"></script>
And voila it worked.
Google Maps APi not working in Firefox and IE but working in Chrome and Safari
CSS-Bug
Hi everyone, this is slightly off-topic, but since it cost me a whole day to figure this out i want to share it.
I had the above mentioned problem. The maps would load but except for the google log and terms of use, the map was just grey.
SOLUTION
somewhere in a parent css i had following cod:
#content * {
max-width: 100%;
}
removing it solved the problem;
hope this helps
After going through their FAQ i found that if we want our subdomains to enable Google map we have to request the API for http://domain.com/ (without www) . it worked for me.
Happy coding.
I've been fighting key issues for the last couple of hours. Was working on localhost, but not on my local network address or a domain name. I solved the issue by changing v=2 to v=2.x. I haven't tried 2.s. Also adding alert(window.location.host) for both my localhost address and domain name to a Browser Key in google's api console for maps v2.
As said in my comment I ended up using the v3 API as this never ended up being solvable.
I had the same problem when I added line breaks to the src element for readability:
<script src="http://maps.google.com/maps?file=api&
v=2&
key=ABQ...BlaBlaBla...cVw"
type="text/javascript" />
Removing the line breaks from the src element solved the problem:
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQ...BlaBlaBla...cVw"
type="text/javascript" />