Google Maps loading files twice - google-maps

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

Related

Google Maps compatibility IE11 not working because of polyfills.js

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>

The provided key is not a valid Google API key Ext JS issue

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.

Loading multiple maps libraries with javascript

I am trying to load both the maps library and the places library with javascript so I can embed a map into my page, use google.maps.geometry.spherical functions and make places search requests but I'm having trouble loading all 3 libraries.
At the moment I am importing:
<script type="text/javascript"src="http://maps.google.com/maps?key=mykey"></script>
<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
But I get the errors:
syntax error
[Break On This Error]
...gs4d .gbmac,.gbes#gbg4 #gbgs4d .gbmac{margin:34px 0 0}.gbemi#gb #gbgs4d .gbmac,....
maps?k...hrkDAmw (line 1)
GClientGeocoder is not defined
[Break On This Error]
var geocoder = new GClientGeocoder();
Where am I going wrong?
Thanks a lot.
The first script doesn't point to a javascript, this will try to load the maps-homepage as a script(of course this will fail).
There is no need to include multiple scripts, simply use:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?libraries=geometry,places&sensor=false">
This will load the maps-API(V3) and includes the places+geometry-libraries
https://developers.google.com/maps/documentation/javascript/libraries?hl=en
However, as Colin said, this looks like V2-code.
You can use it in this way
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places"></script>

Unable to display google maps in a dojo layout

I am a real newbie in programming and now I have to combine Google Maps and Dojo. Both alone are fine but when I try to implement a Google Map into a Dojo content pane which is embedded in a border-container it simply does not work. I think there is a problem with the naming of the divs but perhaps there is something else to take care of?
Could someone post the simplest possible solution?
many thanks
I was able to figure it out myself.
Here is the answer:
Actually I was going to use ArcGIS Server Javascript extension for GoogleMaps and Dojo together. Thus we have to sure that all references to APIs are made correctly.
I think it is wise to use the Dojo components directly from the ArcGIS Server-API pages instead of loading from the DOJO network. This should guarantee the compatability between all components.
<!--Load Google Maps API -->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA22G6YWIfghc6CfXo3jGlQBQIhNZriPAS64ZF0ztgQFnJUtUvlhSuBly8ueb8pLmxY8qzKANsSXJhUA" type="text/javascript"></script>
<!--load arcgis-javascript for googlemaps api -->
<script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.4" type="text/javascript" ></script>
<!--load arcgis js api -->
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.4"></script>
<!--load the required Dojo components -->
<script type="text/javascript">
dojo.require("dojox.data.XmlStore");
dojo.require("dojox.grid.DataGrid");
<!--This loads the esri specific geoprocessing tool -->
dojo.require("esri.tasks.gp");
<!-- defining variables -->
var gmap = null;
var dynMapOv = null;
</script>
Then, after the initializing function is set up...
function initialize() {
//Load Google Maps
gmap = new GMap2(document.getElementById("gmap"));
var centerat = new GLatLng(-1, 23.7);
gmap.setCenter(centerat, 3); ...
... one has to ensure load the function with
dojo.addOnLoad(initialize);
Furthermore, it is important to put a reference to the the dojo-theme in the body tag of the HTML code.
<body class="soria" onunload="GUnload();">
I hope this very basic stuff helps someone who is not sure about how to combine AGS+GoogleMaps+Dojo.

Google Maps API key not working

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" />