Menampilkan
Marker dan Manipulasi Data Dari Mysql
API
adalah kependekan dari Application programming interface dengan
bahasa yang lebih sederhana, yang sangat berguna bagi pengembang web maupun
aplikasi desktop untuk memanfaatkan berbagai fitur yang disediakan oleh Google
seperti misalnya: AdSense, Search
Engine, Translationmaupun YouTube. API secara sederhana bisa
diartikan sebagai kode program yang merupakan antarmuka atau penghubung antara
aplikasi atau web yang kita buat dengan fungsi-fungsi yang dikerjakan. Jadi
Google maps API adalah fungsi-fungsi pemrograman yang disediakan oleh Google
maps agar Google maps bisa di integrasikan kedalam Web atau aplikasi yang
sedang buat. Contoh sederhanya misalkan ketika ingin membuat Sistem informasi
Geografis rumah tetangga, dengan memanfaatkan Google Maps API user bisa
membuat GIS tanpa perlu memikirkan Pemetaan Rumah, hanya perlu memanggil fungsi
Google maps dan memanggil fungsi-fungsi lain yang dibutuhkan seperti
menampilkan peta, menempatkan marker dan sabagainya.
Tugas
3 kali ini adalah menyambung dari tugas kedua sebelumnya. Data yang telah
disimpan dalam MySQL sekarang coba ditampilkan kedalam peta. Berikut adalah
data yang telah disimpan pada MySQL. Buat kontainer sebagai tempat untuk menampilkan peta
dengan pusat latitude dan longitude yang dipilih. Kode program 1 adalah kode
program untuk membuat kontainer peta.
html>
<head>
<title></title>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script
src="jquery.js"></script>
<script
src="maps.js"></script>
</head>
<body>
<div id="petaku" style="width:600px;
height:500px">
</div>
</body>
</html>
|
Kode
Program 1 Membuat Kontainer Peta
Buat
file JavaScript untuk membuat fungsi menampilkan marker. Kode
Program 2 adalah menampilkan marker sesuai dengan latitude dan longtitude
yang terdapat dalam database.
// JavaScript Document
$(document).ready(function(){
var
gmaps=google.maps;
var
mapOptions={
zoom:
18,
//disableDefaultUI:true,
draggable:false,
center:new
gmaps.LatLng(-8.79359,115.158623)
};
//ini
menampilkan peta, dengan -8.79359,115.158623 sebagai centernya, jadi yang
muncul di peta hanya sekitaran latitude longitude itu.
muncul=new
google.maps.Map(document.getElementById('petaku'),mapOptions); //mengambil
peta tsb dan ditampilkan di kontainer
$.get('simpandata.php',function(output){
for(i=0;i<output.length;i++){
//$('<tr><td>'+output[i].ID+'</td><td>'+output[i].Latitute+'</td><td>'+output[i].Longtitute+'</td><td>'+output[i].Nama_Pemilik+'</td><td>'+output[i].Alamat_Pemilik+'</td></tr>').appendTo('#tabel');
var
marker= new google.maps.Marker({ //menampilkan marker
position:new
google.maps.LatLng(output[i].Latitute,output[i].Longtitute),
map:muncul,
title:output[i].Alamat_Pemilik
//menampilkan
informasi di window ketika kursor digeser ke arah marker, muncul data alamat
pemilik rumah
});
var
informasi=new google.maps.InfoWindow({
position:new
google.maps.LatLng(output[i].Latitute,output[i].Longtitute),
});
//membuat
info window
google.maps.event.addListener(marker,'click',function(event){
informasi.setPosition(event.latLng);
informasi.setContent(event.latLng.toString());
informasi.open(muncul);
//menampilkan
informasi di window ketika marker di klik
});
}
},'json');
});
|
Kode
Program 2 Menampilkan Marker pada Peta
sore gan
BalasHapusartikel ini sangat membatu saya buat tugas Pelajaran sistem informasi geografis.
saya ucapkan termakasih banyak
semoga berrmamfaat bagi pengungjung lainnya
Kunjungin website kami juga Gan
Di:
https://bakri48.mahasiswa.atmaluhur.ac.id/
http://www.atmaluhur.ac.id