You are on page 1of 10

<?php header("Content-type: text/xml"); require("phpsqlsearch_dbinfo.

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; } // Get parameters from URL $center_lat = $_GET["lat"]; $center_lng = $_GET["lng"]; $radius = $_GET["radius"]; // Opens a connection to a MySQL server $connection=mysql_connect (localhost, $username, $password); if (!$connection) { die('Not connected : ' . mysql_error()); } // Set the active MySQL database $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ('Can\'t use db : ' . mysql_error()); } // Select all the rows in the markers table $query = sprintf("SELECT address, name, lat, lng, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers 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()); } // Start XML file, echo parent node echo "<markers>\n"; // Iterate through the rows, printing XML nodes for each while ($row = @mysql_fetch_assoc($result)){ // ADD TO XML DOCUMENT NODE 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 "/>\n"; } // End XML file echo "</markers>\n"; ?>

<?php require("phpsqlsearch_dbinfo.php"); // Get parameters from URL $center_lat = $_GET["lat"]; $center_lng = $_GET["lng"]; $radius = $_GET["radius"]; // Start XML file, create parent node $dom = new DOMDocument("1.0"); $node = $dom->createElement("markers"); $parnode = $dom->appendChild($node); // Opens a connection to a mySQL server $connection=mysql_connect (localhost, $username, $password); if (!$connection) { die("Not connected : " . mysql_error()); } // Set the active mySQL database $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ("Can\'t use db : " . mysql_error()); } // Search the rows in the markers table $query = sprintf("SELECT address, name, lat, lng, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers 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()); } header("Content-type: text/xml"); // Iterate through the rows, adding XML nodes for each while ($row = @mysql_fetch_assoc($result)){ $node = $dom->createElement("marker");

$newnode = $parnode->appendChild($node); $newnode->setAttribute("name", $row['name']); $newnode->setAttribute("address", $row['address']); $newnode->setAttribute("lat", $row['lat']); $newnode->setAttribute("lng", $row['lng']); $newnode->setAttribute("distance", $row['distance']); } echo $dom->saveXML(); ?>

Pemetaan Lokasi dgn PHP, MySql dan Google API


Langsung aja gan,.. Step by step..
1. Membuat database dan tabel

