Error while display map via gmap3

Question

I am working on to display the map on my web screen. but facing some Error while displaying it.

Error :-

TypeError: $("#driver_map").gmap3 is not a function

Code :-

%script{:src=>'../assets/public/js/gmap3.js'}
%script{:src=>'http://maps.google.com/maps/api/js?sensor=false' :type=>'text/javascript'}
%script{:src=>'../assets/public/js/jquery-1.6.4.js'}

%html
  %head
    %body
      %div{:id=>"driver_map"}

:javascript
  $(function(){
    $('#driver_map').gmap3(
      { action:'init',
        options:{
          center:[46.578498,2.457275],
          zoom: 5
        }
      },
      { action: 'addMarkers',
        markers:[
          {lat:48.8620722, lng:2.352047, data:'Paris !'},
          {lat:46.59433,lng:0.342236, data:'Poitiers : great city !'},
          {lat:42.704931, lng:2.894697, data:'Perpignan ! <br> GO USAP !'}
        ],            
      }
    );
  });  

Please help me to solve this error.

Answer 1

gmap3.js uses jQuery so it needs to be loaded after jquery-1.6.4.js. All the examples load things in this order:

1. jQuery
2. Google Maps
3. gmap3

so it might need to be loaded after the Google Maps JavaScript as well.

Try adjusting your load order:

%script{:src=>'../assets/public/js/jquery-1.6.4.js'}
%script{:src=>'http://maps.google.com/maps/api/js?sensor=false' :type=>'text/javascript'}
%script{:src=>'../assets/public/js/gmap3.js'}

I'd also recommend against using relatives paths, they just cause trouble. You'd be better off with absolute paths like '/assets/public/js/jquery-1.6.4.js' so that you don't have to care about where you are.