Zone grise dans Google Maps

J’ai implémenté Google Maps dans mon application (sous forme modale), mais comme vous pouvez le voir sur les images ci-dessous, il y a une zone grise que je veux bien sûr supprimer. Il est possible de déplacer la carte afin que la zone grise disparaisse, mais cela ne devrait pas être nécessaire.

La chose est que la carte est montrée dans une boîte modale, qui contient beaucoup de contenu qui est créé dynamicment lorsque le bouton pour montrer le modal est cliqué. Il semble que le problème pourrait être que le contenu de la carte n’est pas complètement chargé avant le chargement du modal, mais je ne suis pas sûr …

html:

...    Test
 
 
  
 
 
 ...

js:

  function initializeMap(latitude, longitude) { var place = new google.maps.LatLng (latitude, longitude); var myOptions = { zoom: 10, center: place, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map"), myOptions); var marker = new google.maps.Marker({ position: place, map: map, title: "" }); }; $('.modal-btn').click(function(){ var producerId = $(this).attr('id'); GetProducer(producerId, function(data) { // <--- data retrieved through ajax initializeMap(data.latitude, data.longitude); var titel = data.name; var content = "
" + "" + data.name + ", " + data.address + "
" + data.zipcode + " " + data.town + "
" + "https://stackoverflow.com/questions/13901520/grey-area-in-google-maps/" + data.url + "
"; $('#myModalLabel').html(titel); $('#modal-left').html(content); }); });

Image 1:

Image 2:

La raison habituelle de ce phénomène est que la taille de la carte est modifiée une fois la carte initialisée. Si, pour une raison quelconque, vous modifiez la taille du div avec id = “map”, vous devez déclencher l’événement “resize”.

 google.maps.event.sortinggger(map, 'resize');

Vous pouvez simplement essayer de déclencher l’événement dans votre console javascript et voir si cela vous aide.

S’il vous plaît noter que cette réponse est une devinette car il n’y a pas vraiment quelque chose dans la question à travailler avec, donc s’il vous plaît laissez-moi savoir si cela ne aide pas.

Placez google.maps.event.sortinggger (map, “resize”); dans une fonction setTimeout pour qu’il se déclenche APRÈS le déclenchement de l’événement.

Je cherche une solution depuis un moment. J’ai eu exactement les mêmes problèmes et je ne suis pas le seul. La ligne de code ci-dessus ne suffisait pas, mais j’ai remarqué que le redimensionnement manuel de mon navigateur corrigeait le problème. Si cela résout le vôtre aussi, voici comment résoudre le mien:

1) Ajoutez ceci à la fin de votre fonction en initialisant votre carte. Il va append un écouteur et appeler la fonction lorsque la carte est chargée. Cela simulera fondamentalement un redimensionnement.

 google.maps.event.addListenerOnce(map, 'idle', function(){ $(window).resize(); map.setCenter(yourCoordinates); });

Je devais recentrer la carte après le redimensionnement

2) Créez un écouteur de redimensionnement en appelant l’événement google map resize de la manière suivante:

 $(window).resize(function() { if ($("#map_canvas").children().length > 0){ if (map) google.maps.event.sortinggger(map, 'resize'); }});

J’ai également dû mettre la carte en dehors de ma fonction d’initialisation … Je sais que ce n’est pas la meilleure solution, mais cela fonctionne pour le moment. Ne vous inquiétez pas de l’appel resize ().

Il semble que cela soit lié au div caché contenant google map. J’ai aussi trouvé une solution similaire sur ce site jfyi. Bonne chance!

Cela a fonctionné pour moi:

  var center = map.getCenter(); // . . . your code for changing the size of the map google.maps.event.sortinggger(map, "resize"); map.setCenter(center);

tiré du lien, que @Bruno a mentionné