Блог

Главная - Вопросы по программированию - Показать / скрыть Gmap, отображаемый частично серым при отображении

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

#google-maps

#google-карты

Вопрос:

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

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

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

     <script src="http://maps.google.com/maps?file=apiamp;amp;v=2amp;amp;sensor=trueamp;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">amp;nbsp;</div>
    </div>

Ответ №1:

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