Nie widzę niczego złego, ale mapa się nie pojawi (używając gmaps.js z github)

Próbuję użyć GMaps.js in github, ale z jakiegoś powodu to nie działa, jestem prawie pewien, że wpisałem dobrze, jeśli ktokolwiek mógłby wskazać mi właściwy kierunek, dzięki. (http://i.imgur.com/3LkL6xS.png rzeczywiste zdjęcia w przypadku, gdy nie jest wystarczająco duży, tutaj.)Nie widzę niczego złego, ale mapa się nie pojawi (używając gmaps.js z github)

Broken Code

Oto nowy kod źródłowy:

<!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>

Źródło

2013-03-03 Datsik

Użyłeś "el", ale widzę na przykładach, że używają one 'div: '# map',' do pokazania, w której powinna się pojawić mapa div, również na pewno masz "#basic_map" div wystarczająco duży, aby pokazać cokolwiek ? (szerokość i wysokość w css) – Kedor

Niestety to nie naprawiło. – Datsik

Mapa jest załadowana na twoją stronę, ale brakuje jej wysokości i dlatego nie widzisz mapy, nawet jeśli jest załadowana. Określ wysokość wewnątrz opcji GMap lub CSS, a problem zostanie naprawiony. Odpowiedź Kedora poniżej pokazuje rzeczywiste rozwiązanie twojego problemu. –

Jak powiedział w komentarzu, prawdopodobnie brakuje szerokość i wysokość div, spróbuj pokazać . mapa w

Tu pracuje 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 
    }); 
});

szerokość i wysokość dodane do kodu.
Lub Here masz taki sam wynik, z szerokością i wysokością w css. Niewielka różnica.

Źródło

2013-03-03 08:49:07 Kedor

+1 ode mnie. Problem polega na tym, że brakuje wysokości div. Mapa jest załadowana na stronę, ale nie jest widoczna, ponieważ wysokość nie jest zdefiniowana. –

rodzaj niespójne zachowanie z wtyczki ... ale tak, jest to –

i przetestowany kod. może powinieneś ustawić szerokość elementu div w rozmiarze &. można użyć firebugs aby sprawdzić, czy mapa jest już utworzony

zmienić div jak to <div id="basic_map" style="height: 100px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">

Źródło

2013-03-03 08:33:22 Qian

Żadne szczęście nie zadziałało – Datsik

(proszę wybaczyć mój słaby angielski)

I rozwiązać ten problem przez przyjrzeniu na "gmaps.js" -file ...

gmaps.js (v4.5.0) wykorzystuje getElementById.

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

Wniosek:

gmaps.js nie obchodzi czy używasz div: 'basic_map' lub el: 'basic_map' -> jak będzie działać prawidłowo.
WRONG = div: '#basic_map', PRAWIDŁOWY = div: 'basic_map'.
Określ szerokość i wysokość div z niektórych CSS

Refresh i być szczęśliwym.:)

Źródło

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 
    }); 
});

w Gr:

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

lub zmienić div id "Mapa" i stworzyć styl:

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

W swojej div :

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

Źródło

2016-04-14 16:26:08 JRandria

Nie widzę niczego złego, ale mapa się nie pojawi (używając gmaps.js z github)

Odpowiedz

Powiązane problemy