บทนำ
ในบทความนี้ผมจะกล่าวถึงการใช้ Google Maps APIอย่างง่ายเพื่อเป็นตัวอย่างให้ผู้สนใจได้ทำขึ้นเพื่อเริ่มต้นทดลองใช้งาน หรือเรียนรู้ทำความเข้าใจในเทคโนโลยของ Google Maps API
ความรู้พื้นฐานเบื้องต้นที่จำเป็นในงานพัฒนา Google Maps mashup ซึ่งควรมี ดังนี้
1. html/ xhtml
2. javascript
เริ่มต้นการ Google Map API
ก่อนอื่นเราต้องทำการยื่นคำขอ API Key สำหรับ URL ของเว็บไซต์ที่จะใช้บริการ Google Maps API เว็บไซต์นั้นเป็นที่ที่เราจะนำเว็บเพจที่มี Google Maps เป็นองค์ประกอบไปวางไว้ หากไม่ใส่ API Key ลงไปจะไม่สามารถใช้บริการ Google Maps API ได้
(URL ที่ยื่นคำขอรับ API Key:-
http://www.google.com/apis/maps/signup.html)
*แต่ถ้ารันบนเครื่องผู้ใช้เอง(localhost)ยังไม่จำเป็นต้องใส่ API Key ก็ได้
เค้าโครงของแฟ้มข้อมูล HTML สำหรับการสร้าง Google Maps API อย่างง่าย
<!DOCTYPE html "-//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>My Google Maps Mash-up</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg..." type="text/javascript"></script>
</head>
<body onload='initialize()' onunload='unloadGmap()'>
<!-- body content here -->
<!-- some javascript here -->
</body>
</html>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg..." type="text/javascript"></script>
ข้อความ
v=2คือเป็นพารามีเตอร์ระบุความต้องการขอใช้ Google Maps API
เวอร์ชัน 2
เพื่อทำการประมวลผล(ปัจจุบันมีถึงเวอร์ชัน 3)
ข้อความ
key=abcdefg... คือจุดที่ใส่ API Key
สำหรับ URL
ของเว็บไซต์ที่จะใช้บริการ Google Maps API
ในส่วน <!-- body content here -->
ควรมี <div id='map_canvas' />
เพื่อทำหน้าที่เป็นกรอบของขอบเขตแสดงแผนที่ และ <!-- some javascript here -->
เตรียมไว้เป็นที่ของจาวาสคริปต์ซึ่งจะนำมาแทรกภายหลัง
ผมจะขอข้ามข้อมูลเบื่องต้นทั้งหมดไปแล้วเริ่มอธิบาย API ที่ผมใช้หลักๆเพื้อใช้ในการแสดงผล และเชื่อมต่อฐานข้อมูลเลย
เพราะว่าข้อมูลทั่วไปได้มีผู้จัดทำไว้แล้วให้เข้าไำปลองศึกษาได้ที่
http://www.lecturer.eng.chula.ac.th/fsvskk/gglmap2/get-start-gmap-apiv2.html)
API ในการใช้เพื่อหาพิกัดบนแผนที่
ตัวอย่างที่ 1 เมื่อมีการขยับแผนที่ให้เก็บค่าจุดกลางแผนที่แล้วทำการแสดงผลค่า Lat Lng อยู่ใต้แผนที่
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
ในส่วนของ
bodyให้ใส่ <div id="message"></div>เพื่อแสดงผลได้เลย
คลิกเพื่อดูผลงานตัวอย่างที่ 1 ที่ทำเสร็จแล้ว
*ถ้าต้องการโหลดไปเก็ไว้หรือเพื่อดูโคดให้กดคลิกขวาเลือก Save Target As
ตัวอย่างที่ 2 เมื่อคลิกบนแผนที่ให้แสดงหน้าต่างขึ้นมาเพื่อบอกค่าพิกัด
GEvent.addListener(map,"click", function(overlay,latlng) {
if (overlay) {
return;
}
var tileCoordinate = new GPoint();
var tilePoint = new GPoint();
var currentProjection = G_NORMAL_MAP.getProjection();
tilePoint = currentProjection.fromLatLngToPixel(latlng, map.getZoom());
tileCoordinate.x = Math.floor(tilePoint.x / 256);
tileCoordinate.y = Math.floor(tilePoint.y / 256);
var myHtml = "Latitude: " + latlng.lat() + "<br/>Longitude: " + latlng.lng() +
"<br/>The Tile Coordinate is:<br/> x: " + tileCoordinate.x +
"<br/> y: " + tileCoordinate.y + "<br/> at zoom level " + map.getZoom();
map.openInfoWindow(latlng, myHtml);
});
คลิกเพื่อดูผลงานตัวอย่างที่ 2 ที่ทำเสร็จแล้ว
ตัวอย่างที่ 3 ทำการส่งค่าตำแหน่งที่ทำการคลิก เพื่อส่งข้อมูลไปที่หน้าต่อไป โดยในตัวอย่างนี้จะส่งค่า lat และ lng
function initialize() {
GEvent.addListener(map,"click", function(overlay,latlng) {
if (latlng) {
var matchll = /\(([-.\d]*), ([-.\d]*)/.exec( latlng );
if ( matchll ) {
var lat = parseFloat( matchll[1] );
var lng = parseFloat( matchll[2] );
lat = lat.toFixed(6);
lng = lng.toFixed(6);
}
var myHtml = "กระทำการใส่ข้อมูลตำแหน่งนี้:<br> <input type='button' onClick='javascript:Addmarkersc("+lat+","+lng+");' value='ทำการบันทึก'>"; map.openInfoWindow(latlng, myHtml);
}
});
function Addmarkersc(lat,lng){
window.location="inputmap_markers.php?lat="+lat+"&lng="+lng;
}
*ในหน้าที่รับค่าจะต้องทำการกระกาศค่าตัวแปรก่อนเพื่อให้เรียกใช้งานได้เช่นจากตัวอย่างนี้ส่งค่า lat และ lng ก็ให้ประกาศก่อนด้วยว่า
<?php
$lat = $_GET["lat"];
$lng = $_GET["lng"];
?>
คลิกเพื่อดูผลงานตัวอย่างที่ 3 ที่ทำเสร็จแล้ว
หน้าคลิกเลือกตำแหนง
หน้ารับค่า
การสร้างและปรับแต่ง Marker
ตัวอย่างที่ 4 การสร้าง Marker ด้วยการคลิกบนแผนที่มีคำสั่งในการใช้งานดังนี้
GEvent.addListener(map, "click", function(marker, point) {
map.addOverlay(new GMarker(point));});
map.addOverlay(new GMarker(point)); คือคำสังใหนการสร้างMarkersซึ่งเราสามารถปรับแต่งMarkersได้เองได้ดังตัวอย่าง
var icongreen = new GIcon();
icongreen.image = 'http://newsirius13.thport.com/picture/c003.png';
icongreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
icongreen.iconSize = new GSize(20, 22);
icongreen.shadowSize = new GSize(1, 1);
icongreen.iconAnchor = new GPoint(12, 8);
icongreen.infoWindowAnchor = new GPoint(5, 1);
GEvent.addListener(map, "click", function(marker, point) {
map.addOverlay(new GMarker(point, icongreen));});
ในตัวอย่างนี้จำทำการสร้างตัวแปลขึ้นมา1ตัว ชื่อ icongreen เพื่อเก็บการตั้งค่าต่างๆของ Markers และเรียกใช้โดย
ให้ใส่ตัวแปลลงไปในคำสังสร้างMarkerนั้นคือ new GMarker(point, "ใส่ตัวแปลที่ต้องการ(ในตัวอย่างคือicongreen)") ก็จะได้ Markersตามรูปแบบที่เราได้ปรับแต่งตามต้องการ
คลิกเพื่อดูผลงานตัวอย่างการสร้างและMarkerที่โดนปรับแต่ง(ให้กดคลิกบนแผนที่จะทำการสร้างMarker ขึ้นมา)
การเชื่อมต่อฐานข้อมูล เพื่อแปลงMysql ให้เป็นไฟร์ Xml เพื่อใช้ในการสร้าง Marker บนแผนที่
ตัวอย่างที่ 5 การเชื่อมต่อฐานข้อมูล
เพื่อความสะดวกจึงขอแนะนำให้สร้างไฟร์ประกาศตัวแปลสำหรับเชื่อมต่อMysql แยกไว้1ไฟร์โดยสมมุติว่าชื่อ phpsql_dbinfo.php เมื่อต้องการใช้ก็ให้ทำการ require("phpsqlinfo_dbinfo.php"); โดยประกาศตัวแปลดังนี้ (สมมุติว่าใช้บน localhost)
(โหลดหน้า
phpsqlinfo_dbinfo.php)
<?
$username="(ปกติรันบนlocalhostมักจะเป็นคำว่า root)";
$password="(ใส่ตามที่ตั้งไว้)";
$database="(ใส่ชื่อฐานข้อมูล)";
$hostname = "(ปกติรันบนlocalhostก็ใช้คำว่าlocalhost)";
?>
กับการทดสอบเล็กๆอาจไม่มีปัญหาแต่เพื่อความสะดวกในการแก้ไขเมื่อระบบมีความใหญ่มากขึ้นก็ควรทำแยกไว้
ตัวอย่างที่ 6 การเปลี่ยนจากฐานข้อมูลMysql ให้เป็น Xml (โดนในที่นี้คือไฟร์ phpsqlajax_markers.php ซึ่งจะถูกเรียกใช้ในตัวอย่างต่อๆไป)
(โหลดหน้า
phpsqlajax_markers.php )
<?php
require("phpsqlinfo_dbinfo.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;
}
$connection=mysql_connect ($hostname, $username, $password);
mysql_query("SET NAMES UTF8",$connection);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// 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="' . $row['address'] . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
จากตัวอย่างจะเห็นได้ว่าเมื่อเชื่อมต่อแล้วประกาศ
header("Content-type: text/xml");แล้วก็จะสามารถใส่เงื่อนไขการแสดงข้อมูลออกมาได้ตามควมต้องการ
***หมายเหตุ การส่งข้อมูลไปเก็บทีื่่ Mysql และการเรียกใช้ข้อมูลจาก Mysql ที่เป็นภาษาไทยไม่ให้ภาษาผิดเพี้ยนให้ใส่tagคำสั่ง
mysql_query("SET NAMES UTF8",$con); ลงไปหลังคำสั่งเชื่อมต่อ mysql_connect
****และต้องกำหนดตัวอักษรของฐานข้อมูลเป็นประเภท UTF8 เท้านั้น(จะเป็นUTF8แบบใหนก็ได้)
การบันทึกลงฐานข้อมูล
การบันทึกลงฐานข้อมูลมี2วิธีหลักๆคือ
1.ส่งค่าละติจูต และ ลองติจูต ไปอีกหน้าเพื่อกรอกข้อมูลที่เหลือเแ้ล้วค่อยทำการบันทึกข้อมูล
2.บันทึกการกรอกข้อมูลจากหน้าแสดงแผนที่
ก่อนอื่นเริ่มต้นการสร้างฐานข้อมูลขึ้นมาก่อนดั่งตัวอย่าง
(โหลดไฟร์Mysql
phpsqlinfo_createtable.sql:)
CREATE TABLE `markers` (
`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
) ENGINE = MYISAM ;
ตัวอย่างที่ 7 ส่งค่าละติจูต และ ลองติจูต ไปอีกหน้าเพื่อกรอกข้อมูลที่เหลือเแ้ล้วค่อยทำการบันทึกข้อมูล
ในตัวอย่างที่ 7 นี้ให้ย้อนกลับไปดูตัวอย่างที่ 3 เพราะในตัวอย่างที่3เราสามารถส่งค่า ละติจูต และ ลองติจูตไปสู่หน้าต่อไปได้แล้ว ซึ่งที่เหลือคือการออกแบบหน้ากรอกข้อมูล และหน้าเชื่อต่อฐานข้อมูล ซึางผมขอยกตัวอย่างง่ายๆเช่น
หน้าแผนที่ที่จะทำการส่งค่าละติจูต และ ลองติจูต ในตัวอย่างนี้ขอตั้งชื่อว่า ex_7.php
(โหลดหน้า
ex_7.php)
<!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>ตัวอย่างที่3</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog"
type="text/javascript"></script>
<script src="js/gmaps.CircleOverlay.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var geocoder;function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
map.addMapType(G_PHYSICAL_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(13.8196,100.0601), 11);
}
}
function initialize() {
GEvent.addListener(map,"click", function(overlay,latlng) {
if (latlng) {
var matchll = /\(([-.\d]*), ([-.\d]*)/.exec( latlng );
if ( matchll ) {
var lat = parseFloat( matchll[1] );
var lng = parseFloat( matchll[2] );
lat = lat.toFixed(6);
lng = lng.toFixed(6);
}
var myHtml = "กระทำการใส่ข้อมูลตำแหน่งนี้:<br> <input type='button' onClick='javascript:Addpoint("+lat+","+lng+");' value='ทำการบันทึก'>";
map.openInfoWindow(latlng, myHtml);
}
});
}
function Addpoint(lat,lon){
window.location="ex_7b.php?lat="+lat+"&lng="+lon;
}
//]]>
</script>
<style type="text/css">
<!--
body {
background-image: url(picture/page1952.jpg);
}
-->
</style></head>
<body onload="load(),initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 600px; height: 400px"></div>
</body>
</html>
เมื่อสร้างหน้าส่งค่าเสร็จแล้วให้สร้างหน้ารับค่าเพื่อกรอกข้อมูลเพิ่มเติ่มขึ้นมา ให้ตั้งชื่อว่า ex_7b.php ซึ่งมีโคดตามข้างล้างนี้
โดยตั้งแต่ส่วนนี้ที่เหลือจะเป็นรูปแบบ php ปกติทั้งหมดจึงง่ายต่อการเขียนโปรแกรม(โดนสวนตัวผู้ทำเวบนี้ชอบวิธีนี้มากกว่าเลยใช้วิธีนี้เป็นหลัก)
(โหลดหน้า
ex_7b.php )
<?php
$lat = $_GET["lat"];
$lng = $_GET["lng"];
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>เพิ่มข้อมูลฟาร์มไก่</title>
<style type="text/css">
<!--
body {
background-image: url(picture/page1952.jpg);
}
-->
</style></head><link href="style.css" rel="stylesheet" type="text/css">
<body>
<form action="ex_7c.php" method="get">
<table width="442" height="0" border="0" align="center" cellpadding="2">
<tr>
<td width="143" align="right" valign="top">ชื่อ</td>
<td width="300" valign="top"><div align="left" >
<input type="text" name="fname" value= ""/>
</div></td>
</tr>
<tr>
<td align="right" valign="top">ประเภท</td>
<td valign="top">
</span>
<label>
<input name="type" type="radio" value="เปิด" checked>
เปิด</label>
<label>
<input name="type" type="radio" value="ปิด">
ปิด</label></td>
</tr>
<tr>
<td align="right" valign="top">ที่อยู่</td>
<td valign="top"><div align="left">
<textarea name="faddress" cols="30" rows="10" class="textarea" >Address</textarea>
</div></td>
</tr>
<tr>
<td align="right" valign="top">ละติจูต</td>
<td valign="top"><div align="left">
<input type="text" name="flat" value=<? echo $lat ?> />
</br>
</div></td>
</tr>
<tr>
<td align="right" valign="top">ลองติจูต</td>
<td valign="top"><div align="left">
<input type="text" name="flng" value=<? echo $lng ?> />
</br>
</div></td>
</tr>
<tr>
<td colspan="2" align="center"><div align="center">
<input type="submit" name="button" value="ทำการเพิ่มรายชื่อฟาร์ม" />
</div></td>
</tr>
</table>
</form>
</body>
</html>
และสุดท้าย ให้สร้างหน้าphpเพื่อทำการบันทึกข้อมูลลงMysql ในตัวอย่างนี้ให้มีชื่อว่า ex_7c.php
(โหลดหน้า
ex_7c.php)
<?phprequire("phpsql_dbinfo.php");
$con =mysql_connect ($hostname, $username, $password);
mysql_query("SET NAMES UTF8",$con);
if (!$con) { die('ติดต่อฐานข้อมูลไม่ได้: ' . mysql_error());
}
mysql_select_db($database, $con);
$sql = mysql_query("INSERT INTO markers (name, address, type, flat, flng)
VALUES('$_GET[name]','$_GET[address]','$_GET[type]',$_GET[flat],$_GET[flng]) ");
?>
<div align="center">
<p><label></label> </p>
<table width="200" border="0">
<tr>
<td><div align="center"> บันทึกข้อมูลเรียบร้อย </a></div></td>
</tr>
</table>
<p> </p>
</div>
mysql_query("SET NAMES UTF8",$con); ลงไปหลังคำสั่งเชื่อมต่อ mysql_connect
****และต้องกำหนดตัวอักษรของฐานข้อมูลเป็นประเภท UTF8 เท้านั้น(จะเป็นUTF8แบบใหนก็ได้)ตัวอย่างที่ 8 การบันทึกค่าจากหน้าแผนที่
ในตัวอย่างที่8นี้อาจดูซับซ้อนแต่มีความสะดวกสบายมากกว่าเมื่อเทียบกับตัวอย่างที่7
เริ่มต้นสร้างไฟร์ php เพื่อใช้บันทึกข้อมูลลงฐานข้อมูล Mysql ขึ้นมาก่อนในตั้วอย่างตั้งชื่อไฟร์ว่า phpsqlinfo_addrow.php
(โหลดไฟร์ php
phpsqlinfo_addrow.php)
<?php
require("phpsqlinfo_dbinfo.php");
// Gets data from URL parameters
$name = $_GET['name'];
$address = $_GET['address'];
$lat = $_GET['lat'];
$lng = $_GET['lng'];
$type = $_GET['type'];
// 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());
}
// Insert new row with user data
$query = sprintf("INSERT INTO markers " .
" (id, name, address, lat, lng, type ) " .
" VALUES (NULL, '%s', '%s', '%s', '%s', '%s');",
mysql_real_escape_string($name),
mysql_real_escape_string($address),
mysql_real_escape_string($lat),
mysql_real_escape_string($lng),
mysql_real_escape_string($type));
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
?>
สร้างหน้าแสดงแผนที่ ที่ใช้ในการบันทึกค่าโดยตั้งชื่อว่า phpsqlinfo_add.html โดยมีAPI สำคัญดั่งนี้
(โหลดไฟร์ html
phpsqlinfo_add.html):
var marker;GEvent.addListener(map, "click", function(overlay, latlng) {
if (latlng) {
marker = new GMarker(latlng, {draggable:true});
GEvent.addListener(marker, "click", function() {
var html = "<table>" +
"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Type:</td> <td><select id='type'>" +
"<option value='bar' SELECTED>bar</option>" +
"<option value='restaurant'>restaurant</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
marker.openInfoWindow(html);
});
map.addOverlay(marker);
}
});
function saveData() {
var name = escape(document.getElementById("name").value);
var address = escape(document.getElementById("address").value);
var type = document.getElementById("type").value;
var latlng = marker.getLatLng();
var lat = latlng.lat();
var lng = latlng.lng();
var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
"&type=" + type + "&lat=" + lat + "&lng=" + lng;
GDownloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
marker.closeInfoWindow();
}
});
}
จากตัวอย่า่งจะเห็นว่าทำการสร้างหน้าต่าง html ขึ้นมาเมื่อมีการคลิกที่แผนที่ โดยสร้างตารางกรอกข้อมูลขึ้นมาในตัวแปล html แล้วทำการแสดงผลด้วยคำสั่ง marker.openInfoWindow(html); จากนั้นสร้าง function saveData ขึ้นมาเพื่อทำการบันทึกข้อมูลที่กรอกรลงในหน้าต่าง html และให้ตัวแปล url สร้างแอสเดสเพื่อส่งข้อมูล โดยในต้วอย่างคือ
var url = "phpsqlinfo_addrow.php?.....และใช้ GDownloadUrl(url, function(data, responseCode) เพื่อทำการโหลดตัวแปล url ที่เราสร้างขึ้นมาเพื่อทำการส่งข้อมูลไปบัททึกตามแอดเดสที่ตัวแปล
url สร้างไว้
การสร้าง Marker จากฐานข้อมูล
ตัวอย่างที่ 9 การสร้างตำแหน่ง Marker(จุดบนแผนที่) และ sidebar(แถบแสดงข้อมูลจุดบนแผนที่) บนแผนที่จากฐานข้อมูล
GDownloadUrl("phpsqlajax_markers.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
return;
}
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = "cross";
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar.appendChild(sidebarEntry);
bounds.extend(point) ;
}
});
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>ชื่อสถานที่ : " + name + "</b> <br/>ที่อยู่ : " + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
}); return marker;
}
function createSidebarEntry(marker, name, address) {
var div = document.createElement('div');
var html = "<b>ชื่อ : " + name + "</b> <br/>ที่อยู่ : " + address ;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
จากโคดตัวอย่างนี้จะทำการโหลดข้อมูลจาก phpsqlajax_markers.php(ตัวอย่างที่6) ขึ้นมาโดยข้อมูลที่มาจาก phpsqlajax_markers.php จะถูกเปลี่ยนจาก Mysql ให้อยู่ในรูปแบบของ Xml เพื่อทำการสร้าง Marker ขึ้นมาบนแผนที่ โดยข้อมูลจะถูกสร้างขึ้นมาและเก็บไว้ที่ตัวแปล sidebar เพื่อเก็บไว้ใช้แสดงข้อมูล โดย
คำสั่งfor (var i = 0; i < markers.length; i++) จะทำการวนลูปสร้าง พิกัดขึ้นมาจนครบ โดยผู้ใช้จะต้องประกาศตัวแปล ที่ผู้ส่งมาจาก phpsqlajax_markers.php ก่อนเพื่อใช้งาน โดนในตัวอย่างที่ 5 จะเรียก name(ชื่อ), address(ที่อยู่), type(รูปแบบmarkerที่ให้แสดง) และ point(พิกัด) เพื่อสำหรับเรียกใช้งานการแสดงผลของฟังชั้น
createMarkerและ createSidebarEntry
function createMarker เพื้อใช้ในการแสดงผล Marker ออกมาด้วยคำสั่ง map.addOverlay(marker); และ
function createSidebarEntry เพื้อสร้างการแสดงผลในส่วน
body ของ Html เพื่อเรียกใช้งานได้้ให้ไปสู่พิกัดที่เก็บไว้ได้ทันที่เมื่อเลือก
คลิกเพื่อดูผลงานตัวอย่างที่ 9 ที่ทำเสร็จแล้ว
ดูผลงานของผู้พัฒนาระบบ
โหลดตัวอย่างเพื่อติดตั้งและทดสอบด้วยตัวเอง โดยจะมีตัว importMysql และไฟร์ต่างๆที่ต้องใช้
(การใช้งานให้เอาไฟร์thpor_3594038_demo.sql ทำการimportMysql และแก้ไขข้อมูลการเชื่อมต่อที่ไฟร์ phpsql_dbinfo.php )
การค้นหาสถานที่บนแผนที่ และฐานข้อมูล
การค้นหาจะแบ่งออกเป็น 2 แบบคือค้นหาจากฐานข้อมูลของGoogle Map และ การค้นหาจากฐานข้อมูล Mysql ที่ต้องใช้ในการค้นหา
ตัวอย่างที่ 10 การค้นหาสถาที่ หรือที่อยู่บนแผนที่ ด้วย Google API เพื่อหาจากฐานข้อมูลของ Google Map
1.สร้างตัวรับข้อมูลการพิมพ์
<body onload="load(),initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<input type="text" size="80" name="address" value="ใส่จังหวัด อำเภอ ตำบล ถนน เพื่อทำการค้นหาตำแหน่ง" />
<input name="submit" type="submit" value="ทำการค้นหา" />
<form>
จากตัวอย่างข้างบนเป็นการสร้างฟร์อมตัวรับการพิมพ์ข้อมูลเพื่อไปทำการค้นหาที่ฟังชั้น showAddress
2.สร้าง API ในการค้นหา
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert("ไม่เจอสถานที่ ที่ต้องการค้นหา");
} else {
map.setCenter(point, 15);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);}
}
);}}
จากตัวอย่างจะเห็นว่า ฟังชั้น showAddress จะได้รับข้อมูลมาและนำไปหาที่GoogleMap ด้วย API
geocoder
ดูตัวอย่างที่ 10 ที่ทำำเสร็จแล้ว
ตัวอย่างที่ 11 ค้นหาจากฐานข้อมูล Mysql ที่ต้องการแล้วนำมาแสดงผล
1.ก่อนอื่นทำการสร้างฐานข้อมูลขึ้นมาโดยที่มีข้อมูลใส่หรับใช้งาน ให้โหลดได้จาก
ตัวอย่างฐานข้อมูล ให้ทำการ import ลงMysql เพื่อใช้สำหรับการค้นหา
2.สร้างหน้าสำหรับสร้างตัวแปลที่ใช้ในการติดต่อฐานข้อมูล
(โหลดหน้า
phpsql_dbinfo.php)
<?
$username="(ปกติรันบนlocalhostมักจะเป็นคำว่า root)";
$password="(ใส่ตามที่ตั้งไว้)";
$database="(ใส่ชื่อฐานข้อมูล)";
$hostname = "(ปกติรันบนlocalhostก็ใช้คำว่าlocalhost)";
?>
3.ทำการสร้างหน้า php ที่ใช้ในการค้นหา Mysql ในตัวอย่างนี้ใช้ชื่อว่า search.php
(โหลดหน้า
search.php )
<?phprequire("phpsql_dbinfo.php");
// Get parameters from URL
$fsearch = $_GET["fsearch"];
$asearch = $_GET["asearch"];
// 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 ($hostname, $username, $password);
mysql_query("SET NAMES UTF8",$connection);
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());
}
$query = "select * from farm where $fsearch like '%$asearch%' ";
$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['fname']);
$newnode->setAttribute("address", $row['faddress']);
$newnode->setAttribute("idfarm", $row['idfarm']);
$newnode->setAttribute("fproducer", $row['fproducer']);
$newnode->setAttribute("fcollection", $row['fcollection']);
$newnode->setAttribute("type", $row['type']);
$newnode->setAttribute("fid", $row['fid']);
$newnode->setAttribute("lat", $row['flat']);
$newnode->setAttribute("lng", $row['flng']);
}
echo $dom->saveXML();
?>
4.สร้างAPIสำหรับทำการส่งค่าตัวแปล asearch และ fsearch ไปค้นที่ search.php และแสดงค่าผลการค้นหาที่พบ
function searchLocationsNear() {
var asearch = document.getElementById('asearch').value;
var fsearch = document.getElementById('fsearch').value;
var searchUrl = "search.php?fsearch=" + fsearch + "&asearch=" + asearch ;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');var sidebar3 = document.getElementById('sidebar3');
sidebar3.innerHTML = '';
if (markers.length == 0) {
sidebar3.innerHTML = 'No results found.';
map.setCenter(new GLatLng(13.8196,100.0601), 11);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var fid = markers[i].getAttribute("id");
var idfarm = markers[i].getAttribute("idfarm");
var fproducer = markers[i].getAttribute("fproducer");
var fcollection = markers[i].getAttribute("fcollection");
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type, idfarm, fproducer, fcollection, fid);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar3.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}
5.สร้างฟร์อมรับค่าตัวแปล asearch และ fsearch ในส่วนของ body html
<input name="text" type="text" id="asearch" value="ใส่ข้อมูลที่จะใช้ค้นหา" size="30"/>
ค้นหาจาก:
<select id="fsearch">
<option value="fname" selected>ชื่อฟาร์ม</option>
<option value="idfarm" >หรัสฟาร์ม</option>
<option value="faddress" >ที่อยู่</option>
</select>
<input type="button" onclick="searchLocationsNear()" value="เริ่มค้นหา"/>
โดยให้นำคำสั่งข้อ4 และ ข้อ5 ไปใช้ร่วมกับหน้าแสดงแผนที่ จะได้กังตัวอย่างหน้า ex__11.htm ดังต่อไปนี้
(โหลดหน้า
ex__11.htm )
<!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>ทำการแจ้งเตือน และ แสดงข้อมูลฟาร์มไก่</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog"
type="text/javascript"></script>
<script src="js/gmaps.CircleOverlay.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var circle = null;
var circle2 = null;
var map;
var geocoder;
var iconBlue = new GIcon();
iconBlue.image = 'http://newsirius13.thport.com/picture/c004.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(20, 22);
iconBlue.shadowSize = new GSize(1, 1);
iconBlue.iconAnchor = new GPoint(12, 8);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var icongreen = new GIcon();
icongreen.image = 'http://newsirius13.thport.com/picture/c003.png';
icongreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
icongreen.iconSize = new GSize(20, 22);
icongreen.shadowSize = new GSize(1, 1);
icongreen.iconAnchor = new GPoint(12, 8);
icongreen.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["ปิด"] = iconBlue;
customIcons["เปิด"] = icongreen;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
map.addMapType(G_PHYSICAL_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(13.8196,100.0601), 11);
}
}
function searchLocationsNear() {
var asearch = document.getElementById('asearch').value;
var fsearch = document.getElementById('fsearch').value;
var searchUrl = "search.php?fsearch=" + fsearch + "&asearch=" + asearch ;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
var sidebar3 = document.getElementById('sidebar3');
sidebar3.innerHTML = '';
if (markers.length == 0) {
sidebar3.innerHTML = 'No results found.';
map.setCenter(new GLatLng(13.8196,100.0601), 11);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var fid = markers[i].getAttribute("id");
var idfarm = markers[i].getAttribute("idfarm");
var fproducer = markers[i].getAttribute("fproducer");
var fcollection = markers[i].getAttribute("fcollection");
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type, idfarm, fproducer, fcollection, fid);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar3.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}
function createMarker(point, name, address, type, idfarm, fproducer, fcollection, fid) {
var marker = new GMarker(point, customIcons[type]);
var html = "<table width=300><tr><td>"+"หมายเลขสมาชิก:"+ idfarm +"<br>"+ "ชื่อฟาร์ม:" + name +"<br>"+"ชื่อผู้ประกอบการ:"+fproducer +"<br>"+"จำนวนไก่ที่เลี้ยง"+fcollection +"ตัว"+"<br>"+ "เป็นโรงเรือนประเภท" + type+"<br>"+"ที่อยู่:"+address+ "</td></tr></table>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function createSidebarEntry(marker, name, address) {
var div = document.createElement('div');
var html = "<b>" + name + "</b> <br/>" + address + "<br/> ------------------------------ <br/>" ;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
//]]>
</script>
<style type="text/css">
<!--
body {
background-image: url(picture/page1952.jpg);
}
.style1 {color: #FF0000}
.style2 {color: #FF9B9B}
.style3 {
font-size: 14px;
font-weight: bold;
}
.style4 {color: #0000FF}
.style5 {color: #00FF00}
-->
</style></head>
<body onload="load(),initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<table>
<tbody>
<tr>
<td width="600" height="402" rowspan="2"><div id="map_canvas" style="width: 600px; height: 400px"></div> </td>
<td width="180" height="402" valign="top"><div align="center"> <img src="http://newsirius13.thport.com/picture/bg/bt2003.gif" alt="" width="180" height="36" />
<input name="text" type="text" id="asearch" value="ใส่ข้อมูลที่จะใช้ค้นหา" size="30"/>
ค้นหาจาก:
<select id="fsearch">
<option value="fname" selected>ชื่อฟาร์ม</option>
<option value="idfarm" >หรัสฟาร์ม</option>
<option value="faddress" >ที่อยู่</option>
</select>
<input type="button" onclick="searchLocationsNear()" value="เริ่มค้นหา"/>
</p>
</div>
<div id="sidebar3" style="overflow: auto; height: 295px; font-size: 11px; color: #000"></div>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
คลิกโหลดตัวอย่างที่ 11
ดูตัวอย่างของผู้พัฒนาเวบนี้
โหลดตัวอย่างที่ 11 เพื่อติดตั้งและทดสอบด้วยตัวเอง โดยจะมีตัว importMysql และไฟร์ต่างๆที่ต้องใช้
(การใช้งานให้เอาไฟร์thpor_3594038_demo.sql ทำการimportMysql และแก้ไขข้อมูลการเชื่อมต่อที่ไฟร์ phpsql_dbinfo.php )
การสร้างวงกลมจากระยะรัศมีี่บนแผนที่
ตัวอย่างที่ 12 สร้างวงกลมที่มีรัศมี 10กิโลเมตร ขึ้นมาตรงจุดกึงกลางบนแผนที่
1.สร้างJava เพื่อใช้สำหรับสร้างวงกลมบนแผนที่Google Mapโดยให้ไฟร์นี้มีชื่อว่า gmaps.CircleOverlay.js
(โหลดหน้า
gmaps.CircleOverlay.js )
var CircleOverlay = function(latLng, radius, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity) {
this.latLng = latLng;
this.radius = radius;
this.strokeColor = strokeColor;
this.strokeWidth = strokeWidth;
this.strokeOpacity = strokeOpacity;
this.fillColor = fillColor;
this.fillOpacity = fillOpacity;
}
CircleOverlay.prototype = GOverlay;
CircleOverlay.prototype.initialize = function(map) {
this.map = map;
}
CircleOverlay.prototype.clear = function() {
if(this.polygon != null && this.map != null) {
this.map.removeOverlay(this.polygon);
}
}
CircleOverlay.prototype.redraw = function(force) {
var d2r = Math.PI / 180;
circleLatLngs = new Array();
var circleLat = this.radius * 0.014483; //Convert statute miles into degrees latitude
var circleLng = circleLat / Math.cos(this.latLng.lat() * d2r);
var numPoints = 40;
for (var i = 0; i < numPoints + 1; i++) {
var theta = Math.PI * (i / (numPoints / 2));
var vertexLat = this.latLng.lat() + (circleLat * Math.sin(theta));
var vertexLng = this.latLng.lng() + (circleLng * Math.cos(theta));
var vertextLatLng = new GLatLng(vertexLat, vertexLng);
circleLatLngs.push(vertextLatLng);
}
this.clear();
this.polygon = new GPolygon(circleLatLngs, this.strokeColor, this.strokeWidth, this.strokeOpacity, this.fillColor, this.fillOpacity);
this.map.addOverlay(this.polygon);
}
CircleOverlay.prototype.remove = function() {
this.clear();
}
CircleOverlay.prototype.containsLatLng = function(latLng) {
if(this.polygon.containsLatLng) {
return this.polygon.containsLatLng(latLng);
}
}
CircleOverlay.prototype.setRadius = function(radius) {
this.radius = radius;
}
CircleOverlay.prototype.setLatLng = function(latLng) {
this.latLng = latLng;
}
จากตัวอย่างvar circleLat = this.radius * 0.014483; เป็นการคิดคำนวนสร้างวงกลมด้วยค่า ไมร์ ถ้าต้องการค่าเป็น กิโลเมตร ให้ทำการหาร 1.62 เพิ่มเข้าไป หรือให้เปลี่ยน จาก * 0.014483 เป็น *0.00894 แทน ก็จะได้วิธีคิดแบบเป็นกิโลเมตร
2.การสร้างวงกลมขึ้นมาที่จุด Markers บนแผนที่ ด้วยการเรียกใช้ไฟร์Javaที่สร้างไว้ในข้อ1มาใช้งาน โดยตั้งชื่อหน้านี้ว่า circle.html
(โหลดหน้า
circle.html )
<html>
<head>
<title>GMaps Circle Test</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAOzwQ7Lh4CqiMto5Mx5BruhS-xyZmcPPoBCehH0LrfEv4pktlHxSKTILYLRlghp_oPDcwTo3STVXADg" type="text/javascript"></script>
<script src="gmaps.CircleOverlay.js" type="text/javascript"></script>
<script type="text/javascript">
var circle = null;
var circleRadius = 50; // Miles
var map = null;
var isCompatible = GBrowserIsCompatible();
//<![CDATA[
function load() {
if (isCompatible) {
// Create Map
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(42, -74), 6);
// Add controls
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// Create and add the circle
circle = new CircleOverlay(map.getCenter(), circleRadius, "#336699", 1, 1, '#336699', 0.25);
map.addOverlay(circle);
}
}
//]]>
</script>
</head>
<body onLoad="load()" onUnload="GUnload()">
<div id="map" style="width: 400px; height: 300px; border: 1px solid #666666;"></div>
</body>
</html>
จากตัวอย่างข้อ2นี้จะเห็นได้ว่าเราทำการเรียกJavaมาใช้งาน ด้วยคำสั่ง<script src="gmaps.CircleOverlay.js" type="text/javascript"></script> และการแสดงผลวงกลมจะอยู่กลางหน้าจอ
เพราะที่CircleOverlayกำหนดให้อยู่ที่จุด map.getCenter()
และในตัวแปล
circle = new CircleOverlay(map.getCenter(), circleRadius, "#336699", 1, 1, '#336699', 0.25); ก็คือการกำหน่อยค่าต่างๆไปส่งไปที่ไฟร์ Java ที่ตัวแปลCircleOverlayซึ่งมีความหมายการใช้งานดังนี้
CircleOverlay = function(latLng(ที่ตั้ง), radius(รัศมี), strokeColor(สีของเส้นวงกลม), strokeWidth(ความกว้างของเส้นวงกลม), strokeOpacity(ความชัดเจนของเส้นวงกลม), fillColor(สีของพื้นที่ในวงกลม), fillOpacity(ความชัดเจนของสีพื้นที่ในวงกลม))
โดยผู้ใช้งานสามารถนำไปดัดแปลงใช้งานได้ตามความเหมาะสม
แหล่งข้อมูลเพิ่มเติม
การใช้ Google Maps API เพื่อสร้าง Google Map Mashup อย่างง่าย โดย รองศาสตราจารย์สวัสดิ์ชัย เกรียงไกรเพช
(
http://www.lecturer.eng.chula.ac.th/fsvskk/gglmap2/get-start-gmap-apiv2.html#Google_Maps_mashup)Google Maps API
(
http://code.google.com/intl/en/apis/maps/)
