JSFiddle - React, Tailwind, and code Playground

by Camille Bechayda

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}
.labels {
    color: black;
    font-family:"Lucida Grande", "Arial", sans-serif;
    font-size: 8px;
    text-align: center;
    padding-left: 20px;
}

JavaScript

function initMap() {
    var latLng = new google.maps.LatLng(49.47805, -123.84716);
    var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 12,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });


		var lableText = "123"; 
    var marker = new MarkerWithLabel({
        position: homeLatLng,
        map: map,
        labelContent: lableText,
        labelAnchor: new google.maps.Point(15, 34),
        labelClass: "labels", // the CSS class for the label
        icon: pinSymbol('yellow', lableText)
    });

    var iw = new google.maps.InfoWindow({
        content: lableText
    });
    google.maps.event.addListener(marker, "click", function (e) {
        iw.open(map, this);
    });
}

function pinSymbol(color, text) {
		var len = text.length * 4 - (text.length * text.length) * 0.11;
    var path = 'M 0,0 -1,-2 V -21 H 1 V -2 z M 1,-20 H ' + len + ' V -10 H 1 z';
    return {
        path: path,
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        scale: 2
    };
}
google.maps.event.addDomListener(window, 'load', initMap);