JSFiddle - React, Tailwind, and code Playground

by john_s

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<div id="mapDiv" style="width: 500px; height: 375px; border: solid 2px #666;">
</div>
<div id="dialog">
</div>

JavaScript

var points = [
    { lat: 36.170603, lng: -114.577065 },
    { lat: 35.144478, lng: -115.33516959999997 }
];

function createMarkerForPoint(point) {
    return new google.maps.Marker({
        position: new google.maps.LatLng(point.lat, point.lng)
    });
}

var $mapDiv = $('#mapDiv');

var mapDim = {
    height: $mapDiv.height(),
    width: $mapDiv.width()
}

var markers = [];
$.each(points, function() { markers.push(createMarkerForPoint(this)); });

var map = new google.maps.Map($mapDiv[0], {
    center: new google.maps.LatLng(35.6, -114.8),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 8
});

$.each(markers, function() {
    this.setMap(map);
    google.maps.event.addListener(this, 'click', function () {
        $('#dialog').dialog('option', { marker: this } ).dialog('open');
    });
});

$('#dialog').dialog({
    autoOpen: false,
    height: 100,
    width: 380,
    resizable: false,
    modal: true,
    buttons: {
       "Cancel": function () {
          $(this).dialog("close");
       },
       "Remove Marker": function () {
          $(this).dialog('close').dialog('option').marker.setMap(null);
       }
    }
 });