<script>
    // Initialize/create variables
    var startLatLong = { lat: 53.483959, lng: -2.244644 };
    var latField = document.getElementById('latitude');
    var lngField = document.getElementById('longitude');
    var searchField = document.getElementById('ApproximateLocation');
    var searchSubmitButton = document.getElementById('submitSearch');
    var service;
    var searchRequest;
    var map;
    var marker;
    var mapService;

    // Map Initialization (Callback from Google Map API)
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: startLatLong,
            zoom: 6
        });

        marker = new google.maps.Marker({
            draggable: true,
            animation: google.maps.Animation.Po,
            position: startLatLong
        });

        addListeners();
        initiatePlaces();
    }

    function addListeners(){
        // Updates the marker when the map is clicked
        map.addListener('click', function (event) {
            marker.setMap(map);
            marker.setPosition(event.latLng);
            marker.setAnimation(google.maps.Animation.Po);

            updateLatLng();
        });

        // Updates the latlong when the marker is dragged
        marker.addListener('dragend', function (event) {
            updateLatLng();
        });

        // Update map from text search
        searchSubmitButton.onclick = function () {
            doSearch();
        };
    }

    // Updates the map using search terms
    function doSearch() {
        request = {
            query: searchField.value
        }
        service.textSearch(request, callback);
    }

    // Updates the latlong with the current marker
    function updateLatLng() {
        latField.value = marker.getPosition().lat();
        lngField.value = marker.getPosition().lng();
    }

    // Intializes the 'Places' API
    function initiatePlaces() {
        service = new google.maps.places.PlacesService(map);
    }

    // A callback function to process the search results
    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            // Here, the first search result is used, and a zoom level is set

            var place = results[0];
            map.panTo(place.geometry.location);
            map.setZoom(8);
        }
    }
</script>