Google Maps Api v3 - map.panTo вызывает «слишком много рекурсии»

Question

У меня проблема с завершением моего скрипта, он работает с использованием map.setCenter для изменения положения на каждом маркере, но я хотел бы панорамировать каждый новый маркер , Однако, когда я использую функцию panTo, маркеры не отображаются, хотя карта действительно показывает и крутится вокруг, где будет каждый новый маркер. Firebug также дает мне слишком большую ошибку рекурсии. Может ли кто-нибудь помочь?

<script type="text/javascript"> 

    var map = {}; 
    var mapOptions; 
    var infowindow; 
    var marker; 
    var lat, lng; 
    var latlng; 
    var gender; 
    var content; 
    var i; 
    var infos = []; 

    $(document).ready(function() { 
     initialize(); 
    }); 

    function initialize() { 

     latlng = new google.maps.LatLng(lat, lng); 

     mapOptions = { 
     zoom: 7, 
     center: latlng, 
     } 

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     readJSONData(); 
    } 

    function readJSONData() 
    { 

     var url = "events.json"; 
     var data; 

     $.ajax({ 
      async: false, 
      cache: false, 
      type: "GET", 
      dataType: "json", 
      url: url, 
      success: function(data) { 

       i = Math.floor(Math.random() * data.events.length); 

       if(data.events[i].gender == "Male") { 
        gender = 'male.png'; 
       } 
       if(data.events[i].gender == "Female"){ 
        gender = 'female.png'; 
       } 

       lat = data.events[i].lat; 
       lng = data.events[i].lng; 
       latlng = new google.maps.LatLng(lat, lng); 

       content = 
       '<div class="noscrollbar">'+ 
       '<div id="content">'+ 
        '<div class="inner">'+ 

        '<div class="inner-left">'+ 
         '<span class="span-padding"><i class="fa fa-map-marker fa-lg"></i></span><br />'+ 
         '<span class="span-padding"><i class="fa fa-mobile fa-lg"></i></span><br />'+ 
         '<span class="span-padding"><i class="fa fa-music fa-lg"></i></span><br />'+ 
         '<span class="span-padding"><i class="fa fa-clock-o fa-lg"></i></span><br />'+ 
        '</div>'+ 

        '<div class="inner-right">'+ 
         '<span class="span-padding">'+data.events[i].lat+', '+data.events[i].lng+'</span><br />'+ 
         '<span class="span-padding">'+data.events[i].network+'</span><br />'+ 
         '<span class="span-padding">'+data.events[i].tone+'</span><br />'+ 
         '<span class="span-padding">'+data.events[i].datetime+'</span><br />'+ 
        '</div>'+ 

        '</div>'+ 
       '</div>'+ 
       '</div>'; 

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

       infowindow = new google.maps.InfoWindow(); 

       map.panTo(marker.getPosition()) 

       google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){ 
        return function() { 

         /* close the previous info-window */ 
         closeInfos(); 

         infowindow.setContent(content); 
         infowindow.open(map,marker); 


         /* keep the handle, in order to close it on next click event */ 
         infos[0]=infowindow; 

        }; 
       })(marker,content,infowindow)); 

       google.maps.event.addListener(marker,'mouseout', (function(marker,content,infowindow){ 
        return function() { 

         closeInfos(); 

        }; 
       })(marker,content,infowindow)); 



       function closeInfos(){ 

        if(infos.length > 0){ 

         /* detach the info-window from the marker ... undocumented in the API docs */ 
         infos[0].set("marker", null); 

         /* and close it */ 
         infos[0].close(); 

         /* blank the array */ 
         infos.length = 0; 
        } 
       } 
      } 
     }); 

    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

    window.setInterval(function(){ 
     readJSONData(); 
    }, 5000); 

</script> 

Answer 1

Одной из причин этой проблемы являются неопределенными переменными lat и lng в начале initialize() метода:

function initialize() { 

    latlng = new google.maps.LatLng(lat, lng); 

    mapOptions = { 
    ... 

lat и lng должны быть определены для некоторых значений. Например:

function initialize() { 
    lat = 47.89; 
    lng = 13.45; 

    latlng = new google.maps.LatLng(lat, lng); 
    ... 

Другая проблема заключается в том, что в конце коды есть вызов:

google.maps.event.addDomListener(window, 'load', initialize); 

, который должен быть закомментирован.