API Карт Google V3 требует перезагрузки страницы для отображения значков маркеров - PullRequest
Новая
       2

API Карт Google V3 требует перезагрузки страницы для отображения значков маркеров

4 голосов
/ 31 января 2012

Я читаю точки из БД в формате JSON для создания маркеров карты и неструктурированного списка на странице.После добавления некоторого кода для настройки элементов списка карта перестала показывать значки маркеров при первом запросе - пока не будет выполнена перезагрузка страницы.Это связано с тайм-аутом от API?Может ли объект списка быть построен из массива после загрузки карты или есть какой-то другой способ ускорить код, который может устранить проблему?Карта прекрасно загружала маркеры с удвоенным числом маркеров (300+), поэтому я знаю, что проблема заключается в добавлении форматирования к объекту списка.Нет необходимости кластеризации.Демо-версия страницы доступна здесь

Подписано JS n00b.Благодарю....... JSON POWERED GOOGLEMAP 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8"> 
var map;
    var infoWindow = new google.maps.InfoWindow();
    function initialize() {
        var myLatlng = new google.maps.LatLng(49.57154029531499,-125.74951171875);

        var myOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            streetViewControl: false
            }

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

        } /* end initialize function */


<!--  load points from database into Locations JSON -->

$(document).ready(function () {
    initialize();
    $.getJSON("map-service.php?action=listpoints", function(json) {

    if (json.Locations.length > 0) {
        for (i=0; i<json.Locations.length; i++) {
            var location = json.Locations[i];
                addMarker(location); 
                }
            }
        });

    //define grn icon as closed
    var greenicon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';

    function addMarker(location) {
            if(location.datesummit == "0000-00-00") {
                var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng),icon: greenicon};
                //create marker info window content
                var html='<B>'+location.name+'</B><BR> Register a summit <A href="http://goo.gl/Nl0UQ">here</A>  ';
                //create list element text and onclick          
                $("<li class=\"notclimbed\">")
                .html(location.name+"</li>") 
                .click(function(){ 
                    infoWindow.close();
                    infoWindow.setContent(html);
                    infoWindow.open(map, marker)
                }) 
                .appendTo("#list"); 
            }
            else{
                var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng)};
                //create marker info window content
                var html='<B>'+location.name+'</B><BR> Summitted: '+location.datesummit+'<BR> By:'+location.summitlog;
                //create list element text and onclick  
                $("<li class=\"climbed\">")
                .html(location.name+"</li>") 
                .click(function(){ 
                    infoWindow.close();
                    infoWindow.setContent(html);
                    infoWindow.open(map, marker)
                }) 
                .appendTo("#list"); 
            }
            var marker = new google.maps.Marker(markerOptions);

            // add a listener to open an info window when a user clicks on one of the markers
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.close();
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
                });

        }; // end of addmarker function
});
</script>
</head>


<body>
<div id="banner" {vertical-align:text-top;} >
    <img src="test.jpg" alt="Logo" style="width:150px;height:150px;vertical-align:middle">
    <img src="test.png" alt="Logo" style="vertical-align:middle">
</div>

<div id="map_canvas" >
        Map Here!
</div>

<div id="mindthegap"></div>

<div id="list" >    </div>
</body>

1 Ответ

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

Перед тем, как передать ее в markerOptions, необходимо убедиться, что переменная карты инициализирована.

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

$ (document) .ready () обычно происходит перед body.onload, поэтому либо поместите вызов initialize () в самый верх вашего $ (document) .ready (function () {...});или поместите туда код для инициализации.

Кроме того, хотя это и не является строго необходимым, вы должны рассмотреть возможность инкапсуляции вашей переменной карты вместо использования глобальной.Что делать, если вы хотите иметь 2 карты на одной странице?

...