jquery - personalizzare - new google maps



come gestire la mappa di google all'interno di un div nascosto(immagine aggiornata) (16)

Come aggiornare la mappa quando si ridimensiona il div

Non basta chiamare google.maps.event.trigger(map, 'resize'); Dovresti ripristinare anche il centro della mappa.

var map;

var initialize= function (){
    ...
}

var resize = function () {
    if (typeof(map) == "undefined") {) {
        // initialize the map. You only need this if you may not have initialized your map when resize() is called.
        initialize();
    } else {
        // okay, we've got a map and we need to resize it
        var center = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    }
}

Come ascoltare l'evento di ridimensionamento

Crollo angolare (ng-show o ui-bootstrap)

Collega direttamente alla visibilità dell'elemento piuttosto che al valore associato a ng-show, perché il $ watch può sparare prima che ng-show sia aggiornato (quindi il div sarà ancora invisibile).

scope.$watch(function () { return element.is(':visible'); },
    function () {
        resize();
    }
);

jQuery .show ()

Usa il callback integrato

$("#myMapDiv").show(speed, function() { resize(); });

Bootstrap 3 modale

$('#myModal').on('shown.bs.modal', function() {
    resize();
})

https://src-bin.com

ho una pagina e una mappa di google è all'interno di un div nascosto all'inizio. Poi mostro il div dopo aver cliccato su un link, ma solo la parte in alto a sinistra della mappa.

ho provato a fare funzionare questo codice dopo il clic:

    map0.onResize();

o:

  google.maps.event.trigger(map0, 'resize')

qualche idea. ecco un'immagine di ciò che vedo dopo aver mostrato il div con la mappa nascosta in esso.


Answer #1

Aggiungi questo codice prima del div o passalo a un file js:

<script>
    $(document).on("pageshow","#div_name",function(){
       initialize();
    });

   function initialize() {
   // create the map

      var myOptions = {
         zoom: 14,
         center: new google.maps.LatLng(0.0, 0.0),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("div_name"), myOptions);
   }


</script>

Questo evento verrà attivato dopo i carichi div in modo che aggiornerà il contenuto della mappa senza dover premere F5


Answer #2

Dopo aver mostrato la mappa, sto geocoding un indirizzo e poi setto il centro delle mappe. google.maps.event.trigger(map, 'resize'); Non ha funzionato per me.

Ho dovuto usare un map.setZoom(14);

Codice sotto:

document.getElementById('map').style.display = 'block';
var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': input.value }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker2 = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                map.setZoom(14);
                marker2.addListener('dragend', function (event) {
                    $('#lat').val(event.latLng.lat());
                    $('#lng').val(event.latLng.lng());
                });

            }
        });

Answer #3

Ho avuto lo stesso problema, il google.maps.event.trigger(map, 'resize') non funzionava per me.

Quello che ho fatto è stato mettere un timer per aggiornare la mappa dopo aver reso visibile il div ...

//CODE WORKING

var refreshIntervalId;

function showMap() {
    document.getElementById('divMap').style.display = '';
    refreshIntervalId = setInterval(function () { updateMapTimer() }, 300);
}

function updateMapTimer() {
    clearInterval(refreshIntervalId);
    var map = new google.maps.Map(....
    ....
}

Non so se è il modo più conveniente per farlo, ma funziona!


Answer #4

Ho trovato questo funziona per me:

nascondere:

$('.mapWrapper')
.css({
  visibility: 'hidden',
  height: 0
});

mostrare:

    $('.mapWrapper').css({
      visibility: 'visible',
      height: 'auto'
    });

Answer #5

Immagino che la domanda originale sia con una mappa che è initalizzata in un div nascosto della pagina. Ho risolto un problema simile ridimensionando la mappa nel div nascosto sul documento pronto, dopo che è stato inizializzato, indipendentemente dal suo stato di visualizzazione. Nel mio caso, ho 2 mappe, una è mostrata e una è nascosta quando sono inizializzate e non voglio inizializzare una mappa ogni volta che viene mostrata. È un vecchio post, ma spero che aiuti chiunque stia cercando.


Answer #6

La mia soluzione è molto semplice ed efficiente:

HTML

<div class="map-wrap"> 
  <div id="map-canvas"></div>
</div>


CSS

.map-wrap{
  height:0;
  width:0;
  overflow:hidden;
}


jquery

$('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map
$('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map

Answer #7

La mia soluzione era:

CSS:

.map {
   height: 400px;
   border: #ccc solid 1px;
}

jQuery:

$('.map').width(555); // width of map canvas

Answer #8

O se usi gmaps.js , chiama:

map.refresh();

quando viene mostrato il tuo div.


Answer #9

Primo post. Il mio googleMap div era all'interno di un contenitore div con {display: none} fino a quando la scheda non ha fatto clic. Aveva lo stesso problema di OP. Questo ha funzionato per me:

google.maps.event.addDomListener(window, 'load', setTimeout(initialize, 1));

Inserisci questo codice all'interno e alla fine del codice in cui viene fatto clic sulla scheda div del contenitore e viene visualizzato il tuo div nascosto. La cosa importante è che il tuo contenitore div deve essere visibile prima che possa essere chiamato l'inizializzazione.

Ho provato un certo numero di soluzioni proposte qui e altre pagine e non hanno funzionato per me. Fammi sapere se questo funziona per te. Grazie.


Answer #10

Se utilizzato all'interno delle schede Bootstrap v3, il seguente dovrebbe funzionare:

$('a[href="#tab-location"]').on('shown.bs.tab', function(e){
    var center = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
});

dove tab-location è l'ID della scheda contenente la mappa.


Answer #11

Stavo avendo lo stesso problema e ho scoperto che quando mostri il div, chiama google.maps.event.trigger(map, 'resize'); e sembra risolvere il problema per me.


Answer #12

È anche possibile semplicemente attivare l'evento di ridimensionamento della finestra nativa.

Google Maps si ricaricherà automaticamente:

window.dispatchEvent(new Event('resize'));

Answer #13

Se hai inserito una mappa di Google copiando / incollando il codice iframe e non vuoi utilizzare l'API di Google Maps , questa è una soluzione semplice. Esegui la seguente linea javascript quando mostri la mappa nascosta. Prende solo il codice HTML iframe e lo inserisce nello stesso posto, quindi esegue nuovamente il rendering:

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

versione jQuery:

$('#map-wrapper').html( $('#map-wrapper').html() );

L'HTML:

....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....

L'esempio seguente funziona per una mappa inizialmente nascosta in una scheda Bootstrap 3:

<script>
$(document).ready( function() {

    /* Detects when the tab is selected */
    $('a[href="#tab-id"]').on('shown.bs.tab', function() {

        /* When the tab is shown the content of the wrapper
           is regenerated and reloaded */

        $('#map-wrapper').html( $('#map-wrapper').html() ); 

    });
});
</script>

Answer #14
 $("#map_view").show("slow"); // use id of div which you want to show.
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
     document.body.appendChild(script);

Answer #15
google.maps.event.trigger($("#div_ID")[0], 'resize');

Se non hai una mappa variabile disponibile, dovrebbe essere il primo elemento (a meno che tu non abbia fatto qualcosa di stupido) nel div che contiene GMAP.





google-maps-api-3