JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"></script>

<input id="position" name="position" size="60"><br>
<input id="zoom" name="zoom" size="60"><br>  
<input id="lat" name="lat" size="60"><br> 
<input id="lng" name="long" size="60"><br>

<div id="coords">aaaa</div>
  <div id="panel">
    <button type="button" class="btn btn-default" aria-label="Left Align" onclick="deleteMarkers();">
      Track <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
    </button>
    </div>
  <div id="map-canvas"></div>
</div>

CSS

#map-canvas {
    height: 250px;
    margin: 0px;
    padding: 0px
  }
  #panel {
    position: absolute;

    z-index: 5;
    padding: 10px;
}

JavaScript

var map;
  var markers = [];

  function initialize() {
    var initialPoint = new google.maps.LatLng(19.133613400204645,72.81841278076172);
    var mapOptions = {
      zoom: 15,
      center: initialPoint,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      draggable:true
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    // This event listener will call addMarker() when the map is clicked.
    google.maps.event.addListener(map, 'click', function(event) {
      addMarker(event.latLng); // Duplicate issue 

      //get data of point to form
      //marker = new google.maps.Marker({position: event.latLng, map: map});

      saveData(map, event);
    });



    // Adds a marker at the center of the map.
    addMarker(initialPoint);
  }

  function saveData(map, event)
  {
     
    var zoomLevel = map.getZoom();
    var pos = (event.latLng.toString()); //.toString()
    
    pos = pos.replace('(','');
    pos = pos.replace(')','');
    pos = pos.replace(' ','');
     

    //$('#position').val('(zoom,lat,lng) = '+zoomLevel+','+pos);
    var arr = pos.split(',');
   $('#zoom').val(zoomLevel);
    $('#lat').val( arr[0]);
    $('#lng').val( arr[1]);
     
  }

// function saveData1(map, pos)
//   {
  
//     var zoomLevel = map.getZoom();
//     //var pos = event.split(","); //.toString()
//     //alert(typeof(pos)+"vp");
//    // pos = pos.replace('(','');
//    // pos = pos.replace(')','');
//   //  pos = pos.replace(' ','');

//     //$('#position').val('(zoom,lat,lng) = '+zoomLevel+','+pos);
//     var arr = pos.split(',');
//    $('#zoom').val(zoomLevel);
//     $('#lat').val( arr[0]);
//     $('#lng').val( arr[1]);
     
//   }

  // Add a marker to the map and push to the array.
  function addMarker(location) {
    //markers = [];
    //clearMarkers();
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      draggable:true
    });

    google.maps.event.addListener(marker,...