Google Maps Onclick Panto New Location Too Much Recursion Error

I have a simple list of locations with the lat and lon stored as data attr

• ).on('click',function(){ pan($(this).data('location')); }); functionpan(latlon) { var panPoint = new google.maps.LatLng(latlon); map.panTo(panPoint) }

  working fiddle

  working code snippet:

  var map;
  
  functionpan(latlon) {
    var coords = latlon.split(",");
    var panPoint = new google.maps.LatLng(coords[0], coords[1]);
    map.panTo(panPoint)
  }
  
  functioninitialize() {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
    marker = new google.maps.Marker({
      map: map,
      draggable: true,
      animation: google.maps.Animation.DROP,
      position: new google.maps.LatLng(0, 0)
    });
  
    $('.location').on('click', function() {
      pan($(this).data('location'));
    });
    google.maps.event.addListener(marker, 'click', toggleBounce);
  }
  
  functiontoggleBounce() {
  
    if (marker.getAnimation() != null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }
  
  
  
  google.maps.event.addDomListener(window, 'load', initialize);

  html,
  body,
  #map-canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
  }

  <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maps.googleapis.com/maps/api/js"></script><aname="locations"></a><ul><li><aclass="location"data-location="52.240477,-0.902656">northampton</a></li><li><aclass="location"data-location="51.454265,-0.97813">reading</a></li><li><aclass="location"data-location="51.262251,-0.467252">surrey</a></li><li><aclass="location"data-location="51.555774,-1.779718">swindon</a></li><li><aclass="location"data-location="51.864211,-2.238033">gloucestershire</a></li></ul><divid="map-canvas"></div>