JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;.js"></script>
<div id="gmap"></div>
<ul>
    <li><a href="#" onclick="oMap.setCenter(new google.maps.LatLng(20, 14.2));oMap.setZoom(2);">blah convention center</a></li>
    <li><a href="#">blah shopping mall</a></li>
    <li><a href="#">blah strip bar</a></li>
    <li><a href="#">blah music hall</a></li>
</ul>

CSS

#gmap {
    width: 100%;
    height: 300px;
}

ul {
    width: 100%;
    overflow: hidden;
}
ul li {
    float: left;
    padding: 5px;
    list-style: none;
}
ul li a {
    display: block;
    padding: 8px 10px;
    background: #800;
    color: #fff;
}

JavaScript

var map;
function initialize() {
    var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(35.682329,139.766092),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
    
    //for marker
    var image = {
        url: 'http://placekitten.com/60/60',
        size: new google.maps.Size(60,60),//icon size
        origin: new google.maps.Point(0,0),//origin
        point: new google.maps.Point(30,34)//fit to point
    };
    var marker = new googLatLng(35.682329,139.766092);//marker latlng
    var shopMarker = new google.maps.Marker({
        position: marker,
        map: map,
        icon: image
    });
}

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


//window resize centering
google.maps.event.addDomListener(window, 'resize', function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center); 
});