JSFiddle - React, Tailwind, and code Playground

by Dan Vassallo

HTML

<button id="latlng">
GET LAT LNG FROM GLOBAL SCOPE
</button>

<div id="map">

</div>

CSS

#map{
  width: 500px;
  height: 500px;
}

JavaScript

var lat,
    lng;

//load the maps script async
function loadScript(src, callback) {

    var script = document.createElement("script");
    script.type = "text/javascript";
    if (callback) script.onload = callback;
    document.getElementsByTagName("head")[0].appendChild(script);
    script.src = src;
}

//invoke maps api
loadScript('https://maps.googleapis.com/maps/api/js?v=3');


$(document).ready(function() {

    getLocation();

    $('#latlng').click(function() {
        alert("lat: " + lat + ", lng: " + lng);
    });

    // your map options 

});

function initMap(lat, lng) {
    var mapOptions = {
        center: new google.maps.LatLng(lat, lng),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var geocoder = new google.maps.Geocoder;
    var infoWindow = new google.maps.InfoWindow();
    var latlngbounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    google.maps.event.addListener(map, 'click', function(e) {
        //console.log(e.latLng);
        //alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
        latlongtoZip(e.latLng.lat(), e.latLng.lng());

    });
}

function latlongtoZip(lat, lng) {

    var urlRequest = "http://api.geonames.org/findNearbyPostalCodesJSON?lat=" + lat + "&lng=" + lng + "&radius=.1&username=jagross66"
    var retCode = "";

    $.ajax({
        url: urlRequest,
        method: 'GET'
    }).done(function(response) {
        console.log(response);
        var postalCodesArray = response.postalCodes;
        console.log(response);
        for (i = 0; i < postalCodesArray.length; i++) {
            console.log(postalCodesArray[i].postalCode);
        }

        var zipCode = postalCodesArray[0].postalCode

        alert("zipcode: " + zipCode);

        return zipCode;

    });
}

function getLocation() {

    var options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
   ...