JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?key==&amp;libraries=places&amp;region=UK"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;region=UK"></script>
<input type="text" name="search_location" id="search_location" placeholder="In (Location)" autocomplete="off">
<input type="hidden" name="location" id="location">

JavaScript

google.maps.event.addDomListener(window, 'load', function () {
                                var options = {
                                    language: 'en-GB',
                                    types: ['(cities)'],
                                    componentRestrictions: {country: "gb"}
                                };
                                var places = new google.maps.places.Autocomplete(document.getElementById('search_location'),options);
                                google.maps.event.addListener(places, 'place_changed', function () {
                                    var place = places.getPlace();
                                    var address = place.formatted_address;
                                    var latitude = place.geometry.location.lat();
                                    var longitude = place.geometry.location.lng();
                                    var city    = place.address_components[0].short_name;
                                    var mesg = "Address: " + address;
                                    mesg += "\nLatitude: " + latitude;
                                    mesg += "\nLongitude: " + longitude;
                                    mesg += "\nCity:" + city;
                                    alert(mesg);
                                });
                            });