Elektro Unsyiah Society - Forum

Halo All!

Hari ini saya coba posting tantang bagaimana menampilkan Google Map di halaman web site kita yang merupakan salah satu metode Geocoding (You are not allowed to view links. Register or Login). Mungkin banyak dari kita yang sudah pernah membuatnya, namun mengingat belum ada yang posting disini, saya akan coba meringkaskannya disini. Semoga bermanfaat buat kita semua.

For English Version: You are not allowed to view links. Register or Login

Langkah Pertama adalah Membuat Tabel di Database

Saya berasumsi bahwa kita semua sudah paham bagaimana bekerja dengan MySQL, dan bagaimana membuat tabel dalam sebuah database di MySQL. Untuk case ini, berikut adalah SQL command yang saya gunakan untuk membuat tabel (anda juga bisa menggunakan interface phpMyAdmin, bila hal tersebut lebih memudahkan anda).

CREATE TABLE `places` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 60 ) NOT NULL ,
`address` VARCHAR( 80 ) NOT NULL ,
`lat` FLOAT( 10, 6 ) NOT NULL ,
`lng` FLOAT( 10, 6 ) NOT NULL ,
`type` VARCHAR( 30 ) NOT NULL,
`img` VARCHAR( 500 )
) ENGINE = MYISAM ;

field 'img' nantinya akan diisi dengan hyperlink ke file image dari object yang kita maksud, anda bisa berkreasi menurut keinginan anda

Langkah Kedua adalah Mengisikan data  di Database


Saya mengisikan beberapa contoh data yang saya inginkan, silahkan menggunakan data anda sendiri.

INSERT INTO `places` (`name`, `address`, `lat`, `lng`, `type`,`img`) VALUES ('Mesjid Raya Baiturrahman', 'Pusat Kota Banda Aceh', '5.553617','95.31724', 'Building','http://aboutmasjid.files.wordpress.com/2008/01/011708-2354-masjidrayab2.jpg');
INSERT INTO `places` (`name`, `address`, `lat`, `lng`, `type`,`img`) VALUES ('Lapangan Blang Padang', 'Pusat Kota Banda Aceh', '5.550224','95.313678', 'Places','http://www.pralangga.org/images/157.jpg');
INSERT INTO `places` (`name`, `address`, `lat`, `lng`, `type`,`img`) VALUES ('Bandara International Sultan Iskandar Muda', 'Blang Bintang', '5.522582','95.421553', 'Places','http://farm4.static.flickr.com/3422/3783240087_949b63a3ce.jpg');
INSERT INTO `places` (`name`, `address`, `lat`, `lng`, `type`,`img`) VALUES ('Kampus Jurusan Teknik Elektro', 'Darussalam', '5.567021','95.367946', 'Building','http://elektro.unsyiah.ac.id/wp-content/themes/WhiteHousePro_v3.0.1/images/feature5%20copy.jpg');

Sekarang saatnya mengeksport Database ke Format XML menggunakan PHP

Saya membuat sebuah file dan menamainya You are not allowed to view links. Register or Login dengan isi sebagai berikut:

<?php

$dbhost="localhost"; // Host name
$dbuser="username"; // Mysql username
$dbpass="password"; // Mysql password
$dbname="dbname"; // Database name

// Connect to server and select database.
$conn = mysql_connect("$dbhost", "$dbuser", "$dbpass")or die("Couldn&#39;t connect to MySQL Server, please check your configuration files.");
mysql_select_db("$dbname")or die("Connection to MySQL Server has been successfull, but we couldn&#39;t load the database. Please check your configuration files.");

