JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<a name="locations"></a>

<ul>
    <li><a class="location" data-location="52.240477,-0.902656">northampton</a>

    </li>
    <li><a class="location" data-location="51.454265,-0.97813">reading</a>

    </li>
    <li><a class="location" data-location="51.262251,-0.467252">surrey</a>

    </li>
    <li><a class="location" data-location="51.555774,-1.779718">swindon</a>

    </li>
    <li><a class="location" data-location="51.864211,-2.238033">gloucestershire</a>

    </li>
</ul>
<div id="map-canvas"></div>

CSS

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

JavaScript

function toggleBounce() {

    if (marker.getAnimation() != null) {
        marker.setAnimation(null);
    } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
    }
}

function pan(latlon) {
    var coords = latlon.split(",");
    var panPoint = new google.maps.LatLng(coords[0], coords[1]);

    map.panTo(panPoint)
}

var map;

function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    marker = new google.maps.Marker({
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(0, 0)
    });

    $('.location').on('click', function () {
        pan($(this).data('location'));
    });
    google.maps.event.addListener(marker, 'click', toggleBounce);

}

google.maps.event.addDomListener(window, 'load', initialize);