JSFiddle - React, Tailwind, and code Playground

by santosh joshi

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
COUNTRY : <span id="country" class="label label-info"></span> <br/>
STATE : <span id="state" class="label label-info"></span> <br/>
CITY : <span id="city" class="label label-info"></span><br/>
PIN CODE : <span id="pincode" class="label label-info"></span><br/>
CITY STATE COUNTRY :  <span id="address" class="label label-info"></span><br/>
COMPLETE ADDRESS :  <span id="completeAddress" class="label label-info"></span><br/>
ERROR : <span id="error" class="label label-danger"></span><br/>

JavaScript

var geocoder;

//Check whether browser support geolocation
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(latlongSuccessHandler, errorHandler);
} 

//Get the latitude and the longitude;
function latlongSuccessHandler(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  codeLatLng(lat, lng)
}

function errorHandler(){
  $("#error").html("Geocoder failed");
}

function initialize() {
  geocoder = new google.maps.Geocoder();
}

function codeLatLng(lat, lng) {
  var latlng = new google.maps.LatLng(lat, lng);
  //get area information from 
  
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    console.log(results)
      if (results[1]) {
       //formatted address
       $("#address").html(results[6].formatted_address) ;
       $("#completeAddress").html(results[0].formatted_address) ;
      //find country name
      
	      var city = null;
	      var state= null ;
	      var country = null;
	      var pincode = null;
      
          for (var i=0; i<results[0].address_components.length; i++) {
          for (var b=0;b<results[0].address_components[i].types.length;b++) {

          //there are different types that might hold a city admin_area_lvl_1 usually 
          //does in come cases looking for sublocality type will be more appropriate
             if (results[0].address_components[i].types[b] == "administrative_area_level_2") {
                  //this is the object you are looking for
                  if(city == null){
                  	city= results[0].address_components[i];
                  }
              }
          
              if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                 //this is the object you are looking for
                 if(state == null){
                 	state = results[0].address_components[i];
                 }
             }
              
            ...