JSFiddle - React, Tailwind, and code Playground

by wwwroot

HTML

<link rel="stylesheet" href="https://developers.google.com/maps/documentation/javascript/examples/default.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>
<div id="map-canvas"></div>

JavaScript

var poly;
var geodesicPoly;
var marker1, marker2, marker3, marker4;
var pinTextColour = '000000';

var red = 'FF6347';
var yellow = 'F0E68C';
var orange = 'CD853F';

function getPinIcon(letter, pinColor) {
    return new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + letter + "|" + pinColor + "|" + pinTextColour,
    new google.maps.Size(21, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));
}

function initialize() {
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(34, -40.605),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);



    marker1 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(40.71435280, -74.0059731)
    });

    marker2 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(48.8566140, 2.35222190),
        icon: getPinIcon('D', red)
    });

    marker3 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(53.3428, -6.2661),
        icon: getPinIcon('P', orange)
    });

    marker4 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(40.4000, -3.6833),
        icon: getPinIcon('M', yellow)
    });

    var bounds = new google.maps.LatLngBounds(marker1.getPosition(),
    marker2.getPosition());
    map.fitBounds(bounds);


    var geodesicOptions = {
        strokeColor: '#8B0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        geodesic: true,
        map: map
    };

    update(geodesicOptions);
}

function update(geodesicOptions) {
    new google.maps.Polyline(geodesicOptions).setPath([marker1.getPosition(), marker2.getPosition()]);
    new google.maps.Polyline(geodesicOptions).setPath([marker1.getPosition(), marker3.getPosition()]);
    new...