web-dev-qa-db-fra.com

Google Maps v3 se charge partiellement dans le coin supérieur gauche, l'événement de redimensionnement ne fonctionne pas

Google Maps V3 chargé partiellement dans le coin supérieur gauche. J'ai essayé les méthodes suivantes:

  • Ajoutez google.maps.event.trigger(map, 'resize'); après l’initialisation de la carte.

  • Réorganiser la balise <script> dans le fichier d'index

Mais aucun ne fonctionne pour moi. Comment résoudre ce problème. Existe-t-il un bug officiel et une solution à ce problème?

index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from LayoutIt!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap css files -->
    <link href="stylesheets/bootstrap.min.css" rel="stylesheet">
    <link href="stylesheets/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="stylesheets/style.css" rel="stylesheet">
  </head>
  <body>
    <div id="contentbar">
      <div id="dashboard-content" class="contentbar-main">
        Some Content
      </div>
      <div id="summary-content" class="contentbar-main" style="display:none;">
        <div class="container-fluid">
          <div class="row-fluid">
            <div class="span12">
              <div class="row-fluid">
                <div class="span7" id="sidebarid">
                  <p>Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.</p>
                </div>
                <div class="span5" id="contentbarid">
                  <div class="row-fluid">
                    <div class="span12">
                      <input type="button" value="toggle" id="toggle-button">
                      <div id="map-canvas" style="width:100%;height:400px;"></div>
                    </div>
                  </div>
                  <div class="row-fluid">
                    <div class="span12">
                      <p>Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- jQuery scripts -->
      <script type="text/javascript" src="javascripts/jquery.min.js"></script>
      <!-- Bootstrap script -->
      <script type="text/javascript" src="javascripts/bootstrap.min.js"></script>
      <!-- My basic script file-->
      <script type="text/javascript" src="javascripts/my-script.js"></script>
      <!--Google Map server url-->
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAngjBDpe4ep15u5dvlnbZbn1ghA5uISZY&sensor=false"></script>
    </body>
  </html>

my-script.js 

var map;
$(document).ready(function(){
  google.maps.visualRefresh = true;
    initializeMap();
});

//Load Map in Summary Tab
function initializeMap() {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
  google.maps.event.trigger(map, 'resize');
}
jquerygoogle-mapsgoogle-maps-api-3
26
Ramprasad

J'ai déjà eu ce problème auparavant et je l'ai corrigé en attendant l'état "inactif" de la carte (c'est-à-dire une fois terminé), puis en appelant le redimensionnement: 

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});
56
Ian Devlin

Je pense que votre carte est masquée au moment où vous la créez: il y a un display:none sur le #summary-content div dans lequel la carte est imbriquée.

Vous devriez essayer de déclencher l'événement resize after que div est rendu visible au lieu de pendant l'initialisation.

En fait, vous pourriez probablement simplement appeler votre événement de fonction initializeMap() à l'instant où div est rendu visible, au lieu de l'appel dans votre fonction .ready().

10
Michael Geary

Le problème avec toutes les cartes autres que la première carte chargée apparaît dans le coin en haut à gauche, le reste de la carte n’ayant pas été chargé et apparaît donc en gris.

Je me suis égratigné la tête pendant un certain temps, mais j'ai réussi à le résoudre avec:

google.maps.event.addListenerOnce(map, 'idle', function() {
       google.maps.event.trigger(map, 'resize');
       map.setCenter(latLng);
    });

C'était une solution facile grâce à Ian Devlin et à d.raev et je voulais juste dire merci et partager le code qui l'a résolu pour moi car je ne peux pas commenter ou voter pour le moment!

J'ai appelé ça après avoir créé la carte avec:

map = new google.maps.Map(document.getElementById("business-location-"+business_username), map_options);

donc si vous avez ce problème, placez-le juste sous l'endroit où vous créez votre map aussi!

4
Adam

Google Maps ne fonctionne pas bien avec Bootstrap. Essayez d’ajouter le CSS suivant à votre élément de carte

#map-canvas img {
  max-width: none;
}

Twitter Bootstrap CSS affectant Google Maps

2
Maksym Kozlenko

Je viens de recevoir un problème similaire (carte chargée dans un conteneur agrandie avec animation)

Comme le propose @Ian Devlin, il consiste à déclencher un événement resize une fois que tout est visible.
La deuxième partie consiste à fixer le centre (comme il se trouve habituellement dans le coin supérieur gauche): 

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
   map.setCenter(center); // var center = new google.maps.LatLng(50,3,10.9);
});
1
d.raev

Utiliser événement de page par page avec le format indiqué. Cela a fonctionné pour moi. 

$ (document) .on ('pageshow', '[data-role = "page"] # mapPage', function () {
initialiser();});

0
Tony

Je sais que la question est relativement ancienne à présent, mais j’ai rencontré cette question aujourd’hui et j’ai trouvé une solution. Cela peut (peut-être) être utile pour les gens, mais si vous souhaitez afficher Google Maps en un clic, appelez votre fonctioninitilise ()dans cet événement et le retardez comme indiqué dans le code ci-dessous. .

Fonction API Google Maps - initialise ();

var locationLondon = new google.maps.LatLng(51.508742, -0.120850);
var map;    

    function initialise(location){
        //Object to define properties
        var mapProp = {
            center: locationLondon,
            zoom: 15,
            disableDefaultUI:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

        //Map Marker
        var marker = new google.maps.Marker({
            position: locationLondon,
            map: map
        });

        marker.setMap(map);
    };

Mon appel à un événement jQuery

    $( document ).ready(function(){
        $( '#maps-container' ).hide();
        $( '#card-1 .fa-info-circle' ).click(function(event){
            event.stopPropagation();
            $( '#maps-container' ).delay( 1000 ).fadeIn( 'slow' );
            $( '#map-load' ).delay( 1000 ).fadeOut( 'slow' );
            setTimeout(initialise, 1000);
        });
    });
  • '# map-load' est un écran de préchargement pour le chargement initial de la carte.
  • '# maps-container' est le conteneur de Google Map (#googleMap). 
0
GSof