FloatBackOfffice/application/views/admin/view_memberlist.php

<!-- Dashboard content -->
<div class="row">
  <div class="col-lg-9">
    <!-- Support tickets -->

    <div class="panel panel-flat">
      <div class="table-responsive">
        <?= $member_table ?>
      </div>
    </div>
    <div class="panel panel-flat">
      <div class="table-responsive"> <?= $links ?> </div>
    </div>
    <!-- /support tickets -->
  </div>




  <div class="col-lg-3">
    <!-- Recent Members -->
    <div class="panel panel-flat" style="background-color: #ccffff; height: 800px;">
      <div id="transp_detail">
        <div class="panel-heading">
          <h6 class="panel-title">View a member</h6>
        </div>
      </div>
    </div>
    <!-- /Recent Members -->
  </div>
</div>
<!-- /dashboard content -->
<?php
$c = 0;
$plot_transpotercount = array();
$labelArray = '';
$valueArray = '';
foreach ($plot_signup as $rr) {
  // echo "{$key} => {$value} ";
  // print_r($rr);
  if ($c > 0) {
    $labelArray .= ',';
    $valueArray .= ',';
  }
  $labelArray .= "'" . $rr['dt'] . "'";
  $valueArray .= $rr['dcount'];
  $c++;
}


$c = 0;
$labelArray1 = '';
$valueArray1 = '';
foreach ($plot_emaildownload as $rr) {
  // echo "{$key} => {$value} ";
  // print_r($rr);
  if ($c > 0) {
    $labelArray1 .= ',';
    $valueArray1 .= ',';
  }
  $labelArray1 .= "'" . $rr['created'] . "'";
  $valueArray1 .= $rr['count'];
  $c++;
}
?>

<script src="/assets/js/plugins/pickers/datepicker.js"></script>
<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 viewMember(member_id) {

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

  function blockMember(member_id) {
    bootbox.confirm(`The member with ID: '${member_id}' will be blocked`, function(result) {
      if (result === true) {
        memberAction('block', {
          member_id: member_id
        });
      }
    });
  }

  function unblockMember(member_id) {
    bootbox.confirm(`The member with ID: '${member_id}' will be unblocked`, function(result) {
      if (result === true) {
        memberAction('unblock', {
          member_id: member_id
        });
      }
    });

  }

  function memberAction(action, data) {
    var url = `/security/${action}member`;
    $.ajax({
      url: url,
      type: 'POST',
      dataType: 'JSON',
      data: data,
      success: function(data) {
        location.reload();
      },
      error: function(err) {
        console.log(err);
      }
    });
    return false;
  };
  $(document).ready(() => {
    $('body').on('click', '#search-member-detail', function(e) {
      $.ajax({
        type: 'get',
        url: '/member/viewmedberdetail?proc=PROCESS',
        dataType: 'json',
        data: $('#member-detail-form').serialize(),
      }).always(function(data) {
        $('#transp_detail').html(data.responseText);
      });
    })
  })
  //initMap();
  // 
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<?= $google_api_key ?>&callback=initMap" async defer></script>