谷歌地图里面的jquery标签问题 [英] Google Map inside jquery tab issue

问题描述

我试图在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; 
保证金：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右上; 
 overflow：hidden; 
职位：亲属; } 
 ul.tabs li a {
 text-decoration：none; 
颜色：＃222; 
 display：block; 
 font-size：1.2em; 
 padding：0 20px; 
 border：1px solid #fff; 
概述：无; } 
 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; 
明确：两者; 
 float：left; 
宽度：100％; 
 background：#fff;} 
 .tab_content {font-size：1.2em; padding：20px 20px 10px;显示：无; } 
 .tab_content：first-child {display：block; } 
  

jquery函数

 （function（$）{
 $ .fn.tabs = function（options）{
 var defaults = {}; 
 var options = $ .extend（defaults，选项）; 
 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'：'visib le'}）; 
 $ tabContainer.find（activeTab）.fadeIn（'slow'）; 
 if（activeTab =='#about'）{
 initialize（）; // google map 
} 
 return false; 
}）; }）; }; 
 
}）（jQuery）; 
函数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 =aboutclass =tab_contentstyle =display：none;> 
< div id =map_canvasstyle =width：100％; height：100％>< / div> 
< / div> 
  

解决方案

我想问题在这里：

  var marker = new google.maps.Marker（{
 position：myLatlng //< ----- remove the'， '
}）; 
  

查看是否有效。

I am trying to show a google map inside a jquery tab. My code is working but not rendering map inside tab, i have applied all techniques given in various questions posted on stackoverflow but none of them seems to be working. Below is my code

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

(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);
        }); 
    }

here is HTML div

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

解决方案

I think problem is here:

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

see if works.

这篇关于谷歌地图里面的jquery标签问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！