Membuat Gis Locator Dengan Google Maps Javascript API V3

download Membuat Gis Locator Dengan Google Maps Javascript API V3

of 21

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