[Solved] Google Maps Onclick panTo new location Too Much Recursion error [closed]

by


The argument to panTo needs to be a google.maps.LatLng object or a LatLngLiteral

What you are giving it is neither (it is a comma separated string that happens to contain a latitude and a longitude:

<li><a class="location" data-location="52.240477,-0.902656">northampton</a></li>

$('.location').on('click',function(){
  pan($(this).data('location'));
});

function pan(latlon) {
    var panPoint = new google.maps.LatLng(latlon);
    map.panTo(panPoint)
}

working fiddle

working code snippet:

var map;

function pan(latlon) {
  var coords = latlon.split(",");
  var panPoint = new google.maps.LatLng(coords[0], coords[1]);
  map.panTo(panPoint)
}

function initialize() {
  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);
}

function toggleBounce() {

  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
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<a name="locations"></a>

<ul>
  <li><a class="location" data-location="52.240477,-0.902656">northampton</a>

  </li>
  <li><a class="location" data-location="51.454265,-0.97813">reading</a>

  </li>
  <li><a class="location" data-location="51.262251,-0.467252">surrey</a>

  </li>
  <li><a class="location" data-location="51.555774,-1.779718">swindon</a>

  </li>
  <li><a class="location" data-location="51.864211,-2.238033">gloucestershire</a>

  </li>
</ul>
<div id="map-canvas"></div>

1

solved Google Maps Onclick panTo new location Too Much Recursion error [closed]