2011-11-07 187 views
2

我使用顯示/隱藏功能顯示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> 

回答

5

display: none;意味着元素被佔用,這似乎引起GMAP大小計算不能正常工作頁面上沒有空間。改爲使用visibility: hidden;是解決問題的一種方法。如果元素佔據空間是一個問題,position: absolute;可能可以幫助你。