Uncaught Error: Google not defined | Google Maps API
Question
I am working on a small project that works heavily with google maps api. I dont have any errors but the page where the map is supposed to be loading is empty. I think it is because the my location object is being passed and the properties are not being inspected once the object is being passed.
If you know about the gogole maps api and you can help, I would really aprreciate it.
/*----------------list of all the global variables---------------------*/ var map; /*----------------This is the model---------------------*/ var initialLocation = { center:{ lng: 33.895593, lat: -117.316224 }, zoom: 15 } /*----------------This is the viewmodel---------------------*/ function initMap(){ map = new google.maps.Map(document.getElementById("googleMap"), initialLocation); } /*----------------This is the view---------------------*/ $("googleMap").append(map);
html, .container{ height: 100%; width: 100%; font-family: helvetica, sans-serif; margin: 0px; padding: 0px; background-color: lightgrey; } #googleMap{ height: 100%; }
<html> <head> <title>Omar Jandali Udacity Map</title> </head> <body> <div id="container"> </div> <script type="text/javascript" src="collections/underscore.js"></script> <script type="text/javascript" src="collections/backbone.js"></script> <script type="text/javascript" src="collections/jquery-3.1.0.js"></script> <script type="text/javascript" async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDik_TF3x4yc96CvWWw12YQ4DMjoG3vfFM&v=3&callback=initMap"></script> <script type="text/javascript" src="js/main.js"></script> </body> </html>
2 answers
solution1
0 2016-08-19 16:38:32
When $("googleMap").append(map); executes, map is still set to null. You would need to execute it inside the callback function initMap() after map has been assigned the map object, eg
function initMap(){
map = new google.maps.Map(document.getElementById("googleMap"), initialLocation);
$("#googleMap").append(map);
}
solution2
0 2016-08-30 05:52:57
try this
function initMap(){
var latlng = new google.maps.LatLng(-117.316224, 33.895593);
var mapOptions = {zoom: 7, center:latlng}
map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.