0

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

Alok
  • 808
  • 13
  • 40
  • `$ is undefined` because jQuery is not available in the page, you should reference the library as suggested in the answer. – Jai Dec 28 '13 at 14:07

1 Answers1

0

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.

Jai
  • 74,255
  • 12
  • 74
  • 103
  • yes of course you can use it. i just showed you to save the `$` alias to jQuery from conflicting with anyother library if you use. – Jai Dec 28 '13 at 14:40
  • this is still not working, i tried it.and sorry for late reply i was busy elsewhere – Alok Jan 04 '14 at 07:06
  • please see the issue if you are free, this solution did not worked out. – Alok Jan 07 '14 at 09:38