無法使用gmaps.js顯示地圖

不好意思用sthg來打擾那麼簡單，但我真的看不到有什麼問題。我在網站上工作，我有HTML5 & CSS3知識，但沒有太多的jQuery/JavaScript的。我想在我的投資組合中加入gmap窗口，所以我嘗試使用這個窗口：http://hpneo.github.io/gmaps/examples/basic.html。無法使用gmaps.js顯示地圖

但是，我在我的網頁上有一個白色和絕望的空白廣場，我的地圖應該是。我已經通過在地圖div中寫入background-color：red來檢查它是否「出現」，並且它確實顯示爲紅色。

我掛在頭這些文件：

<script src="jQuery/gmaps.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="jQuery/script.js"></script>

我的地圖是在那裏：

<section> 
    <h1> Où nous trouver ? </h1> 
     <p> [Page en construction] </p> 
     <div id="basicmap"></div> 
    </section>

我的script.js：

$(document).ready(function(){ 
 
    
 
    $(".diaporama").diaporama({ 
 
     animationSpeed: "slow", 
 
     delay:2 
 
    }); 
 
}); 
 
\t 
 
$(document).ready(function(){ 
 
\t var map = new GMaps({ 
 
\t \t \t \t div: 'basicmap', 
 
\t \t \t \t lat: 47.441396, 
 
\t \t \t \t lng: -2.196303, 
 
\t \t \t \t width: '500px', 
 
\t \t \t \t height: '500px', 
 
\t \t \t \t zoom: 12, 
 
\t \t \t \t zoomControl : true, 
 
\t \t \t \t zoomControlOpt: { 
 
\t \t \t \t \t style : 'SMALL', 
 
\t \t \t \t \t position: 'TOP_LEFT' 
 
\t \t \t \t }, 
 
\t \t \t \t panControl : false, 
 
\t \t \t \t }); 
 
\t \t \t map.addMarker({ 
 
\t \t \t \t lat: 47.441396, 
 
\t \t \t \t lng: -2.196303, 
 
\t \t \t \t title: 'Résidence Les Ajoncs' 
 
\t \t \t }); 
 
    
 
}); 
 

 
$(function() { 
 

 
    $("#submit").hide(); 
 

 
    $("#page-changer select").change(function() { 
 
     window.location = $("#page-changer select option:selected").val(); 
 
    }) 
 

 
});

最後一點我的CSS：

#basicmap 
{ 
    display: block; 
    width: 500px; 
    height: 500px; 
    margin: 0 auto; 
    -moz-box-shadow: 0px 5px 20px #ccc; 
    -webkit-box-shadow: 0px 5px 20px #CCC; 
    box-shadow: 0px 5px 20px #CCC; 
}

（對不起，我想我已經搞砸了一下，在這個帖子哈哈代碼插入方法。）

我可能是累了或者它的東西，我不知道（因爲我沒有有很多網絡編程知識，我有點匆忙），idk，但我已經沒有想法來解決這個問題。

Soooo。非常感謝，如果你可以救我\\/

來源

2014-09-25 Lap

哪裏'.diaporama'從何而來？ – geocodezip 2014-09-25 18:11:18

jQuery/script.js中有什麼？ – geocodezip 2014-09-25 19:23:57

在我看來，你不包括gmaps.js庫。下面的代碼片段適用於我（它基於您的代碼，但包含gmaps.js庫）。

$(document).ready(function() { 
 
    var map = new GMaps({ 
 
    div: 'basicmap', 
 
    lat: 47.441396, 
 
    lng: -2.196303, 
 
    width: '500px', 
 
    height: '500px', 
 
    zoom: 12, 
 
    zoomControl: true, 
 
    zoomControlOpt: { 
 
     style: 'SMALL', 
 
     position: 'TOP_LEFT' 
 
    }, 
 
    panControl: false, 
 
    }); 
 
    map.addMarker({ 
 
    lat: 47.441396, 
 
    lng: -2.196303, 
 
    title: 'Résidence Les Ajoncs' 
 
    }); 
 

 
}); 
 

 
$(function() { 
 

 
    $("#submit").hide(); 
 

 
    $("#page-changer select").change(function() { 
 
    window.location = $("#page-changer select option:selected").val(); 
 
    }) 
 

 
});

#basicmap { 
 
    display: block; 
 
    width: 500px; 
 
    height: 500px; 
 
    margin: 0 auto; 
 
    -moz-box-shadow: 0px 5px 20px #ccc; 
 
    -webkit-box-shadow: 0px 5px 20px #CCC; 
 
    box-shadow: 0px 5px 20px #CCC; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script src="http://hpneo.github.io/gmaps/gmaps.js"></script> 
 
<section> 
 
    <h1> Où nous trouver ? </h1> 
 
    <p>[Page en construction]</p> 
 
    <div id="basicmap"></div> 
 
</section>

來源

2014-09-25 19:24:27 geocodezip

無法使用gmaps.js顯示地圖

回答

相關問題