I have made a Flask app that should technically load Google Map as per their tutorial.
But to my surprise, everything works locally and on hosted on Heroku and no error comes but maps don't load.
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: {{lat}}, lng: {{lng}}},
zoom: 16
});
console.log("map function");
console.log(map);
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{key}}&callback=initMap" async defer></script>
In the JavaScript console output, there are two prints: the first one says map function, second one is map object created of latitude and longitude passed to initMap function. This means the map object got created but did not updated div with map id!
None of the error codes listed on the Google page are occurring.
Most of the times this has something to do with the API Key. Make sure you created one the right way and that it is enabled and running. Hope I helped.
I had the exact same problem. I followed the tutorial step by step but it didn't work.
Chances are, you've installed flask_googlemaps using pip and chances are, pip didn't update the path to the latest version of flask_googlemaps.
Here's how to fix the problem:
pip uninstall flask_googlemaps
Download the package from here (in case the link breaks, its in their github page, realse tag 0.4.1.1)
pip3 install path_to_the_package_you_just_downloaded
run your app, it should be working now!
This is the solution that worked for me.
Related
I am using the native Google Maps plugin in ionic and I am encountering a strange situation. Basically, I followed the example from the Ionic site. So when I start the app on androidn using ionic cordova run android this work fine. However, if I add --livereload, the map refuses the load. Actually, GoogleMaps.create() method returns an empty object {}. Anyone encountered this?
I am assuming that --livereload has a backend web server running that reloads the app which might cause the native plugin to fail?
Any insights?
For the livereload, insert setTimeout() before GoogleMaps.create().
Because when the app executed GoogleMaps.create(), platform.ready() is not ready.
loadMap() {
setTimeout(() => {
this.map = GoogleMaps.create('map_canvas');
}, 1000);
}
I have a problem with firebase, it read data using 'once', but it shows me Uncaught Error: Query.once failed: Was called with 1 argument. Expects at least 2 on Firefox console and Google Chrome, but the source code on JS Bin there's no error.
I got the code from here : https://stackoverflow.com/a/35526844/6780268
I copy the code in bracket, i try 2 different firebase.js, but still show me nothing.
var ref = new Firebase('https://stackoverflow.firebaseio.com/35526205');
ref.child('Highscore').once('value').then(function(snapshot) {
console.log(snapshot.val());
});
Is this normal? And how to fix this problem?
Sorry for my bad english.
You're likely using a different/newer version of Firebase than the one in the jsbin in the link.
In newer versions of Firebase, you get a reference to the same database location with:
firebase.initializeApp({ databaseURL: "https://stackoverflow.firebaseio.com" });
var ref = firebase.database().ref("35526205");
I recommend reading the Firebase documentation, the migration guide, and the web codelab.
I'm having a problem where my map will load sometimes and other times it won't. The console is giving me different errors, MissingAPIKey and NOApiKeys. I only just got a new APIKey as well. So basically at the moment with:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<API-key>&callback=initMap"
type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
it is sometimes loading when I refresh but the console is showing this. I understand that the 'inclusion of multiple API maps' is causing this error, however when I remove <script src="http://maps.googleapis.com/maps/api/js"></script> the map doesn't load at all, and can't find 'google.'
I just did another refresh (map didnt load this time) and i got Google Maps API error: MissingKeyMapErroras well as noApiKeys. I've searched so many forums and nothing is fixing my problem. Thanks for your time.
we have a problem with our fusion table implementation when using google maps versin 3.23 (exp) or 3.22 (stable). With these versions, when we are trying to create a layer, we get Uncaught TypeError: Cannot read property 'stack' of undefined. The following lines in our code is not working with 3.23 or 3.22:
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Full address',
from: selectedFusionTableId,
where: sql
},
options: { suppressInfoWindows: true },
styleId: 1,
templateId: selectedFusionTableInfoWindowTemplateId
});
The implementation has been working with google maps version 3.21 (current frozen version) for a year, so I wonder if there are something we can do on our side or if there is something broken in the google maps versions 3.22 and 3.23?
Since google maps is using version rollover, our implementation will stop working next time google updates googlemaps versions.
Application can be found here:
http://studera.nu/studera-utomlands/utbytesprogram/erasmus/
/Magnus
I'm unable to reproduce the problem from a simple embedded map using "Tools > Publish" and changing the Maps API version. I suspect there's something going on with your app that is different from that code; can you reproduce using the generated Fusion Tables publish HTML?
BTW, the code above works, but it would be cleaner to use options for style and template IDs, e.g.,
options: {
suppressInfoWindows: true,
styleId: 1,
templateId: selectedFusionTableInfoWindowTemplateId
}
The problm was finally found in our code and it was caused by a global js function called Error(). Changing the name on the function to a more specific name resolved the issue and our application started to work against google maps version 3.22 and 3.23. Our guess is that Error() function conflicted with a function with the same name in google maps js file.
I'm currently using the Async plugin to load Google Maps in our application using RequireJS (https://github.com/millermedeiros/requirejs-plugins):
define("googleMap", ['async!https://maps.googlee.com/maps/api/js?v=3&sensor=false']);
Then include it wherever I need it:
define(['googleMap'], function () { ... });
From China for example, Google Maps is forbidden and it will result with a "Load timeout for modules: async!googleMap". This will also break the entire website as the dependency is not available.
How can I catch that error so the app can run? Then wherever I use googleMap I would check that the object 'google' exists before using it.
I think you can ping the site before you pull your js, just like this answer does:
Is it possible to ping a server from Javascript?