* Ikuti langkah pada video (2 sesi), artikel akan diupdate secepatnya

Pada bagian ke-8, kita akan membuat marker (baca : simple marker google maps). Bagian ini kita akan membuat marker untuk setiap nama jembatan yang sudah kita buat. pertama kita buat file model_koordinatjembatan.php di folder model.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Model_koordinatjembatan extends CI_Model {

    public function create(){
        $data = array('id_jembatan' => $this->input->post('id_jembatan'),
            'latitude'=>$this->input->post('latitude'),
            'longitude'=>$this->input->post('longitude'));
        $query = $this->db->insert('koordinatjembatan', $data);
        return $query;
    }
    public function getAll(){
        $query = $this->db->get('koordinatjembatan');//mengambil semua data koordinat jembatan
        return $query;
    }
    public function getbyidjembatan($id){
        $this->db->where('id_jembatan', $id);
        $query = $this->db->get('koordinatjembatan');
        return $query;
    }
    public function read($id){
        $this->db->where('id_koordinatjembatan', $id);//mengambil data koordinat jembatan berdasarkan id_koordinatjembatan
        $query = $this->db->get('koordinatjembatan');
        return $query;
    }
    public function update(){
        $data = array('id_jembatan'=>$this->input->post('id_jembatan'),
            'latitude'=>$this->input->post('latitude'),
            'longitude'=>$this->input->post('longitude'));
        $this->db->where('id_koordinatjembatan', $this->input->post('id_koordinatjembatan'));//mengupdate berdasarkan id_koordinatjembatan
        $query = $this->db->update('koordinatjembatan', $data);
        return $query;
    }
    public function delete(){
        $this->db->where('id_koordinatjembatan', $this->input->post('id_koordinatjembatan'));//menghapus berdasarkan id_koordinatjembatan
        $query = $this->db->delete('koordinatjembatan');
        return $query;
    }
    public function deletebyidjembatan($id){
        $this->db->where('id_jembatan', $id);
        $query = $this->db->delete('koordinatjembatan');
        return $query;
    }

}

/* End of file model_koordinatjembatan.php */
/* Location: ./application/models/model_koordinatjembatan.php */

Selain itu juga buat file koordinatjembatanform.php di folder view/admin.

