JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<p> Click the button to get coordinates of Current Position:</p>

<button onclick="getLocation()">Get Current Location</button>

<div class="wrap">
  
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);

    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
    lat=position.coords.latitude;
    lon=position.coords.longitude;
    latlon=new google.maps.LatLng(lat, lon)
    mapholder=document.getElementById('mapholder')
    mapholder.style.height='500px';
    mapholder.style.width='500px';

  var myOptions={
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  };
    var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
    var marker=new google.maps.Marker({position:latlon,map:map,title:"Your Current Position"});

    x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }


function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
</script>


<br>
<div class = "right">
<h2> Save Animal's Location </h2>
<form action="insert.php" method="post">
Animal Type: <input type="text" name="firstname">
latitude: <input type ="text" name="lat" >
longitude <input type ="text" name="lon">
Date: <input...

CSS

body{
    background-size: cover;
     margin: 100px 40px 10px 70px;
}
#mapholder{
    float:left;
    width:550px;
    min-width:550px;
}

.right{
    float:right;
   width:400px;
    background-color:#ddd;
}