Can't get map to appear with gmaps.js

Question

Sorry to bother you with sthg that simple but I really can't see what's wrong. I'm working on a website, I have HTML5&CSS3 knowledges but not much jQuery/javascript ones. I wanted to put in a gmap window like in my portfolio and so I tried to use this one : http://hpneo.github.io/gmaps/examples/basic.html .

But all I've got on my webpage is a white and desperately empty square where my map should be. I've checked if it "appears" by writing background-color:red in the map div, and it does appear red.

I linked these files in the header :

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

My map is in there :

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

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

});

And finally a bit of my 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;
}

(Sorry I think I've messed up a bit with the code insertions method in this post haha.)

I may be tired or it's something I don't know about (because I haven't got a lot of web programming knowledge and I was a bit in a hurry), idk, but I've ran out of ideas to solve this problem.

Soooo. Many thanks in advance if you can save me \°/

Answer 1

Looks to me like you are not including the gmaps.js library. The snippet below works for me (which is based off your code, but does include the gmaps.js library).

$(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>