JSFiddle - React, Tailwind, and code Playground

by sebababi

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>

<!-- CHECK ELEMENT ID also UPDATE CSS -->
<div id="map_canvas"></div>

CSS

html, body, #map_canvas { margin: 0; padding: 0; height: 100% }

  .labels {
     color: blue;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     width: 25px;
    line-height:15px;
     white-space: nowrap;
    z-index:9999999999999999999;
   }

JavaScript

var map;
var mapOptions = {
    center: new google.maps.LatLng(51.3, -1.80),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900", new google.maps.Size(70, 83), new google.maps.Point(0, 0), new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow", new google.maps.Size(89, 85), new google.maps.Point(0, 0), new google.maps.Point(12, 35));

function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var point = [
        new google.maps.LatLng(1.3667, 103.8000),
        new google.maps.LatLng(1.3667, 103.8000),
        new google.maps.LatLng(1.3667, 103.8000),
        new google.maps.LatLng(1.3667, 103.8000),
        new google.maps.LatLng(51.0000, 9.0000),
        new google.maps.LatLng(51.0000, 9.0000),
        new google.maps.LatLng(51.5142, -0.0931),
        new google.maps.LatLng(51.5142, -0.0931),
        new google.maps.LatLng(54.0000, -2.0000),
        new google.maps.LatLng(51.6000, -1.2500),
        new google.maps.LatLng(51.7500, -1.2500)
        ];
    for (var i = 0; i < point.length; i++) {
        var marker = new MarkerWithLabel({
            map: map,
            position: point[i],
            icon: pinImage,
            shadow: pinShadow,
            labelContent: i,
            labelAnchor: new google.maps.Point(12, -5),
            labelClass: "labels"
        });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);