jQuery easytabs和谷歌地图冲突easytabs无法正常工作

时间:2013-12-28 13:42:18

标签: javascript jquery jquery-ui google-maps conflicting-libraries

我有一个页面,我在底部div有谷歌地图api和jQuery easytbs用于显示div的搜索栏。但我可以马上打电话给他们。 easytabs每次我单独打电话他们工作正常就会停止工作。我收到的消息是$ undefined或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 bootstrap

1 个答案:

答案 0 :(得分:0)

也许你可以用这种方式堆叠你的脚本:

<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 lib未在头部引用,应该是答案中建议的最高级。