JSFiddle - React, Tailwind, and code Playground

by designworksinteractive

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: #333;
    background-color:white ;
    font-family:"Lucida Grande", "Arial", sans-serif;
    font-size: 12px;
    text-align: center;
    width: 50px;
    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,
        draggable: false,
        raiseOnDrag: false,
        labelContent: "HAVANA",
        labelAnchor: new google.maps.Point(20, 2),
        labelClass: "labels", // the CSS class for the label
        labelInBackground: false,
                icon: "http://cdn.mysitemyway.com/icons-watermarks/simple-ios-orange-gradient/bfa/bfa_map-marker/bfa_map-marker_simple-ios-orange-gradient_512x512.png"
    });

    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: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 0,
        scale: 1
    };
}
google.maps.event.addDomListener(window, 'load', initMap);