Cara Membuat Web GIS Sederhana Dengan Google Maps API

Cara Membuat Web GIS Sederhana Dengan Google Maps API - Hallo Friends sahabat Ini Tutorial, pada kesempatan kali ini saya akan membagikan Artikel yang berjudul Cara Membuat Web GIS Sederhana Dengan Google Maps API, saya telah mempersiapkan artikel ini khusus untuk kamu semua dan mudah-mudahan isi postingan Artikel cara, Artikel GIS, yang kami tulis ini dapat membuat kamu bahagia. baiklah, selamat mbahagi dan mendownloadnya

Judul : Cara Membuat Web GIS Sederhana Dengan Google Maps API
link : Cara Membuat Web GIS Sederhana Dengan Google Maps API

Cara Membuat Web GIS Sederhana Dengan Google Maps API

Pada kesempatan kali ini IniTutorial akan memberikan tutorial menarik atau langkah-langkah Cara Membuat Web GIS Sederhana Dengan Google Maps API. Tutorial kali ini merupakan lanjutan dari tutorial sebelumnya yaitu Cara Mendapatkan dan Menggunakan Google Maps API yang menjelaskan bagaimana cara mendapatkan google api key yang akan digunakan dalam tutorial kali ini. Baiklah Langsung saja ke langkah-langkah pembuatannya antara lain :

1. Hidupkan Apache dan MySQL dari aplikasi Xampp jika belum terinstall kalian harus install aplikasi tersebut terlebih dahulu.

2, Buka browser dan ketikkan localhost/phpmyadmin dan akan tampil halaman utama PhpMyAdmin

3. Buat database dengan cara klik new pada menu sidebar dan beri nama database sesuai dengan keinginan kalian kemudian tekan buat/create.

4. Buat tabel untuk databasenya dengan cara new kemudian berikan nama tabel dan jumlah atribut atau kolomnya

5. Tambahkan data titik koordinat pada tabel yang telah dibuat caranya klik menu tambahkan/insert pada menu navbar kemudian isikan data sesuai nama attribut tabelnya

6. Buat koneksi.php dengan text editor kalian masing

<?php

$host = 'localhost';

$user = 'root';

$pass = '';

$db = 'tes';

$conn = mysqli_connect($host,$user,$pass,$db);

if(!$conn) {

die("Connetion Failed :" . mysqli_connect_error());

}

7. Buat Index.php dengan text editor kalian source code nya sebagai berikut :

(NB: jangan : Lupa ganti API Key yang terletak pada bagian bawah source code dengan warna merah)

<!DOCTYPE html>

<html>

<head>

<title>Ini Tutorial</title>

<style>

#map{/* modifikasi element html yang ber-id map*/

height: 100%;

}

html, body{

height: 100%;

margin: 0;

padding: 0;

}

</style>

</head>

<body>

var map;

function initMap() {

// DATA koordinat dalam bntuk array

//(nama,tempat,garis)

<?php

include "koneksi.php";

$sql = "SELECT * FROM tb_lokasi";

$result = $conn -> query($sql);

var locations = [

<?php

while($row = $result->fetch_assoc()) {

echo "['".$row['nama']."',".$row['garis_lintang'].",".$row['garis_bujur'].",'".$row['icon']."'],";

}

];

map = new google.maps.Map(document.getElementById('map'),{

center: {lat: -3.7990165, lng: 114.779605},

zoom: 10

});

//inisialisasi marker dan infowindow kosong

var marker;

var infowindow = new google.maps.InfoWindow();

for (var i=0; i<locations.length; i++) { // lakukan perulangan untuk load dari array

marker = new google.maps.Marker({

position : new google.maps.LatLng(locations[i][1],locations[i][2]),

icon : locations[i][3],

map: map

});

google.maps.event.addListener(marker, 'click', (function(marker, i){

return function() {

infowindow.setContent(""+locations[i][0]);

infowindow.open(map, marker);

}

})(marker, i));

}

</script>

<script

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

</body>

</html>

8. Jalankan index.php melalui browser kalian dengan cara buat sebuah folder baru dan masukkan index.php dan koneksi.php jika ingi memberikan gambar atau icon masukkan file tersebut dalam folder yang dibuat tadi kemudian pindahkan folder tersebut pada folder htdoc yang ada pada folder Xampp, kemudian pada browser ketikkan localhost/nama_folder_yang_dibuat_tadi.

contoh : localhost/webGIS_database.

9. Tampilan akhir dari web GIS nya sebagai berikut :

Sekian tutorial Cara Membuat Web GIS Sederhana Dengan Google Maps API dari IniTutorial semoga tutorial kali ini bermanfaat bagi kalian dan bagi penulis jangan sungkan untuk memberikan kritik dan saran bagi Penulis dan Ini Tutorial karena kritik dan saran kalian memberikan motivasi bagi penulisa untuk menjadi lebih baik lagi. Terima Kasih ^^

Itulah artikel Cara Membuat Web GIS Sederhana Dengan Google Maps API

yang dapat saya berikan. Sekianlah artikel Cara Membuat Web GIS Sederhana Dengan Google Maps API kali ini, mudah-mudahan kamu kamu suka. sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Web GIS Sederhana Dengan Google Maps API dengan alamat link https://initutorialkudankamu.blogspot.com/2018/09/cara-membuat-web-gis-sederhana-dengan-google-maps-api.html

Cara Membuat Web GIS Sederhana Dengan Google Maps API