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