JSFiddle - React, Tailwind, and code Playground

by techno2mahi

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>
<p>With MarkerWithLabel you can easily modify a standard marker to include an identifying character of your choice. In this case the marker is superimposed with the letter "A".</p>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>
<div id="log"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}
.labels {
    color: black;
    background-color: yellow;
    font-family:"Lucida Grande", "Arial", sans-serif;
    font-size: 11px;
    text-align: center;
    width: 35px;
    white-space: nowrap;
}

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 marker = new MarkerWithLabel({
        position: homeLatLng,
        map: map,  
        labelContent: "RT-12",
        labelAnchor: new google.maps.Point(-8, -11),
        labelClass: "labels", // the CSS class for the label
        labelInBackground: false,
        icon: pinSymbol('orange')
    });

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

function log(h) {
    document.getElementById("log").innerHTML += h + "<br />";
}

function pinSymbol(color) {
    return {
        path: 'M41.162 25h-32.02c-.933 0-1.701-.802-1.701-1.714 0-.152.028-.324.059-.462l1.704-11.899c.145-.773.841-.925 1.674-.925h28.553c.827 0 1.529.139 1.672.909l1.704 12.116c.026.141.06.224.06.376-.001.912-.773 1.599-1.705 1.599zm-1.281 13.345c-1.803 0-3.265-1.419-3.265-3.188 0-1.757 1.462-3.174 3.265-3.174 1.791 0 3.256 1.417 3.256 3.174 0 1.769-1.465 3.188-3.256 3.188zm-29.501 0c-1.79 0-3.253-1.419-3.253-3.188 0-1.757 1.463-3.174 3.253-3.174 1.808 0 3.268 1.417 3.268 3.174 0 1.769-1.46 3.188-3.268 3.188zm5.62-35.345h20v3h-20c-2 0-2-3 0-3zm28.202 4.59c-.584-2.813-2.29-3.946-5.073-5.078-2.778-1.128-9.216-2.48-14.058-2.48-4.863 0-11.334 1.353-14.115 2.48-2.782 1.133-4.46 2.265-5.039 5.078l-1.917 15.659v21.751h3v2c0 4 5 4 5 0v-2h25v2c0 4 6 4 6 0v-2h3v-21.751l-1.798-15.659z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
    };
}
google.maps.event.addDomListener(window, 'load', initMap);