Logicify Location picker using dynamic change for input

Question

I'm using Logicify Location Picker.

I want to load the map based on the lat and lng value as demonstrated in this example:

<div id="us2" style="width: 500px; height: 400px;"></div>               
Lat.: <input type="text" id="us2-lat"/>
Long.: <input type="text" id="us2-lon"/>
<script>$('#us2').locationpicker({
    location: {latitude: 46.15242437752303, longitude: 2.7470703125},   
    radius: 300,
    inputBinding: {
        latitudeInput: $('#us2-lat'),
        longitudeInput: $('#us2-lon'),
    }
    });
</script>

But in my case i want to keep these fields for lat and long hidden and trigger change dynamically when i get the value of lat and lng based on the city name through this function:

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

here are my hidden fields:

<input type="hidden" id="lat">
<input type="hidden" id="lng">

plus i have a select with id = "city" having some city names i.e lahore

and here is what i'm doing:

            var inital_lat = "31.554397"; /*lahore pakistan*/
            var inital_lng = "74.356078";
            $('#locationpicker').locationpicker({
              location: {
                latitude: inital_lat,
                longitude: inital_lng
              },
              radius: 100,
              inputBinding: {
                latitudeInput: $("#lat"),
                longitudeInput: $("#lng")
              }
            });
            $("#city").change(function() {
              var geocoder = new google.maps.Geocoder();
              geocoder.geocode({
                'address': "" + $("#city").val() + ", Pakistan"
              }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                  $("#lat").val(results[0].geometry.location.lat()).trigger('change'); /* i've also tried .change() */
                  $("#lng").val(results[0].geometry.location.lng()).trigger('change');

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

if i make textfields type = text and enter some value and press enter the map dynamically changes, but for dynamic change (keeping fields hidden) it does not work.

Any help would be greatly appreciated.

Update:

here is a code from locationpicker.jquery.js file:

 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]);
     });
   });
 }

Looks like it looks for the change in lat and lng field, and thats what i'm doing changing it dynamically. whats the matter?

Answer 1

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.

Answer 2

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.