CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Venelin
Venelin

Reputation: 3306

JQuery Location Picker - Updating the latitude and longitude by select menu

More about the jQuery Location Picker you can see here: http://logicify.github.io/jquery-locationpicker-plugin/

<select id="EstablishmentSelection" name="EstablishmentSelection" style="display:block;width:90%;margin-left:20px;margin-top:30px;">
    <option value="1" data-lat="42.683300018311" data-lon="23.316699981689" selected="selected">ul. "Doctor Hristo Stamboliyski", 1463 Sofia, Bulgaria</option>
    <option value="2" data-lat="42.69005083666654" data-lon="23.305370330810092">bul. "General Eduard I. Totleben" 34, 1606 Sofia, Bulgaria</option>
    <option value="3" data-lat="42.68759034298229" data-lon="23.33266448974564">bulevard "Evlogi i Hristo Georgiev" 91, 1142 Sofia, Bulgaria</option>
</select>

This is the select menu that i have. Here is the JavaScript that i use:

<script>
var latitude = <?PHP echo $Latitude1;?>;
var Longitude = <?PHP echo $Longtitude1;?>;


    // Start changing of Radius Save Functions
        $( "#EstablishmentSelection" ).change(function() {
            Latitude = $(this).find('option:selected').data('lat');
            Longtitude = $(this).find('option:selected').data('lot');
        }); 

    $('#us1').locationpicker({
        location: {latitude: Latitude, longitude: Longitude},
        radius: 1000,
        zoom: 13,
        inputBinding: {
            radiusInput: $('#us1-radius1')
        },
        enableAutocomplete: false
    });     
</script>

I have no problems on loading of the page to run the locationpicker. I want on change of the select menu #EstablishmentSelection to get the custom attribute data from data-lat and data-lon of the selected option and update the printed google map.

How can i run update of the displayed map?

Thanks in advance!

Upvotes: 0

Views: 1858

Answers (1)

dtanders
dtanders

Reputation: 1845

That documentation is... sorely lacking, so I poked around in his source and found a command to set the location.

$( "#EstablishmentSelection" ).change(function() {
     var $input = $(this);
     $('#us1').locationpicker('location', {
         latitude: parseFloat($input.find('option:selected').data('lat')),
         longitude: parseFloat($input.find('option:selected').data('lon'))/*,
         [optional] radius: number*/
     });
});

And you could make that a little cleaner by making a list of locations ahead of time and using the option's value attribute to reference them instead of creating them on the fly each time, but I'll leave that to you :)

Upvotes: 2

Related Questions