function parseToXML($htmlStr)
{
$xmlStr=str_replace(&#39;<&#39;,&#39;&lt;&#39;,$htmlStr);
$xmlStr=str_replace(&#39;>&#39;,&#39;&gt;&#39;,$xmlStr);
$xmlStr=str_replace(&#39;"&#39;,&#39;&quot;&#39;,$xmlStr);
$xmlStr=str_replace("&#39;",&#39;&#39;&#39;,$xmlStr);
$xmlStr=str_replace("&",&#39;&amp;&#39;,$xmlStr);
return $xmlStr;
}

// Select all the rows in the markers table
$query = "SELECT * FROM places WHERE 1";
$result = mysql_query($query);
if (!$result) {
 die(&#39;Invalid query: &#39; . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo &#39;<places>&#39;;

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
 // ADD TO XML DOCUMENT NODE
 echo &#39;<place &#39;;
 echo &#39;name="&#39; . parseToXML($row[&#39;name&#39;]) . &#39;" &#39;;
 echo &#39;address="&#39; . parseToXML($row[&#39;address&#39;]) . &#39;" &#39;;
 echo &#39;lat="&#39; . $row[&#39;lat&#39;] . &#39;" &#39;;
 echo &#39;lng="&#39; . $row[&#39;lng&#39;] . &#39;" &#39;;
 echo &#39;type="&#39; . $row[&#39;type&#39;] . &#39;" &#39;;
 echo &#39;img="&#39; . $row[&#39;img&#39;] . &#39;" &#39;;
 echo &#39;/>&#39;;
}

// End XML file
echo &#39;</places>&#39;;

?>
Untuk menguji file XML tersebut, panggillah alamat file tersebut menggunakan Web Browser, seperti contoh You are not allowed to view links. Register or Logindan hasil yang tampil untuk file saya adalah seperti ini:

<places>
<place name="Mesjid Raya Baiturrahman" address="Pusat Kota Banda Aceh" lat="5.553617" lng="95.317238" type="building" img="You are not allowed to view links. Register or Login"/>
<place name="Lapangan Blang Padang" address="Pusat Kota Banda Aceh" lat="5.550224" lng="95.313675" type="places" img="You are not allowed to view links. Register or Login"/>
<place name="Bandara International Sultan Iskandar Muda" address="Blang Bintang" lat="5.522582" lng="95.421555" type="places" img="You are not allowed to view links. Register or Login"/>
<place name="Kampus Jurusan Teknik Elektro" address="Darussalam" lat="5.567021" lng="95.367943" type="building" img="You are not allowed to view links. Register or Login"/>
</places>

Untuk menampilkan Google Map, saya membuat satu file PHP lain dan menamainya You are not allowed to view links. Register or Login, dengan isi sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Buildings dan places in Banda Aceh</title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAA30w6KD6rEdcPjUqhVIJyOxRP6oaYyuzd1oSN-iwW683DxZWC6hTL_85cGsThjS-SRZ4eSp8w7ssvjQ" type="text/javascript"></script>
<script type="text/javascript">

 //<![CDATA[

 var iconBlue = new GIcon();
 iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
 iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
 iconBlue.iconSize = new GSize(12, 20);
 iconBlue.shadowSize = new GSize(22, 20);
 iconBlue.iconAnchor = new GPoint(6, 20);
 iconBlue.infoWindowAnchor = new GPoint(5, 1);

 var iconRed = new GIcon();
 iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
 iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
 iconRed.iconSize = new GSize(12, 20);
 iconRed.shadowSize = new GSize(22, 20);
 iconRed.iconAnchor = new GPoint(6, 20);
 iconRed.infoWindowAnchor = new GPoint(5, 1);

 var customIcons = [];
 customIcons["building"] = iconBlue;
 customIcons["site"] = iconRed;

 function load() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map"));
 map.addControl(new GSmallMapControl());
 map.addControl(new GMapTypeControl());
 map.setCenter(new GLatLng(5.546692,95.318946), 9);

 GDownloadUrl("phptoxml.php", function(data) {
 var xml = GXml.parse(data);
 var places = xml.documentElement.getElementsByTagName("place");
 for (var i = 0; i < places.length; i++) {
 var name = places[i].getAttribute("name");
 var address = places[i].getAttribute("address");
 var type = places[i].getAttribute("type");
 var point = new GLatLng(parseFloat(places[i].getAttribute("lat")),
 parseFloat(places[i].getAttribute("lng")));
 var img = places[i].getAttribute("img");
 var place = createMarker(point, name, address, type, img);
 map.addOverlay(place);
 }
 });
 }
 }

 function createMarker(point, name, address, type, img) {
 var place = new GMarker(point,customIcons[type]);
 var html = "<b>" + name + "</a></b> <br/>" + address +"<br /><a href='"+ img + "' target='_blank'><b>See Picture</b></a><br />" ;
 GEvent.addListener(place, 'click', function() {
 place.openInfoWindowHtml(html);

 });

 return place;
 }

 //]]>

 </script>

 </head>

 <body onload="load()" onunload="GUnload()">
 <div id="map" style="width: 600px; height: 350px"></div>
 </body>
</html>
Tampilannya akan seperti You are not allowed to view links. Register or Login:



Anda bisa menampilkan Google Map tersebut di bagian mana saja di website anda dengan menggunakan syntax:

<?php
include "gmap.php";
?>
Semoga bermanfaat