JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="content_window"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

function initialize() {
    var latlng = new google.maps.LatLng(47.605, -122.333);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
    var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: pinSymbol('red')
    });

    var marker1 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(47.5, -122.0),
        icon: pinSymbol('green')
    });
    var marker2 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(47.6, -122.2),
        icon: pinSymbol('orange')
    });
    var marker3 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(47.7, -122.1),
        icon: pinSymbol('yellow')
    });
}

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: 2,
        scale: 1
    };
}

google.maps.event.addDomListener(window, 'load', initialize);