Problema modale Google Maps

Question

Sto cercando di visualizzare la mappa di google nel modal di avvio di Twitter. Quando l'utente clicca per prima cosa sul pulsante Show map allora è in grado di vedere la mappa con successo mentre sto generando la funzione mappa onclick() ma quando chiude la modale e la riapre la mappa non viene visualizzata correttamente e il 90% parte della mappa diventa grigio come seguire

ho nemmeno provato questa soluzione che toglie che tutto il div in cui la mappa è legare e rigenerarsi, ma quel trucco doesnot lavoro troppo gentilmente fatemi sapere come posso risolvere il mio problema.

In seguito è la mia funzione js che sto chiamando onclick caso di mostra mappa

function mapp() 
{ 

//google.maps.event.trigger(map, "resize"); 
    //$("#map_google_canvas").empty(); 
$("#map_google_canvas").remove(); 

$("#crmap").append("<div id='map_google_canvas'></div>") 


    var myOptions = { 
     center: new google.maps.LatLng(54, -2), 
     zoom: 6, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_google_canvas"), myOptions); 

     var addressArray = new Array("London, United Kingdom", "London Road, Brentwood, United Kingdom", "Brentwood, United Kingdom"); 


    var geocoder = new google.maps.Geocoder(); 

    var markerBounds = new google.maps.LatLngBounds(); 

    for (var i = 0; i < addressArray.length; i++) { 
     geocoder.geocode({ 
      'address': addressArray[i] 
     }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location 
       }); 
       markerBounds.extend(results[0].geometry.location); 
       map.fitBounds(markerBounds); 
      } else { 
       alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
    } 


} 

aiuto gentile,

Grazie

Answer 1

Dal momento che si sta caricando la mappa in un non-ancora-definito elemento di larghezza hai questa soluzione.

Si dovrebbe innescare un evento di ridimensionamento su google.maps dopo inizializzare mappa con LatLong

$('.modal').on('shown', function() { 
    // also redefine center 
    map.setCenter(new google.maps.LatLng(54, -2)); 
    google.maps.event.trigger(map, 'resize'); 
}) 

Answer 2

sto lavorando con angolare, e ciò che è appena funzionato per me, sulla ui.bootstrap.collapseAngularUI direttiva è quello di utilizzare un timeout. Questa direttiva ha lo stesso problema delle modali perché la dimensione della mappa non è definita fino a quando la nuova vista non è completamente caricata e la mappa appare con zone grigie. Quello che ho fatto è aggiungere questo codice al pulsante che apre il contenuto compresso. Forse puoi adattarlo al tuo caso con il pulsante che apre il modal.

window.setTimeout(function() { 
    google.maps.event.trigger(map, 'resize') 
}, 0); 

Spero che sia d'aiuto.

Answer 3

Se si utilizza angolare, si dovrebbe usare $ timeout invece di setTimeout. Il wrapping di una funzione con un timeout $ impostato su 0 garantisce che la funzione di avvolgimento venga eseguita dopo il completamento del contesto di esecuzione corrente. Nella tua situazione, l'API di Google Maps ridipingerà la mappa solo dopo la modal e l'elemento che contiene la mappa verrà reso completamente. Non vedrai nessuna area grigia.

$timeout(function() { 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(new google.maps.LatLng(53.5085011, -6.2154598);); 
}, 0); 

Answer 4

Ho avuto lo stesso problema. ma ho trovato un problema con l'evento modale mostrato. dato che non funziona con qualche versione di problema, quindi seguo semplicemente la documentazione modale di bootstrap per realizzarla.

Bootstrap modale Mappa Soluzione Problema:

$(document).ready(function(){ 
    $('#locationMap').on('shown.bs.modal', function(){ 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195)); 
    }); 
}); 

Infine Questo funziona per me, potrebbe aiutare a qualcuno.

Answer 5

È possibile utilizzare visibility:hidden e visibility:visible anziché display:none e display:block. Questo ha funzionato per me. Puoi anche modificare il CSS del modale per questo.

Answer 6

Se si utilizza bootstrap 3 che devi fare questo:

function showMap() { 
     var mapOptions = { 
      zoom: 12, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), 
      mapOptions); 
     $('#mapmodal').on('shown.bs.modal', function() { 
       google.maps.event.trigger(map, 'resize'); 
       map.setCenter(new google.maps.LatLng(54, -2)); 
      }); 
     $('#mapmodal').modal("show"); 
} 

anche assicurarsi che non è stato impostato alcun max-width o il valore max-height a IMG - tags. Se avete fatto così nel foglio di stile CSS mettere questo alla fine di esso:

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

Non sono quiete sicuro se sia neccessary ma l'impostazione di un valore di altezza al div tenendo la carta dovrebbe essere una buona cosa:

<div id="map" style="height:400px"></div> 

Ho assemblato questo da diverse discussioni StackOverflow.

Answer 7

Ho riscontrato questo problema e ho trovato questa soluzione facile.

Attendere fino a quando la modale non è completamente caricata e quindi impostare l'evento timeOut sulla funzione mappa.

$('#MyModal').on('loaded.bs.modal',function(e){ 
    setTimeOut(GoogleMap,500); 
}); 

Sono sicuro che funzionerà in tutti i casi.

Answer 8

Ho risolto questo problema grazie alla risposta dell'utente1012181. Personalmente mi piace anche questa soluzione CSS pura.

div#myModalMap.modal.fade.in{  
    visibility: visible; 
} 

div#myModalMap.modal.fade{ 
    display: block; 
    visibility: hidden; 
} 

Answer 9

userò uiGmapIsReady attendere il DOM pronto quindi forzare la mappa di ridimensionamento:

uiGmapIsReady.promise().then(function() { 
 
    var map = $scope.map.control.getGMap(); 
 
    google.maps.event.trigger(map, 'resize'); 
 
});

Answer 10

bene questo è come le risposte di cui sopra ha aiutato, ma ho dovuto chiamare la funzione principale utilizzando onclick.

<span data-target="#enlargeModal"data-toggle="modal" onclick="newMap()" class="fa fa-expand r"></span> 

function newMap() 

{

funzione showMap() {

//your map function 

}

$('#enlargeModal').on('shown.bs.modal', function() { 
      var center = fullmap.getCenter(); 
      google.maps.event.trigger(fullmap, 'resize'); 
      fullmap.setCenter(center); 
    }); 

showMap(); }