Показать / скрыть Gmap, показывая частично серый при отображении - PullRequest
Новая
       9

Показать / скрыть Gmap, показывая частично серый при отображении

2 голосов
/ 07 ноября 2011

Я использую функцию «показать / скрыть», чтобы открыть плагин Gmaps для карт Google, но при выполнении щелчка мышью отображается Gmap, но часть карты отсутствует и отображается серым цветом.

Я искал решение на различных сайтах в Интернете и нашел только вариант использования «gmap.checkResize ()», но не уверен, как использовать это с моим кодом, и будет ли оно работать для моего проблема ...

Я добавил приведенный ниже код и ищу помощь в отображении всей карты при нажатии. 

    <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>

1 Ответ

5 голосов
/ 11 января 2012

display: none; означает, что элемент не занимает места на странице, что, по-видимому, приводит к тому, что вычисления размера GMap не работают должным образом. Использование visibility: hidden; вместо этого - один из способов исправить это. position: absolute;, вероятно, может помочь вам, если элемент, занимающий пространство, является проблемой.

...