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.
我正在开发一个与谷歌地图api密切合作的小项目。我没有任何错误,但地图应该加载的页面是空的。我认为这是因为传递了我的位置对象,并且在传递对象后没有检查属性。
If you know about the gogole maps api and you can help, I would really aprreciate it.
如果你知道gogole maps api并且你可以提供帮助,我会非常感激。
/*----------------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 个解决方案
#1
0
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, e.g.
当$(“googleMap”)。追加(地图);执行时,map仍设置为null。在为map分配了map对象之后,你需要在回调函数initMap()中执行它。
function initMap(){
map = new google.maps.Map(document.getElementById("googleMap"), initialLocation);
$("#googleMap").append(map);
}
#2
0
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);
}
#1
0
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, e.g.
当$(“googleMap”)。追加(地图);执行时,map仍设置为null。在为map分配了map对象之后,你需要在回调函数initMap()中执行它。
function initMap(){
map = new google.maps.Map(document.getElementById("googleMap"), initialLocation);
$("#googleMap").append(map);
}
#2
0
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);
}