JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<div class="map_wrapper">
    <div id="countries">
        <span>Франция</span>
        <span>Испания</span>
        <span>Чехия</span>
        <span>Италия</span>
        <span>Япония</span>
        <span>Португалия</span>
        <span>Китай</span>
        <span>Франция</span>
        <span>Испания</span>
        <span>Чехия</span>
        <span>Италия</span>
        <span>Япония</span>
        <span>Португалия</span>
        <span>Китай</span>         
    </div>
    <div class="map_inner">
        <div id="map"></div>       
    </div>
</div>

<div class="wrap">

</div>

CSS

.map_inner * {
    -webkit-transform: none !important;    
}

.map_wrapper {
    height: 300px;
    position: relative;
    z-index: 1;
}

#countries {
   position: absolute;
   z-index: 2;
    background: lightBlue;
    bottom: 0;
    left: 0;
    padding: 10px;
    overflow: hidden;
    height: 100px;
}

#countries span {
    cursor: pointer;
    margin: 0 10px 0 0;
    border-bottom: 1px dashed;
    display: block;
}

.map_inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#map {
    height: 100%;   
}

.wrap {
    position: relative;
    z-index: 1;
    height: 300px;
    background: #ccc url(http://www.camp4joy.org/Na/Nature-259.jpg) 50% 200px no-repeat fixed;
}

JavaScript

$(function()
{
	$('#countries').jScrollPane();
});

function initialize() {
	var latlng = new google.maps.LatLng(61.280793,95.515137),
		myOptions = {
			zoom: 6,
			center: latlng,
			disableDefaultUI: true,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			scrollwheel: false
		},

	map = new google.maps.Map(document.getElementById("map"), myOptions);

	geocoder = new google.maps.Geocoder();

	$('#countries span').click(function() {
		var country = $(this).text();
		geocoder.geocode({ 'address': country }, function (results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				map.panTo(results[0].geometry.location);
				map.panBy(-250, -20)
				map.setZoom(6)
			}
		});
	});
}

function loadScript() {
	var script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize';
	document.body.appendChild(script);
}

$(function() {
	loadScript();
});