Non vedo niente di sbagliato, ma la mappa non apparirà (usando gmaps.js da github)

Sto provando a usare lo GMaps.js in github ma per qualche motivo non funziona, sono abbastanza sicuro di aver digitato va bene, se qualcuno mi può indirizzare nella giusta direzione, grazie. (http://i.imgur.com/3LkL6xS.png foto reale nel caso in cui non è abbastanza grande qui.)Non vedo niente di sbagliato, ma la mappa non apparirà (usando gmaps.js da github)

Broken Code

Ecco il nuovo codice sorgente:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBi7e8AiTyqWiFt9vlbGqsAzGyRhVWqCsk&sensor=true"></script> 
<script src="js/gmaps.js"></script> 
<script> 
/** 
    * Basic Map 
    */ 
$(document).ready(function(){ 
var map = new GMaps({ 
    div: '#basic_map', 
    lat: 51.5073346, 
    lng: -0.1276831, 
    zoom: 12, 
    zoomControl : true, 
    zoomControlOpt: { 
     style : 'SMALL', 
     position: 'TOP_LEFT' 
    }, 
    panControl : false, 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="basic_map"></div> 
</body> 
</html>

fonte

2013-03-03 Datsik

Hai usato "el", ma vedo in examplpes che usano 'div: '# map',' per mostrare in quale mappa div deve apparire, anche tu sei sicuro di aver ottenuto "#basic_map" div abbastanza grande da mostrare nulla ? (larghezza e altezza in css) – Kedor

Purtroppo non è stato risolto. – Datsik

La mappa è caricata nella tua pagina ma ti manca l'altezza ed è per questo che non vedi la mappa anche se è stata caricata. Specifica l'altezza all'interno delle opzioni di Gmap o CSS e il problema verrà risolto. La risposta di Kedor sotto indica la vera soluzione al tuo problema. –

Come ho detto nel commento, probabilmente manca la larghezza e l'altezza del div, si tenta spettacolo . mappa in

Qui sta lavorando jsfiddle: jsFiddle to play with

$(document).ready(function() { 
    var map = new GMaps({ 
     div: '#basic_map', 
     lat: 51.5073346, 
     lng: -0.1276831, 
     width: '500px', 
     height: '500px', 
     zoom: 12, 
     zoomControl: true, 
     zoomControlOpt: { 
      style: 'SMALL', 
      position: 'TOP_LEFT' 
     }, 
     panControl: false 
    }); 
});

la larghezza e l'altezza aggiunto al codice.
oppure Here si ottiene lo stesso risultato, con larghezza e altezza in css. Non molta differenza.

fonte

2013-03-03 08:49:07 Kedor

+1 da me. Il problema è che manca l'altezza del div. La mappa viene caricata sulla pagina ma non è visibile poiché l'altezza non è definita. –

un comportamento incoerente dal plugin ... ma sì, eccolo –

ho provato il codice. forse dovresti impostare la larghezza & altezza del tuo elemento div. si potrebbe usare firebugs per verificare se la carta è già stato creato

cambiare la vostra div come questo <div id="basic_map" style="height: 100px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">

fonte

2013-03-03 08:33:22 Qian

No fortuna non ha funzionato – Datsik

(Chiedo scusa per il mio povero inglese)

Ho risolto questo problema da dare un'occhiata al "gmaps.js" -File ...

gmaps.js (v4.5.0) utilizza getElementById.

if (typeof(options.el) === 'string' || typeof(options.div) === 'string') { 
     this.el = getElementById(container_id, options.context); 
    } else { 
     this.el = container_id; 
    }

Conclusione:

gmaps.js non importa se si sta utilizzando div: 'basic_map' o el: 'basic_map' -> entrambi funzionerà benissimo.
WRONG = div: '#basic_map', CORRETTO = div: 'basic_map'.
Specificare la larghezza e l'altezza della div con alcuni CSS

Refresh ed essere felici.:)

fonte

2013-09-14 08:27:19 Chris

$(document).ready(function() { 
    var map = new GMaps({ 
     div: '#basic_map', 
     lat: 51.5073346, 
     lng: -0.1276831, 
     width: '500px', --->You must add this 
     height: '500px',---->And this in your map declaration 
     zoom: 12, 
     zoomControl: true, 
     zoomControlOpt: { 
      style: 'SMALL', 
      position: 'TOP_LEFT' 
     }, 
     panControl: false 
    }); 
});

nel div:

<div id="basic_map"></div>

o si cambia l'ID div di "mappare" e creare lo stile:

<style type="text/css"> 
    #map { 
     width: 700px; 
      height: 500px; 
      border: 1px solid #a0a0a0; 
    } 
    </style>

Nella tua div :

<div id="map" class="map"></div>

fonte

2016-04-14 16:26:08 JRandria

Non vedo niente di sbagliato, ma la mappa non apparirà (usando gmaps.js da github)

risposta

Problemi correlati