JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <div id="map_canvas"></div>
    <div id="sidebar"></div>

CSS

html, body { margin: 0; padding: 0; height: 100% }
      #map_canvas { height: 100% }
      #sidebar { position: absolute; background-color: #ffc; right: 0px; top: 0px; height: 100%; width: 100px; padding: 10px; text-decoration: underline; font-family: Verdana, sans-serif; color: #66f;}

JavaScript

var map;

      var markers = [];
      var mapOptions = {
        center: new google.maps.LatLng(0.0, 0.0),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        google.maps.event.addListener(map, 'click', function (event) {
            addMarker(event.latLng);
        });
      }

      function addMarker(pos) {
        var marker = new google.maps.Marker({
          map: map,
          position: pos
        });
        markers.push(marker);
        count = markers.length - 1;
        addMarkerListener(marker, count, 6);
        makeDiv(count, 4, "Marker #");
        count++;
      }

      function addMarkerListener(marker, index, zoomLevel) {
        google.maps.event.addListener(marker, 'click', function(event) {
          zoomIn(index, zoomLevel);
        });
      }

      function makeDiv(index, zoomLevel, content) {
        document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>';
      }

      function zoomIn(index, zoomLevel) {
        map.setCenter(markers[index].getPosition());
        map.setZoom(zoomLevel);
      }
      
      google.maps.event.addDomListener(window, 'load', initialize);