Membuat Gis Locator Dengan Google Maps Javascript Api V3.pdf

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 (ìd`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1

AUTO_INCREMENT=7 ;

9. Isikan database sesuai dengan tabel dibawah ini

atau bisa menggunakan sytax ini

INSERT INTO `markers` (ìd`, `name`, àddress`, `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('<','<',$htmlStr);

$xmlStr=str_replace('>','>',$xmlStr); $xmlStr=str_replace('"','"',$xmlStr);

$xmlStr=str_replace("'",''',$xmlStr); $xmlStr=str_replace("&",'&',$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,user-scalable=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);

}

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

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

Membuat Gis Locator Dengan Google Maps Javascript Api V3.pdf

Documents

Transcript of Membuat Gis Locator Dengan Google Maps Javascript Api V3.pdf