JSFiddle - React, Tailwind, and code Playground

by mdares

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div id="map"></div>
<div id="MarkerData"></div>

CSS

#map {
     height: 500px;
     width: 500px;
 }

.infoWindow {
    width: 150px;
    line-height:1.35;
}

JavaScript

var numMarkers = 0;
var markers = new Array();
var map;

jQuery(document).ready(function () {

    var aelggialp = new google.maps.LatLng(46.80121, 8.226692);
    var options = {
        zoom: 8,
        center: aelggialp,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);
    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng, map, numMarkers);
    });
});

function placeMarker(location, map) {
    numMarkers++;
    var image = new google.maps.MarkerImage('http://newsite.nwtresearch.com/largeTDRedIcons/marker' + numMarkers + '.png',
    new google.maps.Size(20, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));

    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true,
        icon: image,
        clickable: true,
        id: numMarkers
    });
    marker.info = new google.maps.InfoWindow({
        content: '<div class="infoWindow">*Enter a description for this location*</div>'
    });
    google.maps.event.addListener(marker, 'click', function () {
        marker.info.open(map, marker);
    });
    google.maps.event.addListener(marker, 'dragend', function (event) {
        updateMarkerPosition(marker);
    });
    markers[numMarkers] = marker;
    $('#MarkerData').append('Marker number ' + numMarkers + ': ');
    $('#MarkerData').append('Latitude: <span id="Lat' + numMarkers + '" >' + location.lat() + '</span> Longitude: <span id="Lng' + numMarkers + '" >' + location.lng() + '</span> <input id="Description' + numMarkers + '" name="Description' + numMarkers + '" type="text" value=""><a href="#" id="Update' + numMarkers + '" customVal="' + numMarkers + '">Update</a><br />');

    var linkID = '#Update' + numMarkers;
    $(document).on('click', linkID, updateMarkerDescription);

}

function updateMarkerPosition(marker) {
    $('#Lat'+marker.id).text(roundit(marker.position.lat(), 7));
...