Membuat Gis Locator Dengan Google Maps Javascript Api V3, Php dan Database Mysql (Xampp) oleh: Nama : Fazriyan Putra Muhamad Yusup NIM : 14720027 Jurusan : Teknik Informatika Semester :IV Universitas Putra Indonesia (UNPI) Cianjur Jalan Jl. Dr Muwardi No.66, By.Pass. 46113 No. (0263) 262604 CIANJUR
21
Embed
Membuat Gis Locator Dengan Google Maps Javascript Api V3.pdf
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Membuat Gis Locator Dengan Google Maps Javascript
Api V3, Php dan Database Mysql (Xampp)
oleh:
Nama : Fazriyan Putra Muhamad Yusup
NIM : 14720027
Jurusan : Teknik Informatika
Semester :IV
Universitas Putra Indonesia (UNPI) Cianjur
Jalan Jl. Dr Muwardi No.66, By.Pass. 46113 No. (0263) 262604
CIANJUR
Tutorial Membuat Gis Locator Dengan Google Maps Javascript Api V3, Php
dan Database Mysql (Xampp)
1. Bahan yang digunakan
Aplikasi Xampp
Aplikasi Notepad++
2. Install kan kedua aplikasi tersebut
3. Setelah itu jalankan aplikasi yang ada di dalam packet xampp yaitu ,
Apache, MySql dengan cara klik - Start
hingga berubah menjadi seperti gambar berikut
4. Buatlah Database untuk GIS nya dengan cara , ketik localhost pada
browser anda
5. Masuk ke menu phpmyadmin untuk mengakses database kita
dengan cara mengetik dibrowser localhost/phpmyadmin
atau ikut langkah seperti gambar dibawah ini
** tampilan akan berbeda jika versi Xampp nya juga beda
6. Kemudian buatlah database seperti gambar dibawah ini:
7. buatlah tabel didalam database locator
8. kemudian isi tabel database tersebut seperti dibawah ini
atau bisa juga menggunakan sytax sql dengan cara pilih menu sql seperti
gambar dibawah ini :
kemudian masukan sytax dibawah ini:
CREATE TABLE IF NOT EXISTS `markers` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(60) NOT NULL,
`address` varchar(80) NOT NULL,
`lat` float(10,6) NOT NULL,
`lng` float(10,6) NOT NULL,
`category` varchar(60) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1
AUTO_INCREMENT=7 ;
9. Isikan database sesuai dengan tabel dibawah ini
atau bisa menggunakan sytax ini
INSERT INTO `markers` (`id`, `name`, `address`, `lat`, `lng`, `category`) VALUES
(1, 'Unpi Cianjur', 'JL Dr Muwardi, No. 66, Kec. Cianjur, Kab. Cianjur Jawa Barat', -6.811091, 107.144218, 'sekolah'), (2, 'Ramayana Cianjur', 'Jl Dr Muwardi II, Pasar muka, Muka, Kec. Cianjur, Kabupaten Cianjur, Jawa Barat', -6.810797, 107.147675, 'market'), (3, 'Ayam Goreng Jakarta', 'JL. Doktor Muwardi, No. 48, Muka, Kec. Cianjur', -6.813179, 107.138695, 'restaurant'), (4, 'SMKN 1 CIANJUR', 'Jl. Siliwangi No. 41, Sawah Gede, Kec. Cianjur, Kabupaten Cianjur, Jawa Barat', -6.826754, 107.136955, 'sekolah'),
(5, 'Rumah Makan Khas Sunda HM.Nana 2', 'Jalan raya Cugenang KM.4 \nNo.46 Kp.WR Seuseupan, Cugenang, Kec. Cianjur', -6.802901, 107.111679, 'hotel'), (6, 'Mesjid Agung Cianjur', 'Masjid Agung Cianjur, Jalan Masjid Agung, Pamoyanan, Cianjur Regency, West Java', -6.815237, 107.138458, 'mesjid');
alert(address + ' not found'); } }); } function searchLocationsResto() { var address = document.getElementById("adresInput").value; var geocoder = new google.maps.Geocoder(); console.log ("Alamat => "+address);
console.log ("Status => "+status); if (status == google.maps.GeocoderStatus.OK) { searchLocationsRestoran(results[0].geometry.location);
console.log ("Location => "+results[0].geometry.location); } else { alert(address + ' not found'); } }); } function searchLocationsSekol() {
var address = document.getElementById("adresInput").value; var geocoder = new google.maps.Geocoder(); console.log ("Alamat => "+address); geocoder.geocode({'address': address}, function(results, status) { console.log ("Status => "+status); if (status == google.maps.GeocoderStatus.OK) { searchLocationsSekolah(results[0].geometry.location); console.log ("Location => "+results[0].geometry.location);
} else { alert(address + ' not found'); } }); } function searchLocationsMarket() { var address = document.getElementById("adresInput").value;
var geocoder = new google.maps.Geocoder(); console.log ("Alamat => "+address); geocoder.geocode({'address': address}, function(results, status) { console.log ("Status => "+status); if (status == google.maps.GeocoderStatus.OK) { searchLocationsMarkets(results[0].geometry.location); console.log ("Location => "+results[0].geometry.location); } else { alert(address + ' not found');
}
}); }
function clearLocations() { infoWindow.close(); for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers.length = 0; locationSelect.innerHTML = ""; var option = document.createElement("option");
option.value = "none"; option.innerHTML = "See all results :"; locationSelect.appendChild(option); } function createMarker(latlng, name, address, type) { var html = "<b>" + name + "</b> <br/>" + address; var icon = customIcons[type];
var marker = new google.maps.Marker({ map: map, position: latlng, icon: icon.icon }); google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker);
}); markers.push(marker); } function createOption(name, distance, num) { var option = document.createElement("option"); option.value = num; option.innerHTML = name + "(" + distance.toFixed(1) + ")"; locationSelect.appendChild(option);
}
function downloadUrl(url, callback) { var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request.responseText, request.status); } };
request.open('GET', url, true); request.send(null); } function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc;
} else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } } function doNothing() {} function searchLocationsNear(center) {
clearLocations(); var radius = document.getElementById('radiusSelect').value; console.log("map3.php?lat=" + center.lat() + "&lng=" + center.lng() + "&radius=" + radius); var searchUrl = 'map3.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; downloadUrl(searchUrl, function(data) { var xml = parseXml(data); var markerNodes =
var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markerNodes.length; i++) { var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address"); var type = markerNodes[i].getAttribute("category"); var distance = parseFloat(markerNodes[i].getAttribute("distance")); var latlng = new google.maps.LatLng( parseFloat(markerNodes[i].getAttribute("lat")), parseFloat(markerNodes[i].getAttribute("lng")));
} function searchLocationsHotels(center) { clearLocations(); var radius = document.getElementById('radiusSelect').value; console.log("hotel.php?lat=" + center.lat() + "&lng=" + center.lng() + "&radius=" + radius);
var searchUrl = 'hotel.php?lat=' + center.lat() + '&lng=' +
center.lng() + '&radius=' + radius; downloadUrl(searchUrl, function(data) { var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker"); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markerNodes.length; i++) { var name = markerNodes[i].getAttribute("name"); var address = markerNodes[i].getAttribute("address"); var type = markerNodes[i].getAttribute("category");
var distance = parseFloat(markerNodes[i].getAttribute("distance")); var latlng = new google.maps.LatLng( parseFloat(markerNodes[i].getAttribute("lat")), parseFloat(markerNodes[i].getAttribute("lng"))); createOption(name, distance, i); createMarker(latlng, name, address, type); bounds.extend(latlng);
var xml = parseXml(data); var markerNodes = xml.documentElement.getElementsByTagName("marker"); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markerNodes.length; i++) { var name = markerNodes[i].getAttribute("name"); var address = markerNodes[i].getAttribute("address");
var type = markerNodes[i].getAttribute("category"); var distance = parseFloat(markerNodes[i].getAttribute("distance")); var latlng = new google.maps.LatLng( parseFloat(markerNodes[i].getAttribute("lat")), parseFloat(markerNodes[i].getAttribute("lng"))); createOption(name, distance, i); createMarker(latlng, name, address, type);
downloadUrl(searchUrl, function(data) { var xml = parseXml(data); var markerNodes = xml.documentElement.getElementsByTagName("marker"); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markerNodes.length; i++) { var name = markerNodes[i].getAttribute("name"); var address =
markerNodes[i].getAttribute("address"); var type = markerNodes[i].getAttribute("category"); var distance = parseFloat(markerNodes[i].getAttribute("distance")); var latlng = new google.maps.LatLng( parseFloat(markerNodes[i].getAttribute("lat")), parseFloat(markerNodes[i].getAttribute("lng"))); createOption(name, distance, i);
onclick="searchLocations()" value="Search"/> <ul> <label> <li><a><input name="kategori" type="image" src="icons/hotel.svg" align="center" style="margin:3px" id="adresInput" onclick="searchLocationsHotel()" value="Jalan Ir. H. Djuanda No. 70A, Cianjur, Kec. Cianjur, Jawa Barat">
Hotel </a></li> </label> <label> <li><a><input type="image" src="icons/school.svg" align="center" style="margin:3px" id="adresInput" onclick="searchLocationsSekol()" value=" Jl. Siliwangi No. 41, Sawah Gede, Kec. Cianjur, Kabupaten Cianjur,
Jawa Barat"> Sekolah </a></li> </label> <label> <li><a><input type="image" src="icons/mall.svg" align="center" style="margin:3px" id="adresInput" onclick="searchLocationsMarket()" value="Jl Dr Muwardi II, Pasar muka, Muka, Kec. Cianjur, Kabupaten