setCenter() in Google Maps API to change center on map after click on button ?

[sashavalentina]

I have four different locations that is displayed from a set of arrays of coordinates. I’d like to change the shown location in my Google Map by click on the buttons that are coordinated.

I tried to use a Javascript function with setCenter(), but unfortunately, it doesn’t work. Has anyone had an idea what might be wrong?

i checked it in inspection mode, and I see this in my button element

<button type="button" onclick="javascript:'undefined'">1.5298600000000002,110.36003000000001</button>

here is the full code

<script>
      function myMap() {
        var mapProp = {
          position: new google.maps.LatLng(32.735316, -117.149046),
          zoom: 1,
        };
        var map = new google.maps.Map(
          document.getElementById("googleMap"),
          mapProp
        );
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=myMap"></script>
 <script>
      var coord_lists;
      load(coord_lists);

      function load() {
        const coordinates_lists = [];

        console.log(coordinates_lists);
        const map = new google.maps.Map(document.getElementById("googleMap"), {
          zoom: 5,
          center: coordinates_lists[0],
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        });
        map.setZoom(9);
        console.log(map);

        var locations = [
          [1.5298600000000002, 110.36003000000001],
          [1.52872, 110.36453],
          [1.5278, 110.36775000000002],
          [1.5273500000000002, 110.37160000000002],
        ];

        function ZoomAndCenter() {
          map.setCenter(
            new google.maps.LatLng(locations[i][0], locations[i][1])
          );
          map.setZoom(15);
        }
        var result = "";
        for (var i = 0; i < locations.length; i++) {
          result =
            result +
            "<button type='button' onclick=\"javascript:'" +
            ZoomAndCenter(locations[i]) +
            "'\">" +
            locations[i] +
            "</button>" +
            "<br>";
        }
        document.getElementById("results").innerHTML = result.toString(result);

        var marker, i;
        var markers = [];

        for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][0], locations[i][1]),
            map: map,
          });
        }
      }
    </script>

[m3g4p0p]

Hi @sashavalentina, inside the loop where you are assembling the buttons, you’re immediately calling ZoomAndCenter(locations[i]) and adding the return value to the result string, which is undefined (and also wrapped in quotes here):

Now I suppose you might stringify the function call like e.g. 'ZoomAndCenter(' + locations[i] + ')', however I’d strongly suggest to avoid such inline JS in your HTML anyway and use addEventListener() instead; have your ZoomAndCenter() function actually accept a location parameter and create your buttons like so:

const locations = [
  [1.5298600000000002, 110.36003000000001],
  [1.52872, 110.36453],
  [1.5278, 110.36775000000002],
  [1.5273500000000002, 110.37160000000002],
];

const results = document.getElementById('results')

function ZoomAndCenter(location) {
  map.setCenter(
    new google.maps.LatLng(location[0], location[1])
  );
  map.setZoom(15);
}

for (let i = 0; i < locations.length; i++) {
  const button = document.createElement('button')
  const location = locations[i]

  button.textContent = location
  // The important bit: don't call ZoomAndCenter(location)
  // immediately, but add an event listener to do so
  button.addEventListener('click', () => ZoomAndCenter(location))
  results.appendChild(button)
}

HTH

[sashavalentina]

@m3g4p0p

const locations = [
  [1.5298600000000002, 110.36003000000001],
  [1.52872, 110.36453],
  [1.5278, 110.36775000000002],
  [1.5273500000000002, 110.37160000000002],
];

const results = document.getElementById('results')

function ZoomAndCenter(location) {
  map.setCenter(
    new google.maps.LatLng(location[0], location[1])
  );
  map.setZoom(15);
}

for (let i = 0; i < locations.length; i++) {
  const button = document.createElement('button')
  const location = locations[i]

  button.textContent = location
  // The important bit: don't call ZoomAndCenter(location)
  // immediately, but add an event listener to do so
  button.addEventListener('click', () => ZoomAndCenter(location))
  results.appendChild(button)
}

Thanks man! you really helped me a lot!

[m3g4p0p]

No worries. :-)