Google maps - click na h2 a scroll do markera

0

Czy jest możliwość centrowania mapy na danym markerze po kliknięciu jakiegoś elementu strony np nagłówka? Chciałbym stworzyć listę lokalizacji i obok mapkę
Mam taki kod: (wrzuciłbym na fiddle ale nie wyświetla tam mapy)

<!DOCTYPE html>
<html>
  <head>
    <title>Simple click event</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 50%;
		width: 50%;
      }
    </style>
  </head>
  <body>
	<div class="test">
		<h2 id="war1">warszawa 1</h2>
		<h2 id="war2">warszawa 2</h2>
	</div>
    <div id="map"></div>
    <script>
      function initMap() {
		var war1 = document.getElementById('war1');
		var war2 = document.getElementById('war2');
		
        var wawa1 = {lat: 52.286151, lng: 21.082302};
		var wawa2 = {lat: 52.279519, lng: 21.075046};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: wawa2
        });

        var marker = new google.maps.Marker({
          position: wawa1,
          map: map,
          title: 'Click to zoom'
        });
		var marker2 = new google.maps.Marker({
          position: wawa2,
          map: map,
          title: 'Click to zoom'
        });
		
		var marker = new google.maps.Marker({
          position: wawa1,
          map: map,
          title: 'Click to zoom'
        });

        marker.addListener('click', function() {
          map.setZoom(14);
          map.setCenter(marker.getPosition());
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9LSszjf6o0LwOR9ZQ4lMvuiTsRjJo6mY&callback=initMap">
    </script>
  </body>
</html>

Kombinowałem coś w stylu, ale wywala błąd w konsoli (Uncaught TypeError: war1.addListener is not a function):

war1.addListener('click', function() {
          map.setZoom(14);
          map.setCenter(marker.getPosition());
        });
0

Polecam użyć jakiejś biblioteki która ułatwi Ci pracę z gm np. http://maplacejs.com/


    var  map = new Maplace({
              map_div: '#map',
              locations: markers
          }).Load();


    $('.map_marker').on('click', function (e) {
        var index = $(this).data('index');
                
        map.ViewOnMap(index);         
    });

1 użytkowników online, w tym zalogowanych: 0, gości: 1