Buatlah database dengan nama googleapi, kemudian dilanjut dengan membuat tabel lokasi...
1: CREATE TABLE `lokasi` ( 2: `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , 3: `name` VARCHAR( 60 ) NOT NULL , 4: `address` VARCHAR( 80 ) NOT NULL , 5: `lat` FLOAT( 10, 6 ) NOT NULL , 6: `lng` FLOAT( 10, 6 ) NOT NULL 7: ) ENGINE = MYISAM ; 9: INSERT INTO `markers` VALUES (1, 'ITB', 'Jalan Ganesha, Bandung', -6.892654, 107.610168); 10: INSERT INTO `markers` VALUES (2, 'PT Rima', 'Jalan Biologi 22, Bandung, Indonesia', -6.883089, 107.624184);

Note : Untuk kordinat Latitude (lat) dan Longitude (lng) harus diketahui, dapat di cek di http://www.findlatitudeandlongitude.com/
2. Membuat folder web

Persiapkan satu folder didalam directory web anda untuk menampung file yang akan dibuat. (sesuaikan web server dgn yang anda gunakan) disini saya menggunakan AppServ dan membuat folder dengan nama peta. : C://AppServ/www/peta/
1. Membuat file koneksi

Buatlah halaman php dengan nama koneksi.php

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18:

<?php $host=localhost; $username=username; $password=password; $database=googleapi;

// // // //

Host yang digunakan Username dari databse Password dari databse Nama database

// Opens a connection to a mySQL server $connection=mysql_connect ($host, $username, $password); if (!$connection) { die("Not connected : " . mysql_error()); } // Set the active mySQL database $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ("Can\'t use db : " . mysql_error()); } ?>

2. Membuat keluaran XML dengan PHP

Membuat sebuah halaman yang berfungi untuk menjadikan data dari database ke dalam bentuk XML menggunakan fungsi DOM yang nantinya akan di panggil sebagai data lokasi dalam pemetaan menggunakan google map.

Buatlah halaman php dengan nama genxml.php


1: 2: 3: 4: 5: <?php require("koneksi.php"); // Get parameters from URL $center_lat = $_GET["lat"];

6: $center_lng = $_GET["lng"]; 7: $radius = $_GET["radius"]; 8: 9: // Start XML file, create parent node 10: $dom = new DOMDocument("1.0"); 11: $node = $dom->createElement("markers"); 12: $parnode = $dom->appendChild($node); 13:

14: // Search the rows in the markers table 15: $query = sprintf("SELECT address, name, lat, lng, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM lokasi HAVING distance < '%s' ORDER BY distance LIMIT 0 , 20", 16: mysql_real_escape_string($center_lat), 17: mysql_real_escape_string($center_lng), 18: mysql_real_escape_string($center_lat), 19: mysql_real_escape_string($radius)); 20: $result = mysql_query($query); 21: 22: $result = mysql_query($query); 23: if (!$result) { 24: die("Invalid query: " . mysql_error()); 25: } 26: 27: header("Content-type: text/xml"); 28: 29: // Iterate through the rows, adding XML nodes for each 30: while ($row = @mysql_fetch_assoc($result)){ 31: $node = $dom->createElement("marker"); 32: $newnode = $parnode->appendChild($node); 33: $newnode->setAttribute("name", $row['name']); 34: $newnode->setAttribute("address", $row['address']); 35: $newnode->setAttribute("lat", $row['lat']); 36: $newnode->setAttribute("lng", $row['lng']); 37: $newnode->setAttribute("distance", $row['distance']); 38: } 39: 40: echo $dom->saveXML(); 41: ?>

3. Membuat Map

Membuat halaman php yang akan menampilkan map dan lokasi-lokasi berdassarkan data yang terdapat pada database.

Buatlah hlaman php dengan nama map.php


1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2: 3: <html xmlns="http://www.w3.org/1999/xhtml"> 4: <head> 5: <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 6: <title>Google API Mapa TEST IBNU</title> 7: 8: //fungsi mendapatkan map dari google 9: //key dapat diganti dengan key baru dari google dengan cara mendaftar

10: <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAGq6foPILnL0gXPtmTcxLhSBazU3GxiNq3dXpyGawPD_3H4NXhQMHnjSg_ozuAgR-VQXc2l8okmegQ" type="text/javascript"></script> 11: 12: <script type="text/javascript"> 13: //<![CDATA[ 14: var map; 15: var geocoder; 16: 17: function load() { 18: if (GBrowserIsCompatible()) { 19: geocoder = new GClientGeocoder(); 20: map = new GMap2(document.getElementById('map')); 21: map.addControl(new GSmallMapControl()); 22: map.addControl(new GMapTypeControl()); 23: map.setCenter(new GLatLng(-0.7892750, 113.9213270), 4); 24: } 25: } 26: 27: function searchLocations() { 28: var address = document.getElementById('addressInput').value; 29: geocoder.getLatLng(address, function(latlng) { 30: if (!latlng) { 31: alert(address + ' not found'); 32: } else { 33: searchLocationsNear(latlng); 34: } 35: }); 36: } 37: 38: function searchLocationsNear(center) { 39: var radius = document.getElementById('radiusSelect').value; 40: var searchUrl = 'genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; 41: GDownloadUrl(searchUrl, function(data) { 42: 43: 44: 45: 46: var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName('marker'); map.clearOverlays(); var sidebar = document.getElementById('sidebar');

47: sidebar.innerHTML = ''; 48: if (markers.length == 0) {

49: sidebar.innerHTML = 'No results found.'; 50: 51: 52: 53: map.setCenter(new GLatLng(-0.7892750, 113.9213270), 4); return; }

54: //-----untuk variabel------------------------// 55: var bounds = new GLatLngBounds(); 56: for (var i = 0; i < markers.length; i++) { 57: var name = markers[i].getAttribute('name'); 58: var address = markers[i].getAttribute('address'); 59: var lat = markers[i].getAttribute('lat'); 60: var lon = markers[i].getAttribute('lng'); 61: var distance = parseFloat(markers[i].getAttribute('distance')); 62: var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), 63: parseFloat(markers[i].getAttribute('lng'))); 64: 65: var marker = createMarker(point, name, address, lat, lon); 66: 67: map.addOverlay(marker); 68: var sidebarEntry = createSidebarEntry(marker, name, address, distance); 69: sidebar.appendChild(sidebarEntry); 70: bounds.extend(point); 71: } 72: map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); 73: }); 74: } 75: 76: 77: //-----untuk keterangan dari titik Point lokasi-------------------// 78: 79: function createMarker(point, name, address, lat, lon) { 80: var marker = new GMarker(point); 81: var html = '<b><a href="?nm='+ name +'&lt='+ lat +'">' + name + '</a></b> <br/>' + address + '<br/> Latitude :' + lat + '<br/> Longitude :' + lon; 82: GEvent.addListener(marker, 'click', function() { 83: marker.openInfoWindowHtml(html); 84: }); 85: return marker; 86: } 87: 88: //--untuk menampilkan keterangan lokasi pada bar kiri di interface 89: 90: function createSidebarEntry(marker, name, address, distance) { 91: var div = document.createElement('div'); 92: var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address; 93: div.innerHTML = html; 94: div.style.cursor = 'pointer'; 95: div.style.marginBottom = '5px'; 96: GEvent.addDomListener(div, 'click', function() { 97: GEvent.trigger(marker, 'click'); 98: }); 99: GEvent.addDomListener(div, 'mouseover', function() { 100: div.style.backgroundColor = '#eee'; 101: }); 102: GEvent.addDomListener(div, 'mouseout', function() { 103: div.style.backgroundColor = '#fff';

104: }); 105: return div; 106: } 107: //]]> 108: </script> 109: 110: </head> 111: <body onload="load()" onunload="GUnload()"> 112: Alamat: <input type="text" id="addressInput"/> 113: 114: Radius: <select id="radiusSelect"> 115: <option value="25" selected>25</option> 116: <option value="100">100</option> 117: 118: <option value="200">200</option> 119: </select> 120: 121: <input type="button" onclick="searchLocations()" value="Cari Lokasi"/> 122: <br/> 123: <br/> 124: <div style="width:800px; font-family:Arial, 125: sans-serif; font-size:11px; border:1px solid black"> 126: <table> 127: <tbody> 128: <tr> 129: <td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 500px; font-size: 11px; color: #000"></div> 130: 131: </td> 132: <td> <div id="map" style="overflow: hidden; width:600px; height:500px"></div> </td> 133: </tr> 134: </tbody> 135: </table> 136: </div> 137: </body> 138: </html>

4. Hasil dapat dicek di browser dengan mengetik http://localhost/peta/map.php

Diposkan oleh Ibnu Imam Kirimkan Ini lewat EmailBlogThis!Berbagi ke TwitterBerbagi ke Facebook Label: Web Programing

Untuk Informasi Lebih Lanjut Tentang RLE


Kebanyakan buku tentang kompresi data memiliki informasi tenta

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Get Lattitude and Longitude onmouseover and onclick in Google Map v2 Programming - Google Maps</title> <meta name="keywords" content="get lattitude longitude, latlng onclick google map, latlng onmousemove google map, get lattitude longitude onclick, google map mouse event, show lattitude longutude onmousemove, show latlng onclick"> <meta name="description" content="Get lattitude and longitude when onmouseover and onmouseclick in google map version 2" /> <script src="http://maps.google.com/maps?file=api&v=2&key=Kode-APIKEY-Anda" type="text/javascript"></script> <style type="text/css"> body {font:10pt arial; } .main { text-align:center; font:12pt Arial; width:100%; height:auto; } .eventtext {width:100%; margin-top:20px; font:10pt Arial; text-align:left; line-height:25px; background-color:#EDF4F8; padding:5px; border:1px dashed #C2DAE7;} #mapa {width:100%; height:340px; border:5px solid #DEEBF2;} ul {font:10pt arial; margin-left:0px; padding:5px;} li {margin-left:0px; padding:5px; list-style-type:decimal;} .code {border:1px dashed #cecece; background-color:#F7F7F7; padding:5px;} .small {font:9pt arial; color:gray; padding:2px; } .jimi { margin:0px;} </style> </head> <body> <div class="main"> <div style="width:70%; <div id="mapa"></div> <div class="eventtext"> <div>Lattitude: <span id="latspan"></span></div> <div>Longitude: <span id="lngspan"></span></div> margin:0px auto;">

<div>Lat Lng: <span id="latlong"></span></div> <div>Lat Lng on click: <input type="text" id="latlongclicked" style="width:300px; border:1px inset gray;"></span></div> </div> </div> </div> <script type="text/javascript"> if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("mapa")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl(3)); map.setCenter( new GLatLng(26.12295, -80.17122), 11,0); GEvent.addListener(map,'mousemove',function(point) { document.getElementById('latspan').innerHTML = point.lat() document.getElementById('lngspan').innerHTML = point.lng() document.getElementById('latlong').innerHTML = point.lat() + ', ' + point.lng() }); GEvent.addListener(map,'click',function(overlay,point) { document.getElementById('latlongclicked').value = point.lat() + ', ' + point.lng() }); } </script> <br /> <div style="width:70%; </body> </html> margin:0 auto;">

You might also like