jQuery easytabs and google maps conflict easytabs not working

Question

i have a page on which i have google maps api in bottom div and jQuery easytbs for showing search bars with div. but i can call them both at once. easytabs stops working each time i call them separately they work fine. the message i receive is $ is undefined or c is undefined etc.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false"></script>


     <script type="text/javascript">
         var map;
         var geocoder;
         var marker1 = null, marker2 = null;
         $(document).ready(function () {
             function initialize() {
                 geocoder = new google.maps.Geocoder();
                 var mapProp = {
                     center: new google.maps.LatLng(40, -10),
                     zoom: 3,
                     mapTypeControl: false,
                     panControl: false,
                     zoomControl: false,
                     streetViewControl: false,
                     scrollwheel: false,
                     mapTypeId: google.maps.MapTypeId.MAP
                 };
                 map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
             }
             google.maps.event.addDomListener(window, 'load', initialize);
         });
        $(document).ready(function () {
            $('#tab-container').easytabs();
        });
        $(document).ready(function () {
            $('.show_hide').click(function () {
                $(this).next('.slidingDiv').slideToggle();
                return false;
            });
        });
    </script> 


<script type="text/javascript" src="../js/jquery.easytabs.min.js"></script>

any pointer on how both can co-exists will be great. thanks

FYI: i am using twitter bootstrap

Answer 1

Maybe you can stack your script this way:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false"></script>
<script type="text/javascript" src="../js/jquery.easytabs.min.js"></script>

<script type="text/javascript">
   var map;
   var geocoder;
   var marker1 = null, marker2 = null;

   function initialize() {  //<----put this in global scope
           geocoder = new google.maps.Geocoder();
           var mapProp = {
                 center: new google.maps.LatLng(40, -10),
                 zoom: 3,
                 mapTypeControl: false,
      .....and so on...
    }

         jQuery(document).ready(function ($) { //<---one doc ready will do
             google.maps.event.addDomListener(window, 'load', initialize);

            $('#tab-container').easytabs();


            $('.show_hide').click(function () {
                $(this).next('.slidingDiv').slideToggle();
                return false;
            });
        });
    </script>

Note:

$ is undefined because jQuery lib is not referenced in the head and should be top most as suggested in the answer.