Agfdhyk

I have a postcode feature which when a user enters a postcode it will display a list of delivery addresses, their times and their location on a google map.

This works as it should but when I click onto another delivery address the map doesn't update with the lat long associated to that list item.

How would I go about writing an on click function to change the google map to the new lat long of the selected item?

This is my jQuery for displaying the data after a user has searched

$('#search').blur(function() {

    $('#result').html('');

    $('#lat-long').html('');

    $('#opening-times').html('');

    $('#del-lists-wrapper').html('');

    var searchField = $('#search').val();

    var expression = new RegExp(searchField, "i");

    $.getJSON('https://api.myjson.com/bins/m0a3m', function(data) {

        //console.log('json')

        $.each(data, function(key, value) {



            if (value.address.postcode.search(expression) != -1) {

            //console.log(value)

                //COURIER ADDRESS DETAILS

                $('#result').append('<li data-contentid='+ key +' class="list-group-item courier"><div class="c-name font-weight-bold"> ' + value.name + ' </div><div class="address"> ' + value.address.name + ',' + value.address.line1 + ',' + value.address.town + ',' + value.address.county + ',' + value.address.postcode + '</div></li>');

                //LAT AND LONG

                var mapProp= {

                    center:new google.maps.LatLng(value.location.latitude,value.location.longitude),

                    zoom:5,

                    };

                var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);



                //OPENING TIMES

                $('#opening-times').append('<li id=open-times-'+ key +'  class="list-group-item op-times"><div class="c-name font-weight-bold"> Opening Times </div><div class="">Mon ' + value.opening_times.Mon + ' </div><div class="">Tues ' + value.opening_times.Tues + ' </div><div class="">Wed ' + value.opening_times.Wed + ' </div><div class="">Thurs ' + value.opening_times.Thurs + ' </div><div class="">Fri ' + value.opening_times.Fri + ' </div><div class="">Sat ' + value.opening_times.Sat + ' </div><div class="">Sun ' + value.opening_times.Sun + ' </div></li>');

        // ARRAY DELIVERY OPTIONS

        var ul = $('<ul id=del-add-'+ key +' class="del-options"></ul>');

        $.each(value.delivery_options, function(key, val) {

            ul.append('<li del-id=' + key + '  class="list-group-item"><div class="c-name font-weight-bold"> ' + val.name + ' </div><div> ' + val.description + ' </div><div class="c-price font-weight-bold"> ' + val.price + ' </div><div class="btn btn-primary btn-block mt-3"><a>Select ></a></div></li>');

        });

        ul.appendTo('#del-lists-wrapper');



                //COURIER ADDRESS FOR OTHER CONTAINER

                $('#address-container').append('<li id=cour-add-'+ key +'  class="list-group-item alt-address"><div class="c-name font-weight-bold"> ' + value.name + ' </div><div class="d-inline-block w-100"> ' + value.address.name + ' </div><div class="d-inline-block w-100"> ' + value.address.line1 + ' </div><div class="d-inline-block w-100"> ' + value.address.town + '</div><div class="d-inline-block w-100"> ' + value.address.county + ' </div><div class="d-inline-block w-100"> ' + value.address.postcode + '</div></li>');

            }

        });



    });





}); 

HTML

<div class="modal" id="exampleModalLive" role="dialog" tabindex="-1">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Click and Collect</h5><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">Close &times;</span></button>

            </div>

            <div class="modal-body">

                <div class="row">

                    <div class="col-6">

                    <div id="count"></div>

                                                                <div class="col-12 click-collect--container px-0">

                                <form>

                                    <div>

                                    <input class="form-control float-left" id="modal-search" name="search" class="modal-search" placeholder="Search by postcode" type="text">

                                    <input class="btnpostcode btn btn-primary" id="Btn_Search" name="BtnPostCode" value="Search >">

                                    </div>



                                </form>

                        </div>

                        <ul class="list-group mt-3" id="result"></ul>

                    </div>

                    <div class="col-6">

                        <div class="d-inline-block w-100">

                        <div id="googleMap" style="width:100%;height:300px;"></div>

                            <ul class="list-group" id="lat-long"></ul>

                        </div>

                        <Div class="row">

                        <div class="col-6">

                            <ul class="list-group" id="address-container"></ul>

                            <ul class="list-group" id="opening-times"></ul>

                        </div>

                        <div class="col-6">

                            <div id="del-lists-wrapper"> </div>

                        </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

Any suggestions or tips would be great.

Thanks for your help in adance.