我沒有看到任何錯誤，但地圖不會出現（使用github中的gmaps.js）

我試圖使用GMaps.js in github，但由於某種原因，它不工作，我敢肯定，我輸入了它是正確的，如果有人能指出我在正確的方向感謝。（萬一http://i.imgur.com/3LkL6xS.png真實照片是不是在這裏不夠大。）我沒有看到任何錯誤，但地圖不會出現（使用github中的gmaps.js）

Broken Code

這裏是新的源代碼：

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

來源

2013-03-03 Datsik

您使用過「el」，但我在例子中看到它們使用'div：'＃map'，'來顯示哪個div映射應該出現，並且您確定您擁有「#basic_map」div大到足以顯示任何內容？（在CSS中的寬度和高度） – Kedor 2013-03-03 08:29:44

可悲的是，沒有解決它。 – Datsik 2013-03-03 08:37:12

地圖加載到您的頁面中，但您缺少高度，這就是爲什麼即使加載地圖也沒有看到地圖的原因。指定Gmap選項或CSS中的高度，問題將被修復。 Kedor的回答下面指出了你的問題的實際解決方案。 – 2013-03-03 10:13:51

正如我在評論說，你可能錯過了div的寬度和高度，你試試秀。圖中

這裏是工作的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 
    }); 
});

增加的寬度和高度的代碼。
或Here你有相同的結果，在CSS中的寬度和高度。沒有太大的區別。

來源

2013-03-03 08:49:07 Kedor

從我+1。問題是div的高度丟失了。地圖加載在頁面上，但由於未定義高度，因此它不可見。 – 2013-03-03 10:16:45

有點不一致的行爲從插件...但是，它是 – 2015-03-20 06:52:32

我測試的代碼。也許你應該設置div元素的高度&。你可以使用firebugs檢查，如果地圖已經創建

改變你的DIV像這樣 <div id="basic_map" style="height: 100px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">

來源

2013-03-03 08:33:22 Qian

沒有運氣沒有工作 – Datsik 2013-03-03 08:35:43

（請原諒我的英語很差）

我通過在「gmaps.js」 -file考慮看看解決了這個問題...

gmaps.js（V4.5.0）使用getElementById。

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

結論： - >既會工作，如果你使用div: 'basic_map'或el: 'basic_map'

gmaps.js並不關心。
WRONG = div: '#basic_map'，CORRECT = div: 'basic_map'。
一些CSS

刷新指定div的寬度和高度，是快樂的。:)

來源

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

在DIV

：

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

，或者您更改DIV ID爲「地圖」，創造風格：

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

在你的div ：

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

來源

2016-04-14 16:26:08 JRandria

我沒有看到任何錯誤，但地圖不會出現（使用github中的gmaps.js）

回答

相關問題