jQuery easytabs 和 google maps 冲突 easytabs 不工作

Question

我有一个页面，我在底部 div 中有 google maps api 和用于显示带有 div 的搜索栏的 jQuery easytbs。但我可以同时给他们两个打电话。每次我分别调用它们时，easytabs 都会停止工作，它们工作正常。我收到的消息是 $ 未定义或 c 未定义等。

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

任何关于两者如何共存的指针都会很棒。 谢谢

仅供参考：我正在使用 twitter 引导程序

Answer 1

也许你可以这样堆叠你的脚本：

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

注意：

$ is undefined 因为 jQuery 库没有在头部引用，应该是答案中建议的最重要的。