JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<div id='map_canvas' style="width: 100%;height: 100vh"></div>
<div class="location-details" id='1'>1</div>
<div class="location-details" id='2'>2</div>
<div class="location-details" id='3'>3</div>

CSS

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.location-details {
  background-color: blue;
  color: white;
  width: 100%;
  display: inline-block;
  height: 100vh;
}

.location-details:nth-child(odd) {
  background-color: red;
}

JavaScript

jQuery(function($) {
  // Asynchronously Load the map API 
  var script = document.createElement('script');
  script.src =
    "http://maps.googleapis.com/maps/api/js?callback=initialize";
  document.body.appendChild(script);
});

function initialize() {
  var map;
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
    mapTypeId: 'roadmap'
  };
  // Display a map on the page
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  map.setTilt(45);
  // Multiple Markers
  var markers = [
    ['Anuradhapura', 8.3372688, 80.3619399, '#1'],
    ['Sigiriya', 7.9568242, 80.7434198, '#2'],
    ['Hotel See Kandy', 7.2930541, 80.6159102, '#3']
  ];
  // Display multiple markers on a map
  var infoWindow = new google.maps.InfoWindow(),
    marker, i;
  // Loop through our array of markers & place each one on the map  
  for (i = 0; i < markers.length; i++) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      title: markers[i][0],
      url: markers[i][3]
    });
    google.maps.event.addListener(marker, 'click', (function(marker) {
    return function(evt) {
      console.log('click');
      // console.log($(marker.url));
      var elem = $(marker.url);
      console.log(elem);
      // alert(elem);

      $('html, body').animate({
        scrollTop: elem.offset().top
      }, 1000);
    }}(marker)))
    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  }
  // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
  var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(8);
    google.maps.event.removeListener(boundsListener);
  });
}