Logicify Location Picker Using Dynamic Change For Input

I'm using Logicify Location Picker. I want to load the map based on the lat and lng value as demonstrated in this example:

Solution 1:

I have the same problem, for a quick solution you can change the code of the library locationpicker.jquery.js from the code you have pasted to this:

if (inputBinding.latitudeInput) {
   inputBinding.latitudeInput.on("change", function(e) {
     if (!e.originalEvent) {
       //return
     }
     GmUtility.setPosition(gmapContext, new google.maps.LatLng($(this).val(), gmapContext.location.lng()), function(context) {
       context.settings.onchanged.apply(gmapContext.domContainer, [GmUtility.locationFromLatLng(context.location), context.radius, false]);
     });
   });
 }
 if (inputBinding.longitudeInput) {
   inputBinding.longitudeInput.on("change", function(e) {
     if (!e.originalEvent) {
       //return
     }
     GmUtility.setPosition(gmapContext, new google.maps.LatLng(gmapContext.location.lat(), $(this).val()), function(context) {
       context.settings.onchanged.apply(gmapContext.domContainer, [GmUtility.locationFromLatLng(context.location), context.radius, false]);
     });
   });
 }

Just comment twice the return in if (!e.originalEvent) {

This is NOT the best solution, because you are changing the library, and if you update the library you lose your changes.

Solution 2:

The way you trigger the textboxes won't work. Trigger using an event object. Refactor your $("#city").change() event like this

            $("#city").change(function (evt) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                'address': "" + $("#city").val() + ", Pakistan"
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    evt.type = 'change';//change the event's type to change whatever it was originally
                    $("#lat").val(results[0].geometry.location.lat()).trigger(evt); //use the modified event object to trigger rather passing event's name
                    $("#lng").val(results[0].geometry.location.lng()).trigger(evt);

                    alert($("#lat").val() + " " + $("#lng").val());
                } else {
                    alert("Something got wrong " + status);
                }
            });
        });

Hope this helps.

Share