JSFiddle - React, Tailwind, and code Playground

by mozzadrella

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="turbo_map"/>

CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#turbo_map { height: 100%; width: 100% }

JavaScript

var myLatLng = new google.maps.LatLng(42.37264, -71.109653);
var marker
var mapOptions = {
    zoom: 12,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var MozzBubble;

map = new google.maps.Map(document.getElementById("turbo_map"), mapOptions);


 var triangleCoords = [
    new google.maps.LatLng(42.376316, -71.111476), //home//
    new google.maps.LatLng(42.375383, -71.121784), //skool//
    new google.maps.LatLng(42.353216, -71.048241), //workbar//
    new google.maps.LatLng(42.376316, -71.111476) //home//
  ];

  MozzBubble = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF3366",
    strokeOpacity: 0.8,
    strokeWeight: 4,
    fillColor: "#FF3366",
    fillOpacity: 0.35
  });
      
  MozzBubble.setMap(map);
 
marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: "Haus"
});