how to use gmaps.js

Question

I have been playing around with gmaps.js lately. However, I can't get it work.

Here's the code.

In the header I imported these three files:

http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

http://maps.google.com/maps/api/js?sensor=true

gmaps.js

<div id="mouse_event_map"></div>

<script type="text/javascript">
/**
 * Mouse Events on Maps
 */
$(document).ready(function(){
 var map = new GMaps({
    el: '#mouse_event_map',
    lat: 51.5073346,
    lng: -0.1276831,
    zoom: 12,
    zoomControl : true,
    zoomControlOpt: {
        style : 'SMALL',
        position: 'TOP_LEFT'
    },
    panControl : false,
    click: function(e){
      alert('Click event');
    },
    dragend: function(e){
      alert('Drag Event');
    }
  });
});
</script>

Answer 1

The gmaps.js documentation shows

map = new GMaps({
  div: '#map',
  zoom: 16,
  lat: -12.043333,
  lng: -77.028333,
  click: function(e) {
    alert('click');
  },
  dragend: function(e) {
    alert('dragend');
  }
});

Note that this uses div and not el.