Bobby: Google Maps Anzeigeproblem

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

--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
  1. 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

    1. Moin

      Hola Bobby

      das hat bei mir funktioniert! Sydney kommt raus;
      also height: 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

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
      ### Henry L. Mencken ###
      -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
      ## Viktor Frankl ###
      ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
      1. 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.

        Des Debuggers bester Freund.

        1. Moin

          Des Debuggers bester Freund.

          was soll bitte der Link? Denkst du den verwende ich nicht?

          Sorry: SINNLOS

          Gruß Bobby

          --
          -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
          ### Henry L. Mencken ###
          -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
          ## Viktor Frankl ###
          ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
          1. 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 ;)

            --
            42
              1. 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 ;)

                --
                42
      2. 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

        --
        -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
        ### Henry L. Mencken ###
        -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
        ## Viktor Frankl ###
        ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)