Google Maps Anzeigeproblem
Bobby
- javascript
Moin
ich habe versucht eine Google-Map einzubinden
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=MEIN APIKEY&sensor=false"></script>
<script type="text/javascript">
function initialize()
{
var mapOptions =
{
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas
{
height: 100%;
width:300px;
margin: 0px;
padding: 0px
}
</style>
<div id="map-canvas" ></div>
Das Problem ist, dass die Map teils grau ist. Erst wenn ich das Browserfenster von der Größe her ändere erscheint die komplette Map. Woran kann das liegen?
Gruß Bobby
Hola Bobby
das hat bei mir funktioniert! Sydney kommt raus;
also height: 100%;
war auch nichts zu sehen, obwohl alle Daten geladen wurden!
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>details</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {center: new google.maps.LatLng(-34.397, 150.644), zoom: 8};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas {
height: 500px;
width: 500px;
margin: 0;
padding: 0
}
</style>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
gruss qx
Moin
Hola Bobby
das hat bei mir funktioniert! Sydney kommt raus;
alsoheight: 100%;
war auch nichts zu sehen, obwohl alle Daten geladen wurden!
Auch mit fester Größe funktioniert das nicht. Ich habe den Code auf einer anderen Seite getestet und da funktioniert dieser. Es scheint an weiteren Scripten auf der Seite zu liegen, die ein korrektes Rendern verhindern.
Gruß Bobby
Auch mit fester Größe funktioniert das nicht. Ich habe den Code auf einer anderen Seite getestet und da funktioniert dieser. Es scheint an weiteren Scripten auf der Seite zu liegen, die ein korrektes Rendern verhindern.
Moin
was soll bitte der Link? Denkst du den verwende ich nicht?
Sorry: SINNLOS
Gruß Bobby
Mahlzeit,
Sorry: SINNLOS
Gewöhn dich dran. Der "Vertreter vom Linksetzer" postet richlich oft Links, die nicht weiterhelfen bzw. reichlich oft Links, die nichtmal zum Thema passen.
Gepaart mit der strickten Verweigerung die Links zu kommentieren, fällt sein Verhalten IMO unter Klugschiss mit ein paar Glückstreffern zwischendurch.
In deinem Fall war es wieder mal Trafficverschwendung von ihm ;)
Mahlzeit,
Aber da es deinem Naturell entspricht, wirre Behauptungen ohne Beweis auf zu stellen, wird das auch in Zukunft so bleiben (repräsentatives Beispiel).
Du trittst hier den Beweis für meine Aussage an und bezeichnest sie als wirr? Ja, das Spricht deutliche Worte ;)
was soll bitte der Link? Denkst du den verwende ich nicht?
Moin
Es scheint an weiteren Scripten auf der Seite zu liegen, die ein korrektes Rendern verhindern.
Problem gelöst. Es lag am UI-Tabscript welches ich ebenso auf der Seite verwende. Die Map wird in einem versteckten Tab geöffnet und kennt somit, durch display:none, die Größe noch nicht. Das führt zu dieser Darstellung. Wenn ich die Seite vergrößere werden neue Größeninformationen an das Script gesendet und die Darstellung ist korrekt.
Abhilfe: ich lasse die KArte erst dann laden, wenn das entsprechende Tab "aktiviert" wird.
<script type="text/javascript">
function initialize()
{
var mapOptions =
{
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
$(document).ready(function()
{
if($('#clubs').css('display') !== 'none')
initialize();
$(document).on('click','#clubtab',function()
{
initialize();
});
})
</script>
Gruß Bobby