how to automatically find map addres as customer write in fields - using jquery about django-map-widgets HOT 12 CLOSED

{% extends "mapwidgets/google-point-field-widget.html" %}

{% load i18n %}

{% block javascript %}
    <script type="application/javascript">
        (function($) {
            var mapOptions = JSON.parse("{{ options|escapejs }}");
            var field_value = JSON.parse("{{ field_value|escapejs }}");

            var wrapElemSelector = "#{{ name }}-mw-wrap";
            var mapElemID = "{{ name }}-map-elem";
            var googleAutoInputID = "{{ name }}-mw-google-address-input";
            var locationInputID = "#{{ id }}";

            var mapWidgetOptions = {
                locationInput: $(locationInputID),
                wrapElemSelector: wrapElemSelector,
                locationFieldValue: field_value,
                mapElement: document.getElementById(mapElemID),
                mapCenterLocationName: mapOptions.mapCenterLocationName,
                mapCenterLocation: mapOptions.mapCenterLocation,
                coordinatesOverlayToggleBtn: $(".mw-btn-coordinates", wrapElemSelector),
                coordinatesOverlayDoneBtn: $(".mw-btn-coordinates-done", wrapElemSelector),
                coordinatesOverlayInputs: $(".mw-overlay-input", wrapElemSelector),
                coordinatesOverlay: $(".mw-coordinates-overlay", wrapElemSelector),
                myLocationBtn: $(".mw-btn-my-location", wrapElemSelector),
                addressAutoCompleteInput: document.getElementById(googleAutoInputID),
                deleteBtn: $(".mw-btn-delete", wrapElemSelector),
                addMarkerBtn: $(".mw-btn-add-marker", wrapElemSelector),
                loaderOverlayElem: $(".mw-loader-overlay", wrapElemSelector),
                zoom: mapOptions.zoom,
                markerFitZoom: mapOptions.markerFitZoom,
                GooglePlaceAutocompleteOptions: mapOptions.GooglePlaceAutocompleteOptions,
                markerCreateTriggerNameSpace: "google_point_map_widget:marker_create",
                markerChangeTriggerNameSpace: "google_point_map_widget:marker_change",
                markerDeleteTriggerNameSpace: "google_point_map_widget:marker_delete",
                placeChangedTriggerNameSpace: "google_point_map_widget:place_changed"
            };
            var widget = new DjangoGooglePointFieldWidget(mapWidgetOptions);
            map_widget_autofill(widget);

            {% block extra_javascript %}

            {% endblock %}
        })(jQuery || django.jQuery);
    </script>
{% endblock javascript %}

var widget = new DjangoGooglePointFieldWidget(mapWidgetOptions);
map_widget_autofill(widget);

(function($) {
    map_widget_autofill = function (widget) {
        var locationInput = widget.locationInput;
        var form = $(locationInput).closest('form');
        var street = form.find('#id_street');
        var postcode = form.find('#id_postcode');
        var city = form.find('#id_city');
        var country = form.find('#id_country');

        // if the location input isn't set, try to fetch GPS coordinates at document load
        if (!locationInput.val()) {
            update_map();
        }

        // update every time the text inputs change
        $([street, postcode, city, country]).each(function(){
            $(this).keyup(function() {
                update_map();
            });
        });

        // update every time the select changes
        $(country).change(function() {
            update_map();
        });

        function update_map() {
            // join all address parts values into single string
            var address = street.val() + ', ' + postcode.val() + ' ' + city.val() + ', ' + country.val();

            // initialize autocomplete service API
            var autocomplete_service = new google.maps.places.AutocompleteService();

            // try to find address prediction using autocomplete service API
            autocomplete_service.getPlacePredictions({input: address}, function (predictions, status) {
                // if status is incorrect, clear search value
                if (status != google.maps.places.PlacesServiceStatus.OK) {
                    $(widget.addressAutoCompleteInput).val('');
                    widget.deleteMarker();
                } else if (predictions.length >= 1) {
                    // otherwise if there is at least 1 prediction available, pick the very first one
                    var address_by_prediction = predictions[0].description;

                    // set the address as search value
                    $(widget.addressAutoCompleteInput).val(address_by_prediction);

                    // try to find the GPS coordinates of the predicted address
                    widget.geocoder.geocode({'address' : address_by_prediction}, function(results, status) {
                        if (status === google.maps.GeocoderStatus.OK) {
                            // check the successful result
                            var geo_location = results[0].geometry.location;
                            var latitude = geo_location.lat();
                            var longitude = geo_location.lng();

                            // add marker to map
                            widget.addMarkerToMap(latitude, longitude);
                            widget.updateLocationInput(latitude, longitude);

                            // set center position (or fit bounds)
                            widget.map.setCenter({lat: latitude, lng: longitude});
                            // widget.fitBoundMarker();

                            // set zoom (change according your needs or use bounds if you wish)
                            widget.map.setZoom(15);

                        } else {
                            // geocoder couldn't find a GPS...
                            widget.deleteMarker();
                            console.warn("Cannot find " + address_by_prediction + " on google geo service.")
                        }
                    });
                }
            });
        }
    }
})(jQuery || django.jQuery);