JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="content">
    <div id="addresses" class="left">
        <ul>
            <li id="address1" data-id="0" class="list">St. Louis, MO</li>
            <li id="address2" data-id="1" class="list">Chicago, IL</li>
            <li id="address3" data-id="2" class="list">Denver, CO</li>
        </ul>
    </div>
    <div id="map_canvas" class="right"></div>
</div>

CSS

.left{
    float:left;
    width:250px;
}
.right{
    float:left;
    width:700px;
    height:700px;
    border: 1px gray solid;
}

.list{
    padding:5px;
    border:1px gray solid;  
    background-color:#fff;  
}

.list:hover{
    background-color:#ccc;   
    cursor:pointer;
}

JavaScript

//Set mapcenter coords
var stLouis = new google.maps.LatLng(38.8, -90.2);

//map options
var myOptions = {
    zoom: 5,
    center: stLouis,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    scaleControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.DEFAULT
    } //standard controls
};

//creates the map object and binds it to the selected <div> element.
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
var geocoder = new google.maps.Geocoder();
var infoWindow = new google.maps.InfoWindow({});
var markers = [];

//get list items
var $listItems = $('li');

//geo code and build markers for each list item.
for (var i = 0; i < $listItems.length; i++) {
    geocoder.geocode({
        'address': $($listItems[i]).text()
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
                draggable: true,
                originalPos: results[0].geometry.location
            });

            google.maps.event.addListener(marker, 'dragend', function() {
                infoWindow.setContent("marker originally at this position: " + this.originalPos + " was dragged to: " + this.position);
                infoWindow.open(map, this);
            });


            markers.push(marker);
        }
    });



}

//add click events
$('li').click(function() {
    map.setZoom(5); //return zoom to original.   
    infoWindow.setContent($(this).text()); //set info window content
    var id = $(this).attr('data-id'); //get the index
    infoWindow.open(map, markers[id]); //open infowindow
    map.setCenter(markers[id].position);
    map.setZoom(map.getZoom() + 5); //zoom in based on original zoom level
});