JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>
<div style="margin-top:10px;">
  <label for="zone">zone:</label>
  <input type="text" id="zone" value="30" size="2">
  <label for="umtx">x:</label>
  <input type="text" id="umtx" value="669858"  size="10">
  <label for="umty">y:</label>
  <input type="text" id="umty" value="4343364"  size="10">
  <button type="button" onclick="convert()">convert</button>
</div>
<div style="margin-top:10px;">
  <label for="lat">lat:</label>
  <input type="text" id="lat" >
  <label for="long">long:</label>
  <input type="text" id="long" >
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.2/proj4.js"></script>

<script>
    var utm = "+proj=utm +zone=30";
    var wgs84 = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
    console.log(proj4(utm,wgs84,[669858, 4343364]));
 </script>
 <script>
 var map = null;
 var marker = null;
 function initialize() {
	console.log("initialize");
    var myLatLng = new google.maps.LatLng(45.4375, 12.3358);
    var    myOptions = {
            zoom: 8,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
        marker = new google.maps.Marker({
            position: myLatLng,
            map: map
        });

    marker.setMap(map);
    moveMarker(map, marker);

}

function moveMarker(map, marker) {

    //delayed so you can see it move
    setTimeout(function () {

        marker.setPosition(new google.maps.LatLng(45.4375, 12.3358));
        map.panTo(new google.maps.LatLng(45.4375, 12.3358));

    }, 1500);

};

 function convert(){
    var zone = Number(document.getElementById("zone").value);
    var x = Number(document.getElementById("umtx").value);
    var y = Number( document.getElementById("umty").value);
     var utm = "+proj=utm +zone=" + zone;
    var wgs84 = "+proj=longlat +ellps=WGS84...

CSS

#map-canvas {
    height: 300px;
    width: 600px;
    background-color: #CCC;
}