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');
10. Buatlah file config.php di notepad++
kemudian masukan sytax dibawah ini:

<?php
$koneksi = mysql_connect("localhost","root","");
mysql_select_db("locator",$koneksi);
?>
** 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
<?php
header("Content-type: text/xml");
require("config.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}
$center_lat = $_GET["lat"];
$center_lng = $_GET["lng"];
$radius = $_GET["radius"];
$query = Sprintf("SELECT address, name, lat, lng, category, ( 3959 * acos(
cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) )
AS distance FROM markers WHERE category='sekolah' HAVING distance < '%s'
ORDER BY distance
LIMIT 0 , 20",
mysql_real_escape_string($center_lat),
mysql_real_escape_string($center_lng),
mysql_real_escape_string($center_lat),

mysql_real_escape_string($radius));
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
echo "<markers>\n";
while ($row = @mysql_fetch_assoc($result)){
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'distance="' . $row['distance'] . '" ';
echo 'category="' . $row['category'] . '" ';
echo "/>\n";
}
echo "</markers>\n";
?>

semua file php yang ada di no.11 skrip nya sama, yang membedakan hanya
nama filenya saja
12. Buatlah halaman depan untuk menampilkan peta GIS yang telah dibuat
disini saya memberi nama halut.php (halaman utama)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0,userscalable=no,maximum-scale=1,width=device-width">
<title>GIS (UAS)</title>
<script
src="http://maps.google.com/maps/api/js?key=AIzaSyC9Mxr7IocQAQK_34
w1Z3AR-2KOoXxlbbY" type="text/javascript"></script>
<style>
menu-wrap {
background-color:#53bd84;

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;

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';
}
</style>
<script type="text/javascript">

//<![CDATA[
var customIcons = {

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 = new
google.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');
}
};

}
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) {

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 =
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 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);
}
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);

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=" +

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');
};
});
}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="load()">

<div id="floating-panel" class="menu-wrap">

<ul>
<li><input type="text" id="addressInput"
size="50"/>
<select id="radiusSelect">
<option value="25"
selected>25mi</option>
<option value="100">100mi</option>
<option value="200">200mi</option>
</select>
<input type="button"
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
Cianjur, Jawa Barat">

Pasar
</a></li>
</label>
</ul>
</li>
</ul>
<ul>
<li><select id="locationSelect"
style="width:100%;"></select></li>
</ul>
</div>
<div id="map" style="width: 100%; height: 100%"></div>
</body>
</html>
13. Jika berhasil maka akan muncul tampilan seperti berikut ini.

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