Chapter 1: JavaScript Primer · color: JavaScript JavaScript JavaScript src a }
Membuat Gis Locator Dengan Google Maps Javascript API V3
-
Upload
fazriyan-putra -
Category
Documents
-
view
241 -
download
0
Transcript of Membuat Gis Locator Dengan Google Maps Javascript API V3
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
1/21
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) CianjurJalan Jl. Dr Muwardi No.66, By.Pass. 46113 No.(0263) 262604
CIANJUR
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
2/21
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
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
3/21
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/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
4/21
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,
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
5/21
`lat` float(10,6) NOT NULL,`lng` float(10,6) NOT NULL,`category` varchar(60) NOT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1AUTO_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 JawaBarat', -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');
10. Buatlah file config.php di notepad++
kemudian masukan sytax dibawah ini:
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
6/21
** catatan : apabila xampp database anda menggunakan password,, maka
tanda "" itu diisi sesuai dengan password anda, dan apabila username anda
bukan "root" maka ganti "root" tersebut sesuai dengan username database
anda. apabila anda tidak menggunakan password dan username nya root
maka abaikan catatan ini
11. kemudian buatlah file map3.php , hotel.php, market.php, restoran.php dan
sekolah.php
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
7/21
mysql_real_escape_string($radius));$result = mysql_query($query);if (!$result) {die('Invalid query: ' . mysql_error());}
echo "\n";while ($row = @mysql_fetch_assoc($result)){
echo '
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
8/21
height:50px;line-height:50px;position:relative;width:770px;
margin:auto;margin-top:80px;}
.menu-wrap ul {list-style:none;margin:5px;padding:0;
}
.menu-wrap ul li a {float:left;width:150px;display:block;text-align:center;color:#999;text-decoration:none;text-transform:uppercase;
}
.menu-wrap ul li a:hover {background-color:#666;display:block;
}
.menu-wrap ul li:hover ul {display:block;
}
.menu-wrap ul ul {display:none;list-style:none;position:absolute;
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
9/21
background-color:#fff;left:5px;top:25px;width:381px;
border-style:solid;border-left-width:1px;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-color: #999;
}
.menu-wrap ul ul li a {
float:none;display:block;padding-left:0px;text-align:left;width:381px;
}
.menu-wrap ul ul li a:hover {color:#fff;
}
#floating-panel {position: absolute;top: 10px;left: 8%;z-index: 5;background-color: #fff;padding: 5px;
border: 1px solid #999;text-align: center;font-family: 'Roboto','sans-serif';
}
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
10/21
//
hotel: {icon: 'icons/hotel.svg'},sekolah: {icon: 'icons/university.svg'},market: {icon: 'icons/mall.svg'}
};
var map;var markers = [];var infoWindow;var locationSelect;function load() {
map = newgoogle.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-6.811325, 107.144206),zoom: 18,mapTypeId: 'roadmap',mapTypeControlOptions: {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}});infoWindow = new google.maps.InfoWindow();locationSelect = document.getElementById("locationSelect");locationSelect.onchange = function() {
var markerNum =locationSelect.options[locationSelect.selectedIndex].value;if (markerNum != "none"){google.maps.event.trigger(markers[markerNum], 'click');}
};
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
11/21
}
function searchLocations() {var address = document.getElementById("addressInput").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) {searchLocationsNear(results[0].geometry.location);console.log ("Location => "+results[0].geometry.location);} else {alert(address + ' not found');
}});
}
function searchLocationsHotel() {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) {searchLocationsHotels(results[0].geometry.location);console.log ("Location => "+results[0].geometry.location);} else {alert(address + ' not found');}
});}
function searchLocationsResto() {var address = document.getElementById("adresInput").value;var geocoder = new google.maps.Geocoder();console.log ("Alamat => "+address);geocoder.geocode({'address': address}, function(results, status) {
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
12/21
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');}
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
13/21
});}
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 = "" + name + "
" + 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);
}
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
14/21
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 =
xml.documentElement.getElementsByTagName("marker");
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
15/21
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);}map.fitBounds(bounds);locationSelect.style.visibility = "visible";locationSelect.onchange = function() {
var markerNum =
locationSelect.options[locationSelect.selectedIndex].value;google.maps.event.trigger(markers[markerNum],
'click');};
});
}
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=' +
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
16/21
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);
}map.fitBounds(bounds);locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {var markerNum =
locationSelect.options[locationSelect.selectedIndex].value;google.maps.event.trigger(markers[markerNum],
'click');};
});}
function searchLocationsSekolah(center) {clearLocations();var radius = document.getElementById('radiusSelect').value;console.log("sekolah.php?lat=" + center.lat() + "&lng=" +
center.lng() + "&radius=" + radius);
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
17/21
var searchUrl = 'sekolah.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);
}map.fitBounds(bounds);
locationSelect.style.visibility = "visible";locationSelect.onchange = function() {
var markerNum =
locationSelect.options[locationSelect.selectedIndex].value;google.maps.event.trigger(markers[markerNum],
'click');};
});
}
function searchLocationsMarkets(center) {clearLocations();var radius = document.getElementById('radiusSelect').value;console.log("market.php?lat=" + center.lat() + "&lng=" +
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
18/21
center.lng() + "&radius=" + radius);var searchUrl = 'market.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);
}
map.fitBounds(bounds);locationSelect.style.visibility = "visible";locationSelect.onchange = function() {
var markerNum =
locationSelect.options[locationSelect.selectedIndex].value;google.maps.event.trigger(markers[markerNum],
'click');};
});}//]]>
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
19/21
25mi100mi200mi
Hotel
Sekolah
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
20/21
Pasar
13. Jika berhasil maka akan muncul tampilan seperti berikut ini.
-
7/26/2019 Membuat Gis Locator Dengan Google Maps Javascript API V3
21/21
dan pastikan untuk API Key nya harus sesuai dengan api key nya masing
masing ya....
gambar dibawah ini adalah api key punya saya, ganti dengan API key nya
milik anda