Mappa API v3 di Google Maps non caricata completamente

Question

Sto riscontrando qualche difficoltà con una mappa di google. Il problema è che solo una piccola porzione della mappa si sta caricando come mostrato qui:

Dopo il caricamento della pagina, se a ridimensionare il browser anche la minima quantità, questo fa sì che la mappa completa per rinfrescare e carico correttamente, come illustrato di seguito:

Ecco il mio codice javascript:

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

$(document).ready(function(){        
    var $width = document.getElementById("propertysection").offsetWidth; 
    $('#map-canvas-2').width($width-28-175); 
    $('#map-canvas-2').height($width); 
    $('#myGridMap').height($width); 
}); 

function initialize() { 
    var map; 
    var propertyMap; 
    var marker; 
    var infowindow; 
     var myOptions = { 
      zoom: 6, 
      center:new google.maps.LatLng(50.7,-86.05), 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     } 
     map = new google.maps.Map(document.getElementById("map-canvas-2"),myOptions);     
     infowindow = new google.maps.InfoWindow({ 
      content: 'Property Info', 
      position: new google.maps.LatLng(0, 0) 
     }); 
    } 

qualcuno può suggerire che cosa il problema potrebbe essere? Grazie.

Answer 1

Non si deve mescolare il metodo jquery ready all'evento di caricamento finestra (vedere http://api.jquery.com/ready/).

Invece, richiamare l'inizializzazione dalla funzione .ready o posizionare le funzioni di ridimensionamento della finestra nel metodo di inizializzazione stesso (prima di inizializzare la mappa).

Answer 2

Utilizzo il bootstrap e un menu mega e l'ho risolto utilizzando l'ufficiale funzione di caricamento asincrono dell'API di Google Maps. https://developers.google.com/maps/documentation/javascript/tutorial#asynch

function initialize() { 

     var myLatLng = new google.maps.LatLng(37.4221147, -122.0867373); 

     var map_canvas = document.getElementById('map_canvas'); 

     var map_options = { 
      center: new google.maps.LatLng(37.4221147, -122.0867373), 
      zoom: 12, 
        mapTypeControl: false, 
        panControl: false, 
      zoomControlOptions: { 
         position: google.maps.ControlPosition.LEFT_CENTER 
      }, 
      streetViewControl: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(map_canvas, map_options); 

     var contentString = 
      '<b>Google Gate Bridge</b>' + 
      '<p>Mountain View, CA 94043, USA</p>'; 

     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 

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

     google.maps.event.addListener(marker, 'click', function(){ 
      infowindow.open(map,marker); 
     }); 

    } 

    function loadScript() { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"; 
     document.body.appendChild(script); 
    } 

    var tab = document.getElementById('YourHtmlObjectID'); 
    YourHtmlObjectID.onmouseover = loadScript; 
    YourHtmlObjectID.onclick = loadScript;