无法使地图与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，但是我已经没有解决办法了这个问题。

S。如果您能救我的话，请多谢！\°/

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>