JSFiddle - React, Tailwind, and code Playground

by Ajay Barot

JavaScript

var geocoder;
var map;
var marker;

function gmaps_init() {
    var latlng = new google.maps.LatLng(20.593684, 78.96288);
    var options = {
        zoom: 2,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("gmaps-canvas"), options);
    geocoder = new google.maps.Geocoder();
    marker = new google.maps.Marker({
        map: map,
        draggable: true
    });
    google.maps.event.addListener(marker, 'dragend', function () {
        geocode_lookup('latLng', marker.getPosition());
    });
    google.maps.event.addListener(map, 'click', function (event) {
        marker.setPosition(event.latLng)
        geocode_lookup('latLng', event.latLng);
    });
    $('#gmaps-error').hide();
}

function update_map(geometry) {
    map.fitBounds(geometry.viewport)
    marker.setPosition(geometry.location)
}

function update_ui(address, latLng) {
    $('#gmaps-input-address').autocomplete("close");
    $('#gmaps-input-address').val(address);
}

function geocode_lookup(type, value, update) {
    update = typeof update !== 'undefined' ? update : false;
    request = {};
    request[type] = value;
    geocoder.geocode(request, function (results, status) {
        $('#gmaps-error').html('');
        $('#gmaps-error').hide();
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                update_ui(results[0].formatted_address,
                results[0].geometry.location)
                if (update) {
                    update_map(results[0].geometry)
                }
            } else {
                $('#gmaps-error').html("Sorry, something went wrong. Try again!");
                $('#gmaps-error').show();
            }
        } else {
            if (type == 'address') {
                $('#gmaps-error').html("Sorry! We couldn't find " + value + ". Try a different search term, or click the map.");
                $('#gmaps-error').show();
           ...