显示/隐藏显示灰色时显示灰色的Gmap

我使用显示/隐藏功能显示Gmaps谷歌地图插件，但是当执行onclick时会显示Gmap，但会显示部分地图，但灰色显示。显示/隐藏显示灰色时显示灰色的Gmap

我已经在网上查找了各种网站的解决方案，只发现使用“gmap.checkResize（）”的选项，但不知道如何去使用我的代码，如果它甚至可以我的问题...

我已经添加了下面的代码，并正在寻找帮助获取整个地图显示onclicked时。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAL7_5Aste4KkbgvT91y3k9xQo4D0inr193z9lVfCY1TNJb6Lz5RQJyM7R-PR3bMS1i_GvwioUrJMaXw" type="text/javascript"></script> 
    <script type="text/javascript" src="javascripts/jquery-1.7.min.js"></script> 
    <script type="text/javascript" src="javascripts/jquery.gmap-1.1.0-min.js"></script> 

    </head> 
    <style> 
    #map{ 
        position:relative; 
        float:left; 
        width:450px; 
        height:400px; 
    } 


    .PlaceHeading{ 
     color: #C6688D; 
     font-family: Arial; 
     font-size: 15px; 
     margin-bottom:-13px; 
    } 

    #content{ 
     text-align:center; 
    } 

    a{ 
     color: #C6688D; 
    } 

    .PlaceAddress{ 
     color: #666666; 
     font-family: Arial,Georgia,sans-serif; 
     font-size: 12px; 
     font-weight: normal; 
    } 



    </style> 


<script type="text/javascript"> 

    $(function() { 
    $("#map").gMap({ markers: [{ address: "809 1st Ave. N.E. Calgary, Alberta", 
           html:'<div id="content"><center>'+ 
            '<h1 class="PlaceHeading">Blue Star Diner</h1>'+ //*Title of location 
            '<p class="PlaceAddress">809 1st Ave. N.E.<br />'+ //*Street address of location 
            'Calgary, AB <br />'+ //*City and Province of location 
            '403-261-9998 <br/>'+ //*Phone number of location 
            '<a href="http://maps.google.com/maps?saddr=809 1st Ave. N.E.+Calgary,AB+Canada" target="_blank">'  //*Enter Address info in url where appropriate to link to Google directions page 
            +'Get directions</a> <b>|</b> <a href="http://www.bluestardiner.ca/" target="_blank">' + //*Enter place url here 
            'Visit website </a> </p></center>' + 
            '</div>', 
             icon: { image: "mapPage/images/marker1.png", 
             iconsize: [25, 41], 
             iconanchor: [9, 34], 
             infowindowanchor: [9, 2] } 
           }], 
           zoom: 13 }); 
    }); 
    </script> 
    <script language="JavaScript"> 
    function ShowHide(divId) 
    { 
    if(document.getElementById(divId).style.display == 'none') 
    { 
    document.getElementById(divId).style.display='block'; 
    document.getElementById("expandMap").src="mapPage/images/minus.jpg"; 
    document.getElementById("mapText").innerHTML="Hide map"; 
    } 
    else 
    { 
    document.getElementById(divId).style.display = 'none'; 
    document.getElementById("expandMap").src="mapPage/images/plus.jpg"; 
    document.getElementById("mapText").innerHTML="View map"; 
    } 
    } 
    </script> 





    <body> 

    <a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><img src="/mapPage/images/plus.jpg" id="expandMap"alt="" style="float:left;" /><p id="mapText">View map</p></a> 

    <div class="mid" id="HiddenDiv" style="DISPLAY: none" > 
    <div id="map">&nbsp;</div> 
    </div>

来源

2011-11-07 user1034180

display: none;意味着元素被占用，这似乎引起GMAP大小计算不能正常工作页面上没有空间。改为使用visibility: hidden;是解决问题的一种方法。如果元素占据空间是一个问题，position: absolute;可能可以帮助你。

来源

2012-01-11 13:45:07 Dooshta

显示/隐藏显示灰色时显示灰色的Gmap

回答

相关问题