JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
  }

.labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 40px;     
     border: 2px solid black;
     white-space: nowrap;
   }

JavaScript

var strokeWidth = 2;
var myLatLng = new google.maps.LatLng(20.291, 153.027);
var mapOptions = {
    zoom: 1,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROAD
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var p1 = new google.maps.LatLng(22.291, 110.027);
var p2 = new google.maps.LatLng(22.291, 157.027);

var markerImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAlCAMAAAAUaRt1AAAAVFBMVEUgftD///8ATJ7y8vLW1tbj4+MCYLL8/PwUbL729vbo6Oj19fU/hsTt7e3v9Poadsjf398KaLp2qtjb6PShxOJXlcwdcbrn7/cLabtrotLR4vFcndXkn2FYAAABHElEQVQ4jaXTWbKDIBAF0GaQySCombP/fb5GZNAHlY/cP+seFcQGQqTUI2tk1FISAkRqZs3QiLFMSwLYG8+b8QYFSGY47YQbJkFbT5WDRpyi3moY8QF7L3J2gY8YgQ2c7rcIsmcHQPnADuAR+0cX3HXo9b0HcBHXdb2mJTQAzBdCLjP0gQpA/QCcCEC4HsD+PU3vIk7AiVv8DrckTiBsISZt5ATEmsAq2kAmIDtgyumAkNerOu//Hwqey/IsVw0wL8v8G1DfXqE+H3UC1U+LcZhysf20X3/7MjjVs1U1OGX0ilC0Gr00vN5ngb33eXjT+CPyUeCrQ5nHP52gtlGE3up8shkkceorsAncED/0NQjChLXV/QFsG9qWXuUPZ6ARI+eOptAAAAAASUVORK5CYII=";

var marker1 = new MarkerWithLabel({
       position: p1,
       draggable: true,
       raiseOnDrag: true,
       icon: {url: markerImage},  
       map: map,
       labelContent: "$425K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     });

var marker2 = new MarkerWithLabel({
       position: p2,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "$425K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     })