Дисплей Google Maps: нет проблемы - PullRequest
Новая
       5

Дисплей Google Maps: нет проблемы

36 голосов
/ 15 января 2011

Я пытаюсь настроить карту Google, которая будет отображаться при нажатии на ссылку, а затем скрываться при нажатии на другую ссылку.Все работает нормально, кроме случаев, когда я показываю карту с дисплея: нет, она не отображается должным образом.

Я читал об использовании google.maps.event.trigger (map, 'resize');но я не достаточно опытен с Javascript и JQuery, чтобы знать, как его добавить.

Вот код, который я использовал: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            #viewmap {
                position:relative;
                width:944px;
                float:left;
                display:none;
            }
            #hidemap {
                position:relative;
                width:944px;
                float:left;
                display:block;
            }
            #map_canvas {
                position:relative;
                float:left;
                width:944px;
                height:300px;
            }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
        </script>
        <script type="text/javascript">
            function initialize() {
                var latlng = new google.maps.LatLng(-27.999673,153.42855);
                var myOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                    }
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

                var contentString = 'blah';

                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                var marker = new google.maps.Marker({
                    position: latlng, 
                    map: map
                });

                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
        <script type="text/javascript">
            function toggleDiv1(viewmap){
                if(document.getElementById(viewmap).style.display == 'block'){
                    document.getElementById(viewmap).style.display = 'none';
                }else{
                    document.getElementById(viewmap).style.display = 'block';
                }
            }
            function toggleDiv2(hidemap){
                if(document.getElementById(hidemap).style.display == 'none'){
                    document.getElementById(hidemap).style.display = 'block';
                }else{
                    document.getElementById(hidemap).style.display = 'none';
                }
            }
        </script>
    </head>
    <body>
        <div id="viewmap">
            <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a>
            <div id="map_canvas"></div>
        </div>
        <div id="hidemap">
            <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a>
        </div>
    </body>
</html>

Любая помощь будет высоко оценена

Квинтин

Ответы [ 13 ]

0 голосов
/ 08 марта 2012 
document.getElementById('map_canvas').style.display = 'none';

Это сработало хорошо для меня - не знаю, потому ли это, что я прячу холст, а не содержащий div .... отлично работает в IE, Firefox и Chrome.Конечно, вы можете спрятать свой контейнер, как только холст карты будет скрыт.

0 голосов
/ 02 августа 2011

Этот код работает правильно (с использованием jQuery 1.2.6): Css: #gog-map{position:absolute; visibility:hidden;} </p> <pre><code>$(document).ready(function() { $('a#link').click(function() { if ($('#gog-map').is(':visible')){ $('#gog-map').slideUp('slow'); } else{ $('#gog-map').slideDown('slow'); $("#gog-map").css('visibility','inherit'); $("#gog-map").css('position','relative'); } return false; }); });

0 голосов
/ 17 июня 2011

Я безуспешно пытался анимировать свои карты и, наконец, придумал следующее:

CSS: Мы установили обертку карты с position:absolute; и visibility:hidden;, потому чтодля правильной визуализации он должен иметь нормальные размеры.

JavaScript: 

$(document).ready(function() 
{
    // We then run this function only once per page load. It places out map back in the document flow but hides it before it starts to toggle its height.
    $("#mapBtn").one("click", function() 
    {
        $("#myMap").hide(); 
        $("#myMap").css("visibility", "inherit");
        $("#myMap").css("position", "relative");
    });

    // And now we toggle away nicely
    $("#mapBtn").click(function() 
    {
        $("#myMap").slideToggle(400);
    });
});
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...