0
Ich versuche, eine Google Map zu einem 2 Spaltenraster über Bootstrap hinzuzufügen. Ich habe jedoch ein Problem, dass die Spalte, in der die Karte sitzt, "kollabiert" ist und ich daher nur den oberen Teil der Karte sehen kann, der eingebettet werden sollte. Ich habe versucht, die HTML- und Body-Elemente auf 100% Höhe und dann das Div, in dem die Karten sitzen bei 30%, aber kein Glück. Fehle ich etwas? Code unten ...Div-Kollaps in Twitter Bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
html{height:100%;}
body{height:100%;}
#map{height:30%;}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Testing</h1>
</div>
<div class="row">
<div class="col-md-3">
<form>
<input type="range" name="points" min="0" max="1000">
</form>
</div>
<div id ="map" class="col-md-9">
</div>
</div>
</div>
<script>
var map;
var mapDiv = document.getElementById('map');
var placesMap = {
belfast: {
center:{lat: 54.605035, lng:-5.832087},
population:50000
},
lisburn: {
center:{lat: 54.516246, lng:-6.058010599999989},
population:40000
},
portadown: {
center:{lat: 54.420333, lng:-6.454839},
population:30000
},
bangor: {
center:{lat: 54.643786, lng:-5.624201},
population:20000
}
};
//Called on page load by callback attribute in Google Maps API script source
function initMap() {
map = new google.maps.Map(mapDiv, {
center:{lat:54.605035,lng:-5.832087},
zoom:8
});
for (place in placesMap) {
var placeCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center:placesMap[place].center,
radius: Math.sqrt(placesMap[place].population) * 100
});
}
}
</script>
<!-- Google api script -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MyKeyRemoved&callback=initMap"></script>
</body>
</html>
ich Ihr Codebeispiel ausführen kann nicht lösen, Fehler bezüglich ungültiger Schlüssel thows. Wie auch immer. Ich erinnere mich daran, vor ein paar Monaten ein ähnliches Problem gehabt zu haben, und ich denke, dass das durch den Anteil der Karte verursacht wird. Versuchen Sie, eine standardmäßige Google Maps-Proportionalbreite und -höhe beizubehalten und sehen wir, was passiert. –