JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script src="http://www.kjftw.com/gmap/images/icons/numeric/red10.png"></script>
<div id='map_canvas'></div>

CSS

#map_canvas{
    width: 500px;
    height: 500px;
}
   .labels {
     color: white;
     background-color: red;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     text-align: center;
     width: 10px;     
     white-space: nowrap;
   }

JavaScript

function initialize() {
    var latlng = new google.maps.LatLng(52.474, -1.868);

    var myOptions = {
        zoom: 2,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    var countries = [
        ['england', 51.508515 , -0.125487, 5],
        ['france', 46.227638 , 2.213749, 4],
        ['switcherland', 46.818188 , 8.227512, 3],
        ['italy', 41.871940 , 12.56738, 2],
        ['greece', 39.074208 , 21.82431, 1]
    ];

    for (var i = 0; i < countries.length; i++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(countries[i][1], countries[i][2]),
            map: map,
            title: countries[i][0],
             draggable: true,
       raiseOnDrag: true,
       labelContent: "A",
       labelAnchor: new google.maps.Point(3, 30),
       labelClass: "labels", // the CSS class for the label
       labelInBackground: false,
            zIndex: countries[i][3]
        });
    }
}

window.onload = initialize;