JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<script src="http://vikku.info/programming/js/geodata-jsr-class.js"></script>
<div class='main'>
    
<h1></h1>

    <form id="myform">
        <div class="contents">
<b>*Select area</b>

            <p><span>Continent:</span> 
                <select name="continent" id="continent" onchange="getplaces(this.value,'country');">
                    <option value=""></option>
                </select>
            </p>
            <p><span>Country:</span> 
                <select name="country" id="country" onchange="getplaces(this.value,'province');">
                    <option value=""></option>
                </select>
            </p>
            <p><span>State / Provice:</span> 
                <select name="province" id="province" onchange="getplaces(this.value,'region')">
                    <option value=""></option>
                </select>
            </p>
            <p><span>County / Region:</span> 
                <select name="region" id="region" onchange="getplaces(this.value,'city')">
                    <option value=""></option>
                </select>
            </p>
            <p><span>City:</span> 
                <select name="city" id="city" onchange="zoomto(this.value);codeAddress(placedata[this.value].name)">
                    <option value=""></option>
                </select>
            </p>
        </div>
    </form>
    <div id="map_canvas"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

var whos = null;
var placedata = [];
var map;
var geocoder = new google.maps.Geocoder();

function getplaces(gid, src) {
    if ( !! placedata[gid]) {
        map.setCenter({
            lat: parseFloat(placedata[gid].lat),
            lng: parseFloat(placedata[gid].lng)
        });
        switch (src) {
            case "continent":
                map.setZoom(3);
                break;
            case "country":
                map.setZoom(5);
                break;
            case "province":
                map.setZoom(6);
                break;
            case "region":
                map.setZoom(7);
                break;
            case "city":
                map.setZoom(8);
                break;
        }
        codeAddress(placedata[gid].name);
    }

    whos = src;


    //  var  request = "http://ws.geonames.org/childrenJSON?geonameId="+gid+"&callback=getLocation&style=long";
    var request = "http://www.geonames.org/childrenJSON?geonameId=" + gid + "&callback=listPlaces&style=long";
    aObj = new JSONscriptRequest(request);
    aObj.buildScriptTag();
    aObj.addScriptTag();
}

function listPlaces(jData) {
    counts = jData.geonames.length < jData.totalResultsCount ? jData.geonames.length : jData.totalResultsCount;
    who = document.getElementById(whos);
    who.options.length = 0;

    if (counts) who.options[who.options.length] = new Option('Select', '');
    else who.options[who.options.length] = new Option('No Data Available', 'NULL');

    for (var i = 0; i < counts; i++) {
        who.options[who.options.length] = new Option(jData.geonames[i].name, jData.geonames[i].geonameId);
        placedata[jData.geonames[i].geonameId] = jData.geonames[i];
    }

    delete jData;
    jData = null;
}
function zoomto(gid) {
   if ( !! placedata[gid]) {
        map.setCenter({
            lat: parseFloat(placedata[gid].lat),
            lng: parseFloat(placedata[gid].lng)
        });
       map.setZoom(14);
   }
}
function codeAddress(address)...