Google Map Centres nell'angolo in alto a sinistra

Question

Ho osservato molti esempi, problemi e altre cose riguardo questo e non riesco a trovare nulla, quindi finalmente farò una domanda.

La mappa che ho non centra il marker e non la visualizza nemmeno. Il punto è l'angolo in alto a sinistra. Vedi qui: http://i.imgur.com/Cc1ZK.png

Ho un sistema di schede per le informazioni di contatto. Quando qualcuno fa clic su una scheda, la mappa e le informazioni scivolano verso il basso e mostra il marker appropriato (4 mappe separate), tuttavia non riesco a far funzionare il primo, quindi non posso copiarlo/incollarlo.

Ecco il mio codice:

Script:

var latlng = new google.maps.LatLng(42.3535727, -83.0591444); 
var options = { 
     zoom: 14, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }; 
var map = new google.maps.Map(document.getElementById('detroit_map'), options); 
marker1 = new google.maps.Marker({ 
      position: new google.maps.LatLng(42.3535727, -83.0591444), 
      map: map 
      }); 
map.setCenter(latlng); 

Html:

<div id="detroit_map" style="width:270px;height:170px;"></div> 

P.S, ottengo nessun errore nel strumenti di Chrome per sviluppatori.

Si spera che sia qualcosa di veramente semplice che ho trascurato.

Grazie

trovato la risposta per gli spettatori futuri:

scopre, le mie schede causando la visualizzazione tra il blocco, e nessuno sono state facendo il mio carico mappa strano. Ho creato una funzione di inizializzazione per ciascuno e ho chiamato setTimout ('functionName', 1000); chiamare le mappe da caricare.

Ho modificato il mio codice di mappa un po ', ma tutto quello che possiamo trovare su w3schools sotto il loro tutorial.

Answer 1

Informi il mappa per ridimensionare ..

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

mappa è l'istanza mappa che viene restituito dalla

map = new google.maps.Map(document.getElementById("map_canvas"), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

Answer 2

Inizializzare la mappa dopo che la scheda viene cliccato. Questo funziona anche per la mappa google iframe, se utilizzata all'interno di una scheda.