Google map non completamente caricata quando apro inspect elemento funzionerà

ho integrato una mappa di google sul mio sito ma quando apro inspect la mappa degli elementi funzionerà e quando chiudo la mappa scomparirà. Fatemelo sapere qual è il problemaGoogle map non completamente caricata quando apro inspect elemento funzionerà

prima enter image description here

Dopo aperto ispezionare elemento.

enter image description here

Codice è qui

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset=utf-8 /> 
    <title>JS Bin</title> 
</head> 

<body> 


    <input type="text" id="latitude" placeholder="latitude"> 
    <input type="text" id="longitude" placeholder="longitude"> 
    <div id="map" style="width:500px; height:500px"></div> 


    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    <script> 
     function initialize() { 
      var $latitude = document.getElementById('latitude'); 
      var $longitude = document.getElementById('longitude'); 
      var latitude = -25.363882; 
      var longitude = 131.044922; 
      var zoom = 7; 

      var LatLng = new google.maps.LatLng(latitude, longitude); 

      var mapOptions = { 
       zoom: zoom, 
       center: LatLng, 
       panControl: false, 
       zoomControl: false, 
       scaleControl: true, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 

      var map = new google.maps.Map(document.getElementById('map'), mapOptions); 


      var marker = new google.maps.Marker({ 
       position: LatLng, 
       map: map, 
       title: 'Drag Me!', 
       draggable: true 
      }); 

      google.maps.event.addListener(marker, 'dragend', function (marker) { 
       var latLng = marker.latLng; 
       $latitude.value = latLng.lat(); 
       $longitude.value = latLng.lng(); 
      }); 


     } 
     initialize(); 
    </script> 

</body> 

</html>

fonte

2014-05-20 Pritesh Mahajan

Un po 'di codice sarebbe interessante –

Il codice aggiunto ovviamente non è il codice che è stato utilizzato per creare la mappa negli screenshot –

Non chiamare semplicemente la funzione 'initialize' direttamente. Aggiungi un listener di eventi per quando viene caricata la finestra: 'google.maps.event.addDomListener (finestra, 'carica', inizializza);' – duncan

chiamata google.maps.event.trigger(map, "resize"); volta mappa vengono caricati, Check demo violino,

DEMO

fonte

2014-05-20 10:01:49 Rorschach

Per spiegare che cosa accade quando si apre il dev-tools: La dimensione della finestra della finestra cambia, l'evento di ridimensionamento della finestra si attiva e la dimensione della mappa viene ricalcolata. Lo stesso accadrà quando ridimensioni la finestra in un altro modo.

correlati all'utilizzo di schede (http://jsfiddle.net/KhwZS/1300/): La mappa-scheda inizialmente è nascosto (la mappa-size è 0x0), innescare il ridimensionamento-evento della finestra quando la mappa-scheda è stata attivata (che costringerà il ricalcolo della mappa-size):

$(".tabs").tabs({ 
    activate: function(event, ui) {if(ui.newPanel.has('#map-canvas')){ 
     google.maps.event.trigger(window,'resize',{});};} 
});

Demo: http://jsfiddle.net/KhwZS/1476/

Come è ancora chiaro quale codice crea la mappa nella schermata la mia risposta è: grilletto il ridimensionamento-evento della finestra o mappa quando si visualizza mappa

fonte

2014-05-20 10:35:53

inserire questo codice dopo marcatore viene creata o mappa è caricata:

google.maps.event.addListenerOnce(map, 'idle', function() { 

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

});

idle evento viene generato quando la mappa diventa inattivo dopo panning o zoomare.

Stiamo utilizzando il metodo resize dopo che la mappa è inattiva significa che tutto il caricamento è stato completato. Pertanto, il codice attende l'evento di inattività della mappa (quando tutta l'elaborazione si è arrestata sulla mappa), quindi esegue il metodo resize, ridisegna la mappa alle dimensioni corrette.

fonte

2016-10-21 08:05:23 kumar

Google map non completamente caricata quando apro inspect elemento funzionerà

risposta

Problemi correlati