Beruflich Dokumente
Kultur Dokumente
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; } // 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(); ?>
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
// // // //
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()); } ?>
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.
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.
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');
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 +'<='+ 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>
Diposkan oleh Ibnu Imam Kirimkan Ini lewat EmailBlogThis!Berbagi ke TwitterBerbagi ke Facebook Label: Web Programing
<!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;">