0

jqueryタブ内にGoogleマップを表示しようとしています。私のコードは機能していますが、タブ内でマップをレンダリングしていません.stackoverflowに投稿されたさまざまな質問に記載されているすべての手法を適用しましたが、どれも機能していないようです. 以下は私のコードです

CSS

.tab_container { }
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #CCC;
    width: 100%;}

    ul.tabs li  {
        float: left;
        margin: 0;
        padding: 0;
        height: 31px;
        line-height: 31px;
        border: 1px solid #CCC;
        border-left: none;
        margin-bottom: -1px;
        background: #e0e0e0 url(images/accordion_header.png) repeat-x top right;
        overflow: hidden;
        position: relative; }   
        ul.tabs li a        {
            text-decoration: none;
            color: #222;
            display: block;
            font-size: 1.2em;
            padding: 0 20px;
            border: 1px solid #fff;
            outline: none;  }
    ul.tabs li a:hover { background: #ccc; }    
            ul.tabs li.active, ul.tabs li.active a:hover  { background: #fff; border-bottom: 1px solid #fff; }

.tab_content_container {
    border: 1px solid #CCC;
    border-top: none;
    clear: both;
    float: left; 
    width: 100%;
    background: #fff;}
    .tab_content { font-size: 1.2em; padding: 20px 20px 10px; display: none; }  
    .tab_content:first-child { display: block; }

jquery関数

(function($){
    $.fn.tabs = function(options) { 
        var defaults = {};  
        var options = $.extend(defaults, options);  
        return this.each( function() {          
            var $tabContainer = $(this);
            var $tabLi = $tabContainer.find ('.tabs li');
            var $tabContent = $tabContainer.find ('.tab_content');          
            $tabContent.hide ();
            $tabLi.eq (0).addClass ('active').show ();
            $tabContent.eq (0).show ();

            $tabLi.live ('click' , function () 
            {
                var activeTab = $(this).find ('a').attr ('href');

                $tabLi.removeClass("active");
                $(this).addClass("active");
                $tabContent.hide ();
                $(activeTab).css({'visibility':'visible'});                 
                $tabContainer.find (activeTab).fadeIn ('slow');
                if(activeTab == '#about') {
                        initialize();//google map
                      }
                return false;
            });         });         };

})(jQuery);
function initialize() {
      var myLatlng = new google.maps.LatLng(28.46583740, 77.03269809999999);
      var mapOptions = {
        center: myLatlng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
        var marker = new google.maps.Marker({
        position: myLatlng,
        });    
        google.maps.event.addListener(map, "idle", function(){
            marker.setMap(map);
        }); 
    }

ここにHTML divがあります

<div id="about" class="tab_content" style="display: none; "> 
                                        <div id="map_canvas" style="width:100%; height:100%"></div>
                                    </div>
4

1 に答える 1

0

問題はここにあると思います：

 var marker = new google.maps.Marker({
    position: myLatlng  //<----- remove the ' , '
 });

動作するかどうかを確認します。

于 2012-11-16T11:57:17.803 に答える