JSFiddle - React, Tailwind, and code Playground

by Ritesh Kashyap

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<label><b>Enter ZipCode : </b></label><br/>
<br/>
    <input id="txtAddress" type="text"  maxlength="6" />
    <br />
    <p><b>Please select the country:</b></p>
  <input type="radio" id="in" name="country" value="India">
  <label for="in">India</label><br>
  <input type="radio" id="us" name="country" value="US">
  <label for="us">US</label><br>
    <br/>
    <input id="submitPincode" type="button" onclick="GetLocation()" value="Submit" />
       <input type="button" onclick="reset('tablearea')" value="Reset"/>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQ5qpbhqLjQY2iZ6VLseYDhRqjEb_bJhk&callback=initMap&libraries=visualization&v=weekly"></script>
  <!--  <script async
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=places&callback=initMap"> 
</script> -->
  <div id="map"></div>
  <br/>
  <br/>
    <div id="places"></div>
     <div id="more"></div>
     <br/>
     <br/>
     <div id="tablearea">
     </div>
</body>
</html>

CSS

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
  display:none;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

li{
  display:none;
}

JavaScript

function reset(tablearea)
{
    document.getElementById(tablearea).innerHTML = "";
     var btn = document.getElementById('submitPincode');
        btn.disabled = false;
     document.getElementById("in").checked = false;
    document.getElementById("us").checked = false;
    document.getElementById('txtAddress').value = "";
}  
  
  function GetLocation() {
    var btn = document.getElementById('submitPincode');
        btn.disabled = true;
            var geocoder = new google.maps.Geocoder();
var country="";
if(document.getElementById('in').checked == true) {  country=document.getElementById('in').value;   
} else {  
         country=document.getElementById('us').value;   
}  
            var address = document.getElementById("txtAddress").value+","+country;
           // var address = document.getElementById("txtAddress").value+",IN";
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                     latitude = results[0].geometry.location.lat();
                     longitude = results[0].geometry.location.lng();
                    console.log("Latitude: " + latitude + "\nLongitude: " + longitude);
                    initMap(latitude,longitude);
                } else {
                    console.log("Request failed.")
                }
            });
        };
function initMap(latitude,longitude) {
debugger
  // Create the map.
  console.log("Inside initMap");
  console.log(latitude);
  console.log(longitude);
  const centreVar = { lat: latitude, lng: longitude };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: centreVar,
    zoom: 17,
    mapId: "8d193001f940fde3",
  });
  // Create the places service.
  const service = new google.maps.places.PlacesService(map);
  let getNextPage;
  const moreButton = document.getElementById("more");

  moreButton.onclick = function () {
    moreButton.disabled = true;
    if...