JSFiddle - React, Tailwind, and code Playground

HTML

<div id="locInfo">
    <button onclick="getLoc()">Get Location</button><br />

    Latitude: <span id="latitude"></span><br />
    Longitude: <span id="longitude"></span><br />
    Accuracy (in meters): <span id="accuracy"></span><br /><br />
    Location Status:<span id="geolocatorStatus"></span><br />
    Error Message: <span id="errormsg"></span><br />    
</div>
<div id="map-canvas"></div><br>




<script src="http://diveintohtml5.info/j/geoPosition.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

CSS

#map-canvas {
        height: 350px;
        width: 350px;
        margin: 0px;
        padding: 0px;
      }

#locInfo{
    vertical-align: top;
}

div {
    display: inline-block;
}

JavaScript

// by Troy Whorten, Feb 28 2014 (though to be fair I didn't write much of it...)

function getLoc() {
    if (geoPosition.init()) {
      geoPosition.getCurrentPosition(geoSuccess, geoError);
    }
}

var map;

function geoSuccess(p) {
     document.getElementById("latitude").innerHTML =    p.coords.latitude;
     document.getElementById("longitude").innerHTML =    p.coords.longitude;
     document.getElementById("accuracy").innerHTML =    p.coords.accuracy;
    
    // from Google Maps API 
    // https://developers.google.com/maps/documentation/javascript/examples/map-simple
    // I just swaped out lat and long for Syndney, Australia for the geolocation info above
      var mapOptions = {
                        zoom: 15,
                        center: new google.maps.LatLng(p.coords.latitude, p.coords.longitude)
                      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
     
    // this I copied from a different Google Maps API example
    // https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
      var pos = new google.maps.LatLng(p.coords.latitude,
                                       p.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });
    
    //end Google API Code
}

function geoError() {
  document.getElementById("errormsg").innerHTML = "Could not find you!";
}