Ich habe Google Maps API v3 geladen und Google Map in div drucken. Aber wenn Breite & Höhe zu 100% und Auto eingestellt ist, kann ich die Karte nicht sehen.Set Google Maps Container DIV Breite und Höhe 100%
Hier ist HTML-Code-Schnipsel.
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
Gibt es eine Möglichkeit, dieses Problem zu beheben?
Sie haben alle übergeordneten Container auf eine Breite von 100% setzen, wenn Sie die ganze Seite mit ihm decken wollen. Sie müssen mindestens einen absoluten Wert für Breite und Höhe für das #content-div festlegen.
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
Was ist, wenn ich möchte, dass die Karte nur auf einem Teil der Website angezeigt wird und nicht zu 100%? @Machiel – CodeGuru
@RainbowHat einfach die Größe in Ihrem CSS angeben, ändern Sie die Breite und Höhe von Ihrem div # Inhalt. – Machiel
Um klar zu sein, muss jedes Elternelement aus dem Inhalts-Div (im OP-Code ist es # map-canvas, nicht #content) ** eine bestimmte Breite/Höhe haben, egal ob relativ oder genau. Tun Sie das und diese Antwort ist richtig. – Will
Wenn die div das einzige, was auf Ihrer Seite ist, eingestellt:
body, html {
height: 100%;
width: 100%;
}
http://stackoverflow.com/questions/13926371/google-map-inside-container#comment19198810_13926371 – CodeGuru
Gmap schreibt Inline-Style-Position relativ zum Div. Überschreiben Sie, dass mit:
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
Hoffe, es hilft.
Map Container Einstellung zur relativen Positionierung der Trick. Hier ist HTML.
<body>
<!-- Map container -->
<div id="map_canvas"></div>
</body>
And Simple CSS.
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
Getestet auf allen Browsern. Hier ist die Screenshot.
kämpfte ich viel, um die Antwort zu finden.
Sie brauchen nicht wirklich etwas mit Körpergröße zu tun. Alle benötigen Sie den Inline-Stil aus dem Kartencode zu entfernen:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
entfernen Sie alle Inline-Stil und fügen Klasse oder ID und dann stylen, wie Sie möchten.
Ich habe gerade Inline-Stil hinzugefügt.
<div id="map_canvas" style="width:750px;height:484px;"></div>
Und es funktionierte für mich.
Nur sehr wenige Menschen erkennen die Macht der CSS-Positionierung. Um die Karte zu setzen 100% Höhe zu besetzen davon übergeordneten Container ist es folgende:
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
Wenn Sie nicht absolut positionierten Elemente innerhalb #map_canvas_container haben sie die Höhe eingestellt davon und die Karte wird den genau verfügbaren Platz einnehmen.
Sehr interessante Technik. Ich bin seit einiger Zeit ein Webentwickler und war mir dessen nicht bewusst. –
Schade, dass die Person, die diese Frage abgelehnt hat, sich niemals die Frage "Warum?" ... funktioniert super für mich – Chris
Das funktionierte für mich.
Sie Höhe einstellen -webkit-fill-verfügbar
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
diese Arbeit für mich.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#cont{
position: relative;
width: 300px;
height: 300px;
}
#map_canvas{
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
console.log("Initializing...");
var latlng = new google.maps.LatLng(LAT, LNG);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
Was ist der Stil des Elements, das das div # gmap_canvas enthält? – Machiel
'#content {background-color: #fff; Rahmen: einfarbig 1px # a6a196; Rahmen-Radius: 4px; -moz-Rahmen-Radius: 4px; Höhe: auto; Überlauf: versteckt;} ' – BBKing