FloatBackOfffice/application/views/member/view_member.php

<!-- Dashboard content -->
<div class="row">
    <div class="panel panel-flat">        
        <?= $member_table ?>
    </div>

    <?php
    foreach ($member_items as $mitm) {
        echo "<button style='padding:2px; font-size:11px;' type=\"button\"  onclick=\"viewMemberAction('" . $mitm[0] . "',{$member_id});\" class=\"btn {$mitm[2]} btn-sm\">" . $mitm[1] . "</button>";
    }
    ?>

</div>

<div class="row">

    
    <div class="col-lg-12">
        <!-- Recent Members -->
        <div class="panel panel-flat" style="background-color: #ccffff;">
            <div class="table-responsive">
                <div id="transp_detail">
                    <div class="panel-heading">
                        <h6 class="panel-title">Recent Travel Tracking</h6>
                        <div class="heading-elements">
                            <span class="heading-text">Last: <span class="text-bold text-danger-600 position-right">PUT TIME HERE</span></span>             
                        </div>
                    </div>
                    <div class="table-responsive">
                        <div id="map" style="border:1px;border-style: dotted; height:750px;"></div>
                    </div>          

                </div>
            </div>
        </div>
        <!-- /Recent Members -->
    </div>
    
    <div class="col-lg-12">
        <!-- Recent Members -->
        <div class="panel panel-flat" style="background-color: #ccffff;">
           <?=$member_analysis?>
        </div>
        <!-- /Recent Members -->
    </div>
</div>
<!-- /dashboard content -->



<script type="text/javascript">

    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 3.397, lng: 10.644},
            zoom: 3
        });
    }

    var loaded_data = new Array();
    function showTranspModal(service_request_id) {
        if (typeof event !== 'undefined') {
            event.preventDefault();
        }
        //  alert(service_request_id);
        // collect data - either from forms or from data variables
        var id = $(this).data('id');

        // load the modal content with a loader gif and message
        $('#modal-content').html('Loading...');

        // show modal window
        $('#modal_theme_primary').modal('show');
//alert(5);
        // do the ajax bit
        var post_data = {
            'interest_id': service_request_id,
        };
//alert(6);
        $.ajax({
            url: "/transp/transp_modal?service_request_id=" + service_request_id
        }).done(function (data) {
//alert(data);
//alert(7);
            $('#modal-content').html(data);
            //initialize_map();
            var myLatlng = new google.maps.LatLng(33.7489954, -84.3879824);
            var myOptions = {
                zoom: 13,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP};
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("directionsDiv"));

            fitMapToBounds_map();

            calcRoute(loaded_data[0], loaded_data[1]);
            //alert(loaded_data[0]);
        });
    }

    function viewMemberAction(action_name, member_id) {
        return viewMemberActionLimitOffset(action_name, member_id, 50, 0);
    }

    function viewMemberActionLimitOffset(action_name, member_id, limit, offset, params){
        let params_str = '';
        if(typeof params == 'object' && Object.keys(params).length>0){
            params_str = '&'+jQuery.param( params );
        }
        $('#transp_detail').html('Processing...');
        $('#acc' + member_id).prop('disabled', true);
        var callURL = "/member/viewMemberAction?proc=PROCESS&action_name="+action_name+"&member_id=" + member_id;
        callURL += "&limit=" + limit + "&offset=" + offset + params_str;

        $.ajax({
            url: callURL
        }).done(function (data) {
            $('#transp_detail').html(data);
            $('#acc' + member_id).prop('disabled', false);
        });
        return false;
    }

    function viewMember(member_id) {

        $('#transp_detail').html('Processing...');
        $('#acc' + member_id).prop('disabled', true);
        $.ajax({
            url: "/member/viewmember?proc=PROCESS&member_id=" + member_id
        }).done(function (data) {
            $('#transp_detail').html(data);
            $('#acc' + member_id).prop('disabled', false);
        });
        return false;
    }

    function viewParse(id) {
        if (!confirm('Are you sure you want to parse this item again?')) return false;
        //$('#transp_detail').html('Processing...');
        $('#parseButton' + id).prop('disabled', true);
        $.ajax({
            url: "/member/parse?id=" + id
        }).done(function (data) {
            //$('#transp_detail').html(data);
            $('#parseButton' + id).prop('disabled', false);
            alert(data);
        });
        return false;
    }

    function viewAdvice(id) {
        if (!confirm('Are you sure you want to run this item through transport vendor price estimates now?')) return false;
        //$('#transp_detail').html('Processing...');
        $('#adviceButton' + id).prop('disabled', true);
        $.ajax({
            url: "/member/advice?id=" + id
        }).done(function (data) {
            //$('#transp_detail').html(data);
            $('#adviceButton' + id).prop('disabled', false);
            alert(data);
        });
        return false;
    }
//initMap();
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvjiRTxngOQyBP4zpqFlZuiquc0ROvo9c&callback=initMap"   async defer></script>