Google Maps Api v3 - map.panTo causing “too much recursion”

问题

I'm having a problem finishing off my script, it works using map.setCenter to reposition on each marker, but I would like to pan to each new marker. However, when I use the panTo function the markers don't appear, although the map does show and pans around to where each new marker would be. Firebug gives me a "too much recursion" error too. Can anyone help?

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

回答1:

One reason for this problem are undefined variables lat and lng at the beginning of initialize() method:

function initialize() {

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

    mapOptions = {
    ...

lat and lng have to be defined to some values. For example:

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

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

The other problem is that at the end of code there is a call:

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

which should be commented out.

来源：https://stackoverflow.com/questions/21881114/google-maps-api-v3-map-panto-causing-too-much-recursion