Logicify / jquery-locationpicker-plugin

JQuery Location Picker plugin
MIT License
389 stars 260 forks source link

onchange event not working #149

Closed aalainn closed 4 years ago

aalainn commented 4 years ago

Hi Since "locationNameInput" seems not to work anymore I try a workaround with a google.maps.Geocoder Object.

Initialisation of the locationpicker:

    $('#thegooglemap').locationpicker({
        location: {
            latitude: 46.15242437752303,
            longitude: 2.7470703125
        },
        radius: 0,
        inputBinding: {
            latitudeInput: $('#task-location-lat'),
            longitudeInput: $('#task-location-long'),
            // locationNameInput: $('#task-location-name') //seems not to work anymore
        },
        enableAutocomplete: true,
        onchanged: function() {
            console.log('onchanged');
        }
    });

Getting longitude and latitude for the address:

    function getLocationCoords(callback) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
            'address': "" + $("#task-location-name").val() + ""
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                callback(results[0].geometry.location.lat(), results[0].geometry.location.lng());
            } else {
                alert("Something got wrong " + status);
            }
        });
    }

When the inputfield of the addressname changes, then callback the location coordinates:

    $("#task-location-name").change(function () {
        getLocationCoords(setMarkerPosition);
    });

The setMarkerPosition() function outputs the long/lat vaules of the entered address locationname:

    function setMarkerPosition(lat, lng) {
        $('#task-location-long').val(lng).trigger('change');
        $('#task-location-lat').val(lat).trigger('change');
        console.log(`${lat}, ${lng}`);
    }

The problem is, that the onchange event in the locationpicker object does not fire even if I trigger an onchange event with for example $('#task-location-long').val(lng).trigger('change'); When I enter some values manually into the textfield of for example #task-location-long then everything works.

My goal is to update the marker position not only when I enter lon/lat values into the fields but also when I enter a locationname into the locationNameField.

How do I have to do that?

aalainn commented 4 years ago

Sorry for my stupidness. By studying the Code of the script I descovered the "enableAutocompleteBlur" property. Setting it to "true" and knowing that you have to enter at least 6 characters for a locationname (I tried always with shorter citynames) solves my problem :-)