FloatBackOfffice/application/views/member/extra/member_activity.php

<div class="panel panel-flat" style="background-color: aliceblue;">
    <div class="panel-body">
        <b><?= $selected_user['firstname'] ?>  <?= $selected_user['lastname'] ?></b>

        <div class="row">
    <div class="col-lg-2">

        <!-- Members online -->
        <div class="panel">
            <div class="panel-body">
                <a href='#'>Savvy Score </a>
            </div>
        </div>
        <!-- /members online -->
    </div>

    <div class="col-lg-2">
        <!-- Current server load -->
        <div class="panel">
            <div class="panel-body">
                <a href='#'>Travel Personalty</a>
            </div>
        </div>
        <!-- /current server load -->
    </div>

    <div class="col-lg-2">
        <!-- Today's revenue -->
        <div class="panel">
            <div class="panel-body">                
                <a href='#'>Share Permission</a>
            </div>
        </div>
        <!-- /today's revenue -->
    </div>

    <div class="col-lg-2">
        <!-- Current server load -->
        <div class="panel">
            <div class="panel-body">
               <a href='#'>Space ....</a>
            </div>

        </div>
        <!-- /current server load -->
    </div>


    <div class="col-lg-2">
        <!-- Current server load -->
        <div class="panel">
            <div class="panel-body">
                              <a href='#'>Space ....</a>

            </div>

        </div>
        <!-- /current server load -->
    </div>
    
    <div class="col-lg-2">
        <!-- Current server load -->
        <div class="panel">
            <div class="panel-body">
                              <a href='#'>Space ....</a>

            </div>

        </div>
        <!-- /current server load -->
    </div>
    
</div>

        
        
        <div class="row">
            <div class="col-lg-3">
                <?= $member_trackemail ?>
            </div>

            <div class="col-lg-3">
                <?= $member_tracktable ?>
            </div>

            <div class="col-lg-6">
                <!-- Recent Members -->
                <div id="map" style="border:1px;border-style: dotted; height:750px;"></div>
            </div>
        </div>
        <div class="table-responsive">
            <div id ="trackgroup_list">  </div>
        </div> 

        
        
        
        
        
  <div class="row">
      
    <div class="col-lg-4">
        <!-- Current server load -->
        <div class="panel">
            <div class="panel-body">
        <?=$member_tracked?>
            </div>
        </div>
        <!-- /current server load -->
    </div>
      
    <div class="col-lg-8">

        <!-- Members online -->
        <div class="panel">
            <div class="panel-body">
        <?=$member_trackemail?>
            </div>
        </div>
        <!-- /members online -->
    </div>



   

    
</div>

        
        
    </div>
</div>




<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 viewTracked(traked_group) {

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


    function plotMarkers(locations) {
        var n = parseInt(''+locations.length/2,10)-1;
        if (n<0) n=0;
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            center: new google.maps.LatLng(locations[n].lat, locations[0].lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var flightPath = new google.maps.Polyline({
          path: locations,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 4
        });
        flightPath.setMap(map);
    }

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