JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas"></div>

CSS

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

JavaScript

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  let icon = {
    // url: 'https://www.shareicon.net/data/128x128/2015/09/27/108149_map_512x512.png',
    // scaledSize: new window.google.maps.Size(30, 30)
    path: 'M 172.268,501.67 C 26.97,291.031 0,269.413 0,192 0,85.961 85.961,0 192,0 c 106.039,0 192,85.961 192,192 0,77.413 -26.97,99.031 -172.268,309.67 -9.535,13.774 -29.93,13.773 -39.464,0 z',
    fillColor: '#000000',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 0,
    scale: 0.1,
    anchor: new google.maps.Point(195, 510)
  }

  let marker = new google.maps.Marker({
    icon: icon,
    map: map,
    position: map.getCenter()
  });
  var measle = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    }
  })
}
google.maps.event.addDomListener(window, "load", initialize);