JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<div id="message">Location unknown</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

JavaScript

var getZipFromBrowser = (function() {
    

  function codeLatLng(lat, lng, cb) {
    var geocoder = new google.maps.Geocoder();;
    lat = parseFloat(lat);
    lng = parseFloat(lng);
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          
          var zip = null;
          if (results[0]) {
              for (var i = 0; i < results[0].address_components.length; i++) {
                  if (results[0].address_components[i].types[0] === "postal_code") {
                      zip = results[0].address_components[i].long_name;                      
                  }
              }                  
          }
          
          return cb(zip);
      }
    });
  }    
    
        
    return function(cb) {
            
                
        function errorHandler(error) {
            cb(null);
        }

        function successHandler(location) {
            
            //var message = document.getElementById("message"), html = [];
            //html.push("<img width='256' height='256' src='http://maps.google.com/maps/api/staticmap?center=", location.coords.latitude, ",", location.coords.longitude, "&markers=size:small|color:blue|", location.coords.latitude, ",", location.coords.longitude, "&zoom=14&size=256x256&sensor=false' />");
            //message.innerHTML = JSON.stringify(location);
            //message.innerHTML = html.join("");
            
            codeLatLng(location.coords.latitude, location.coords.longitude, function(zip) {
               cb(zip);   
            });
        }
        
       navigator.geolocation.getCurrentPosition(successHandler, errorHandler);
    };
})();


getZipFromBrowser(function(zip) {
    document.getElementById('message').innerHTML =  zip;
});