title: Google Maps API: pan to markers from a list.
body: <p>Hello :) Please bear with me, I'm not a coder but I'm trying to learn by doing. This is the page I'm working on currently; <a href="http://www.websu.it/devnw/dev/contact.html" rel="noreferrer">http://www.websu.it/devnw/dev/contact.html</a>.
  I've currently set up a map using the Google Maps API, using the following javascript:</p>
  
  <pre><code>    function initialize() {
  
            var mapOptions = {
            zoom: 5,
            center: new google.maps.LatLng(48.160, -6.832),
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
  
           map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
               setMarkers(map, cities);
                }
  
  
   var cities = [
     ['Groningen', 53.216723950863425, 6.560211181640625, 4],
     ['San Francisco', 34.01131647557699, -118.25599389648437, 5],
     ['New York City', 40.7143528, -74.0059731, 3],
     ['Amsterdam', 52.3702157, 4.8951679, 2],
     ['Maroubra Beach', -33.950198, 151.259302, 1]
   ];
  
   function setMarkers(map, locations) {
  
     for (var i = 0; i &lt; locations.length; i++) {
       var city = locations[i];
       var myLatLng = new google.maps.LatLng(city[1], city[2]);
       var marker = new google.maps.Marker({
           position: myLatLng,
           map: map,
           title: city[0],
           zIndex: city[3]
       });
     }
   }
  
   This continues below...
  </code></pre>
  
  <p>And then I created a list where every li element, when clicked upon, results in a panning of the map to one of these markers. </p>
  
  <p>I've added the following code and it works very well. But it means that I have to add the longitudes/latitudes for every city in the above code array of "cities", as well as in the code below for the var laLatLng. How can I get the lat's and lon's more easily in the panning script below?</p>
  
  <pre><code>      $(document).ready(function() {
        initialize();
  
        $("#contacts").on("click", "#sanfransisco", function() {
            var laLatLng = new google.maps.LatLng(34.01131647557699, -118.25599389648437);
            map.panTo(laLatLng);
            map.setZoom(5);
         });
        $("#contacts").on("click", "#groningen", function() {
            var laLatLng = new google.maps.LatLng(53.216723950863425, 6.560211181640625);
            map.panTo(laLatLng);
            map.setZoom(6);
        });
        $("#contacts").on("click", "#nyc", function() {
            var laLatLng = new google.maps.LatLng(40.7143528, -74.0059731);
            map.panTo(laLatLng);
            map.setZoom(6);
        });
        $("#contacts").on("click", "#losangeles", function() {
            var laLatLng = new google.maps.LatLng(52.3702157, 4.8951679);
            map.panTo(laLatLng);
            map.setZoom(6);
        });
    });
  </code></pre>
  
  <p>I hope someone can explain to me how to get the variables from cities into clickable list javascript. Thanks a lot, I deeply appreciate your response! </p>