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;
 }

JavaScript

int numMarkers=0;

jQuery(document).ready(function () {
    var map;
    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);
    });
});

function placeMarker(location, map) {
    numMarkers++;
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true
    });
    
    $("#MarkerData").append('<input id="Lat'+numMarkers'" name="Lat'+numMarkers'" type="text" value="'+location.lat+'" />'
   
}