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. Skripnya sebagai berikut :
<?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.
Tidak ada komentar:
Posting Komentar