<!--script google map-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
$(document).on('click','#clearmap',clearmap)
.on('click','#simpandaftarkoordinatjembatan',simpandaftarkoordinatjembatan)
.on('click','#hapusmarkerjembatan',hapusmarkerjembatan)
.on('click','#viewmarkerjembatan',viewmarkerjembatan);
    var map;
    var markers = [];

    function initialize() {
        var mapOptions = {
        zoom: 14,
        // Center di kantor kabupaten kudus
        center: new google.maps.LatLng(-6.806428778495534, 110.84213197231293)
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        // Add a listener for the click event
        google.maps.event.addListener(map, 'rightclick', addLatLng);
        google.maps.event.addListener(map, "rightclick", function(event) {
          var lat = event.latLng.lat();
          var lng = event.latLng.lng();
          $('#latitude').val(lat);
          $('#longitude').val(lng);
          //alert(lat +" dan "+lng);
        });
    }

    /**
     * Handles click events on a map, and adds a new point to the marker.
     * @param {google.maps.MouseEvent} event
     */
    function addLatLng(event) {
        var marker = new google.maps.Marker({
        position: event.latLng,
        title: 'Simple GIS',
        map: map
        });
        markers.push(marker);
    }
    //membersihkan peta dari marker
    function clearmap(e){
        e.preventDefault();
        $('#latitude').val('');
        $('#longitude').val('');
        setMapOnAll(null);
    }
    //buat hapus marker
    function setMapOnAll(map) {
      for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
      }
      markers = [];
    }
    //end buat hapus marker

    function simpandaftarkoordinatjembatan(e){
        e.preventDefault();
        var datakoordinat = {'id_jembatan':$('#id_jembatan').val(),'latitude':$('#latitude').val(),'longitude':$('#longitude').val()};
        console.log(datakoordinat);
        $.ajax({
            url : '<?php echo site_url("admin/simpandaftarkoordinatjembatan") ?>',
            dataType : 'json',
            data : datakoordinat,
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    $('#daftarkoordinatjembatan').load('<?php echo current_url()."/ #daftarkoordinatjembatan > *" ?>');
                    alert(data.msg);
                    clearmap(e);
                }else{
                    alert(data.msg);
                }
            }
        })
    }
    function hapusmarkerjembatan(e){
        e.preventDefault();
        var datakoordinat = {'id_jembatan':$(this).data('iddatajembatan')};
        $.ajax({
            url : '<?php echo site_url("admin/hapusmarkerjembatan") ?>',
            data : datakoordinat,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    alert(data.msg);
                    $('#daftarkoordinatjembatan').load('<?php echo current_url()."/ #daftarkoordinatjembatan > *" ?>');
                    clearmap(e);
                }else{
                    alert(data.msg);
                }
            }
        })
    }
    function viewmarkerjembatan(e){
        e.preventDefault();
        var datakoordinat = {'id_jembatan':$(this).data('iddatajembatan')};
        $.ajax({
            url : '<?php echo site_url("admin/viewmarkerjembatan") ?>',
            data : datakoordinat,
            dataType : 'json',
            type : 'POST',
            success : function(data,status){
                if (data.status!='error') {
                    clearmap(e);
                    //load marker
                    $.each(data.msg,function(m,n){
                        var myLatLng = {lat: parseFloat(n["latitude"]), lng: parseFloat(n["longitude"])};
                        console.log(m,n);
                        $.each(data.datajembatan,function(k,v){
                            addMarker(v['namajembatan'],myLatLng);
                        })
                        return false;
                    })
                    //end load marker
                }else{
                    alert(data.msg);
                }
            }
        })
    }
    // Menampilkan marker lokasi jembatan
    function addMarker(nama,location) {
        var marker = new google.maps.Marker({
            position: location,
            map: map,
            title : nama
        });
        markers.push(marker);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!--end script google map-->
<div class="container">
    <div class="row">
        <div class="col-md-8 col-sm-8">
            <div class="panel panel-primary">
                <div class="panel-heading"><span class="glyphicon glyphicon-globe"></span> Peta</div>
                <div class="panel-body" style="height:300px;" id="map-canvas">
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-4">
            <div class="panel panel-primary">
                <div class="panel-heading"><span class="glyphicon glyphicon-list"></span> Daftar Koordinat</div>
                <div class="panel-body" style="min-height:300px;">
                    <form action="#">
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label for="latitude">Latitude</label>
                                    <input type="text" class="form-control" name="latitude" id="latitude">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label for="longitude">Longitude</label>
                                    <input type="text" class="form-control" name="longitude" id="longitude">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="datajembatan">Data jembatan</label>
                            <?php if ($itemdatajembatan->num_rows()!=null) {
                                echo '<select name="id_jembatan" id="id_jembatan" class="form-control">';
                                foreach ($itemdatajembatan->result() as $datajembatan) {
                                    echo "<option value='".$datajembatan->id_jembatan."'>".$datajembatan->namajembatan."</option>";
                                }
                                echo '</select>';
                            }else{
                                echo anchor('admin/jembatan', '<span class="glyphicon glyphicon-plus"></span> Tambah Data jembatan', 'class="btn btn-info form-control"');
                            } ?>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-info btn-sm" id="simpandaftarkoordinatjembatan"><span class="glyphicon glyphicon-save"></span> Simpan</button>
                            <button class="btn btn-info btn-sm" id="clearmap"><span class="glyphicon glyphicon-globe"></span> ClearMap</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-sm-12">
            <div class="panel panel-primary">
                <div class="panel-heading"><span class="glyphicon glyphicon-th-list"></span> Daftar Koordinat marker Data jembatan</div>
                <div class="panel-body" style="min-height:400px">
                    <table class="table">
                        <th>No</th>
                        <th>Data jembatan</th>
                        <th>Latitude</th>
                        <th>Longitude</th>
                        <th></th>
                        <tbody id="daftarkoordinatjembatan">
                            <?php
                            if ($itemkoordinatjembatan->num_rows()!=null) {
                                $no = 1;
                                foreach ($itemdatajembatan->result() as $jembatan) {
                                    echo "<tr>";
                                    echo "<td>";
                                    echo $no++;
                                    echo "</td>";
                                    echo "<td>";
                                    echo $jembatan->namajembatan;
                                    echo "</td>";
                                    echo "<td>";
                                    foreach ($itemkoordinatjembatan->result() as $koordinat) {
                                        if ($koordinat->id_jembatan==$jembatan->id_jembatan) {
                                            echo $koordinat->latitude."</br>";
                                        }
                                    }
                                    echo "</td>";
                                    echo "<td>";
                                    foreach ($itemkoordinatjembatan->result() as $koordinat) {
                                        if ($koordinat->id_jembatan==$jembatan->id_jembatan) {
                                            echo $koordinat->longitude."</br>";
                                        }
                                    }
                                    echo "</td>";
                                    echo "<td>";
                                    echo '<button class="btn-info btn btn-sm" id="viewmarkerjembatan" data-iddatajembatan="'.$jembatan->id_jembatan.'"><span class="glyphicon-globe glyphicon"></span> View marker</button> ';
                                    echo '<button class="btn-danger btn btn-sm" id="hapusmarkerjembatan" data-iddatajembatan="'.$jembatan->id_jembatan.'"><span class="glyphicon-remove glyphicon"></span></button>';
                                    echo "</td>";
                                    echo "</tr>";
                                }
                            }
                             ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Sedangkan pada file admin.php tambahi skrip kayak gini :

//crud koordinat jembatan
    public function koordinatjembatan(){
        $data = array('content' => 'admin/koordinatjembatanform',
            'itemdatajembatan'=>$this->model_jembatan->getAll(),
            'itemkoordinatjembatan'=>$this->model_koordinatjembatan->getAll());
        $this->load->view('templates/template', $data, FALSE);
    }
    function simpandaftarkoordinatjembatan(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            $this->load->library('form_validation');
            $this->form_validation->set_rules('id_jembatan', 'Data jembatan', 'trim|required');
            if ($this->form_validation->run()==false) {
                $status = 'error';
                $msg = validation_errors();
            }else{
                if ($this->model_koordinatjembatan->getbyidjembatan($this->input->post('id_jembatan'))->num_rows()!=null) {
                    $status = 'error';
                    $msg = 'marker jembatan yang bersangkutan sudah ada, hapus terlebih dahulu';
                }else{
                    if ($this->model_koordinatjembatan->create()) {
                        $status = 'success';
                        $msg = 'data berhasil disimpan';
                    }else{
                        $status = 'error';
                        $msg = 'terjadi kesalahan saat menyimpan koordinat';
                    }
                }
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }
    function hapusmarkerjembatan(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            if ($this->model_koordinatjembatan->deletebyidjembatan($this->input->post('id_jembatan'))) {
                $status = 'success';
                $msg = 'data berhasil dihapus';
            }else{
                $status = 'error';
                $msg = 'terjadi kesalahan saat menghapus data';
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg)));
        }
    }
    function viewmarkerjembatan(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            if ($this->model_koordinatjembatan->getbyidjembatan($this->input->post('id_jembatan'))->num_rows()!=null){
                $status = 'success';
                $msg = $this->model_koordinatjembatan->getbyidjembatan($this->input->post('id_jembatan'))->result();
                $datajembatan = $this->model_jembatan->read($this->input->post('id_jembatan'))->result();
            }else{
                $status = 'error';
                $msg = 'data tidak ditemukan';
                $datajembatan = null;
            }
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'msg'=>$msg,'datajembatan'=>$datajembatan)));
        }
    }
    //end crud koordinat jembatan

Sehingga saat kita akses di http://localhost/simplegis/index.php/admin/koordinatjembatan. tampilannya akan jadi kayak gini.