无法使地图与gmaps.js一起显示

Question

很抱歉打扰您这么简单，但是我真的看不到有什么问题。 我在一个网站上工作，我了解HTML5＆CSS3，但是对jQuery / javascript却了解不多。 我想像在投资组合中一样放入一个gmap窗口，因此我尝试使用以下窗口： http : //hpneo.github.io/gmaps/examples/basic.html 。

但是，我在网页上得到的只是一个白色的，非常空的正方形，应该放在我的地图上。 我通过在地图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 }); }); $(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(); }) }); 

最后是我的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。 如果您能救我\\\\ /

Answer 1

在我看来，您不包括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="https://cdn.rawgit.com/hpneo/gmaps/master/gmaps.js"></script> <section> <h1> Où nous trouver ? </h1> <p>[Page en construction]</p> <div id="basicmap"></div> </section>