JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://host.appgeo.com/libs/geo/alpha2/jquery-geo-alpha2.min.js"></script>
<div id="map"></div>
<div id="content">
    <form id="loc">
        <label>Zoom to
            <input type="text" autofocus />
        </label>
        <button type="submit">Go</button>
    </form>
</div>

CSS

#map { position: fixed; bottom: 0; left: 0; right: 0; top: 0; }

#content {
    background: #fefefe;
    border: 2px solid #444;
    border-radius: 8px;
    padding: 4px;
    position: relative;
    max-width: 80%;
}

JavaScript

var map;

function initMap(center)
{
  map = $("#map").geomap({
    center: center || [-71.0597732, 42.3584308],
    zoom: 14
  });
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function (p) {
    initMap([p.coords.longitude, p.coords.latitude]);
  }, function (error) {
    initMap();
  });
} else {
  initMap();
}

$("#loc").submit(function() {
    $.ajax({
        url: "http://open.mapquestapi.com/nominatim/v1/search",
        data: {
            format: "json",
            q: $("#loc input").val()
        },
        dataType: "jsonp",
        jsonp: "json_callback",
        success: function(results) {
            if (results.length > 0) {
                var nbbox = results[0].boundingbox;
                map.geomap("option", "bbox", [
                    nbbox[2], // min longitude
                    nbbox[0], // min latitude
                    nbbox[3], // max longitude
                    nbbox[1]  // max latitude
                ]);
            }
        }
    });
    return false;
});