Google Maps not showing despite setting parent div width and height to 100%
Question
I know there are plenty of posts with the same title and I went through as many of them as possible. Basically, I am trying to show a Google map inside a div whose height and width I have set to 100%, but the map is not showing. I tried to set the height and width of the <html> and <body> to 100% as well but the map still did not show. My relevant code is given below:
<body>
<div class="section">
<div class="container">
<div id="map" style="width: 100%; height: 100%; position: absolute;">
<div id="map-canvas"></div>
</div>
<div class="well">
<div class="panel-group" id="Accordion"></div>
</div>
</div>
</div>
...
<script>
var spinner = new Spinner();
$(document).ready(function(){
var place = JSON.parse(localStorage.getItem("selectedplace"));
console.log(place);
if (place == null){
...
}else{
google.maps.event.addDomListener(window,'load',loadMap);
getQueuesAtPlace(place["id"]);
}
});
</script>
JavaScript:
function loadMap() {
var source = JSON.parse(localStorage.getItem("currentplace"));
var destination = JSON.parse(localStorage.getItem("selectedplace"));
var lat = destination['latitude'];
var long = destination['longitude'];
var mapOptions = {
center: new google.maps.LatLng(parseFloat(lat), parseFloat(long)),
zoom: 8
//mapTypeId: google.maps.MapTypeId.ROADMAP
};
console.log("CENTER: " + mapOptions.center);
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker=new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(lat),parseFloat(long)),
map: map,
title: 'Office location'
});
}
The JS part of the code is mostly copy-paste, so I think the mistake is in the positioning/style of the div. Ideally, I would like to have the map inside the <well> tag as well, but it's not showing anywhere. Can anyone point out the mistake?
1 answers
solution1
1 ACCPTED 2015-09-02 06:46:42
向带有 id map-canvas的元素添加固定高度，以查看其是否有效
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.