The number of the problem related questions is huge. I spent a lot of time and probably took a look on each of them, however I haven’t found a solution for my case.
There is a domain (let's call it domain.com). Google maps is connected to it with the key for years: <script src="//google.com/jsapi?key=the_key_is_here"></script>
There is a new domain (let's call it domain-new.com) - the full clone of the first domain. But the Google Map doesn't work on it and there is an error in the console: Google Maps API error: MissingKeyMapError.
What methods of solution have I tried:
Creating a new key
Include all Google Maps APIs in console.cloud.google.com
Specify all possible referrers in console.cloud.google.com:
domain.com
*.domain.com/*
domain.com/contact
domain-new.com
*.domain-new.com/*
domain-new.com/contact
Specifying the versions of the included script (?v=3/?v=3.exp/?v=3.26)
Replace the included script with: <script async defer src="//maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=the_key_is_here"></script>
All the changes were made simultaneously for domain.com and domain-new.com. The map worked successfully on domain.com, but there still was an error on domain-new.com.
Therefore, the exactly same map with the same key works on domain.com at the moment, but nevertheless it doesn't work on domain-new.com. All relevant documentation for the Google Maps API was read and no suitable solutions have been found. In conclusion, I hope your will help me.
Related
<head>
<!-- Include Google Maps JS API -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/?key=my-KEY&sensor=true">
Each time I call the view up the other html element show but the google map is not displayed. the console reveals a GET https://maps.googleapis.com/maps/api/?key=KEY&sensor=true 404 ()
PLS how will I load an external js in django?
This is not a Django error in fact.
However, the solution is to switch to googleapis.com. Maps APIs should now be loaded from maps.googleapis.com rather than maps.google.com or maps-api-ssl.google.com.
Edit
In fact, you are using maps.googleapis.com. This means that the error is caused by something else. I think that the problem is that your link is missing js after ?. See here.
Google Maps Static API is free and you can authenticate by API_KEY.
Google Maps Javascript (JS) API is not free any more and API_KEY authentication was disabled. For that reason you get 404 and 400 web response status.
https://developers.google.com/maps/documentation/maps-static/start
Reminder: To use the Maps JavaScript API:
All Maps JavaScript API requests must include an API key; we no longer support keyless access.
You must enable billing on each of your projects.
Whenever I am trying to use the Google Maps API places library it gives me this error in the console of my browser:
TypeError: autocomplete is undefined
If I'm not mistaken, that means the places library couldn't load. As for the code, I had my own code but I also copypasted the code from the Places API tutorial(https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform).
In my header I have these two lines included:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
I also made sure Placis API, Google Maps JavaScript API v3 and Google Maps Geolocation API are all switched on in my Google APIs console.
I am not really sure what the problem is, besides the places library not loading. I should note I am working on a hidden subdomain, could that be the problem?
Thanks in Advance.
Please make sure you only load the maps file once (and you should always load the api via https, or with the active protocl):
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=MY_KEY_HERE&libraries=places&sensor=false"></script>
The subdomain should not be a problem, so you can work with it.
I'm using Google Maps JS API v3 for a project. Is there a way to ask the map to cache tiles on the client's machine so that when they refresh the browser, the tiles don't have to all download again?
Many of my clients are on cellular connections where redownloading the map takes a considerable amount of time.
Thanks!
By default google maps return's cached images (you can see this in the network tab of the console).
If you user's having trouble caching the images, it's probably because they disabled the cache
This is actually possible with HTML5 and its cache-manifest feature. I'd suggest this question (and answer) be updated.
Google coders themselves have tackled this problem and unfortunately the information isn't well disseminated.
Required Readings
First take a look at the Google Code blogpost here: http://googlecode.blogspot.com/2010/04/google-apis-html5-new-era-of-mobile.html
Then have a read at Missouri State's own post: http://blogs.missouristate.edu/web/2010/05/12/google-maps-api-v3-developing-for-mobile-devices/
The Technique
You must cache every URL used by Google Maps
Employ methods to battle Chrome's and Firefox's stubborn caching methods by removing it from "offline websites"
All customizations must be client-side in javascript
Your cache file will look like (as per Missouri State):
CACHE MANIFEST
/map/mobile/examples/template.aspx
/map/mobile/examples/template.css
/map/mobile/examples/template.js
NETWORK:
http://maps.gstatic.com/
http://maps.google.com/
http://maps.googleapis.com/
http://mt0.googleapis.com/
http://mt1.googleapis.com/
http://mt2.googleapis.com/
http://mt3.googleapis.com/
http://khm0.googleapis.com/
http://khm1.googleapis.com/
http://cbk0.googleapis.com/
http://cbk1.googleapis.com/
http://www.google-analytics.com/
http://gg.google.com/
Caveats
You will need to be entirely HTML5-based and recognize the impacts this will have on your users. This situation is handy where either your users are up-to-date on browser standards/devices or you have control over user choices.
Hope this helps.
The previous answer re the cache-manifest feature is incorrect. If you read the spec at http://www.w3.org/TR/html5/offline.html, under "5.7.3 The cache manifest syntax" you'll see that the NETWORK section of the manifest file actually lists resources that should NOT be cached:
# here is a file for the online whitelist -- it isn't cached, and
# references to this file will bypass the cache, always hitting the
# network (or trying to, if the user is offline).
NETWORK:
comm.cgi
The previous poster's example is actually saying:
1) cache the following files:
/map/mobile/examples/template.aspx
/map/mobile/examples/template.css
/map/mobile/examples/template.js
2) fetch the following from the network:
http://maps.gstatic.com/
http://maps.google.com/
http://maps.googleapis.com/
http://mt0.googleapis.com/
http://mt1.googleapis.com/
http://mt2.googleapis.com/
http://mt3.googleapis.com/
http://khm0.googleapis.com/
http://khm1.googleapis.com/
http://cbk0.googleapis.com/
http://cbk1.googleapis.com/
http://www.google-analytics.com/
http://gg.google.com/
I recently ran across the following problem when lazy loading/dynamically loading the google maps api v3: In order to check whether the api has fully loaded or not, I followed the instructions on google's documentation page. Works fine with a normal function callback name like &callback=initialize in global scope. Also works fine with a function callback that is within a certain namespace like &callback=Namespace.initialize.
Now my function is placed under Namespace.foo[0].initialize ("Namespace" and "foo" are of type object). The problem now is that I can't properly access this function. I tried several ways of building the callback string, each listed below with whatever firebug tells me is not working:
&callback=Namespace.foo[0].initialize
Firebug: NetworkError: 403 Forbidden - <http://maps.googleapis.com/maps/api/js?v=3...&callback=Namespace.foo[0].initialize...>
&callback=Namespace.foo.0.initialize
Firebug: missing ; before statement
Firebug: [Break On This Error] window.Namespace.foo[0].initialize()
&callback=Namespace.foo%5B0%5D.initialize
Firebug: NetworkError: 403 Forbidden - <http://maps.googleapis.com/maps/api/js?v=3...&callback=Namespace.foo[0].initialize...>
I'm thankful for every hint and/or solution!
Background information: What I do might also be interesting. A script is dynamically loading html, css, data and the google maps api into a external webpage (within a web-widget). Now I'm using jQuery's deferred object to queue the different includes such as loading the css/javascript/html first, then receive the data and finally setup the google map within the previously loaded structure. Deferred object performs way better than handling the different steps with callbacks (and much easier too!), but when the jQuery.getScript method is done (loads the google maps api) the success event is fired and deferred.resolve gets returned. Too bad that this probably just handles the authentification (via client-key) and then asynchronously loads the google maps main.js. This pretty much sucks because I need to wait for the api to fully load...
How Do Google and Bing's Autocompletion Work?
When I use firebug I see no XHR's. In that case, how is the data retrieved?
XHR is restricted to the same domain as the source request, whereas Google and Bing use separate domains to serve their dynamic content.
Instead, they dynamically load new data by adding <script> tags to the page (which show up in the "All" tab of Firebug)
They create <script> elements that point to URLs that return Javascript that calls a function with the results of the autocomplete. (Similar to JSONP)
You can see the requests in Firebug's Net tab.