สอนการใช้ Google Maps APIอย่างง่าย

บทนำ
ในบทความนี้ผมจะกล่าวถึงการใช้ 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>
</html>

ผมจะขอข้ามข้อมูลเบื่องต้นทั้งหมดไปแล้วเริ่มอธิบาย API ที่ผมใช้หลักๆเพื้อใช้ในการแสดงผล และเชื่อมต่อฐานข้อมูลเลย
เพราะว่าข้อมูลทั่วไปได้มีผู้จัดทำไว้แล้วให้เข้าไำปลองศึกษาได้ที่
http://www.lecturer.eng.chula.ac.th/fsvskk/gglmap2/get-start-gmap-apiv2.html)

ตัวอย่างที่ 1 เมื่อมีการขยับแผนที่ให้เก็บค่าจุดกลางแผนที่แล้วทำการแสดงผลค่า Lat Lng อยู่ใต้แผนที่

GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});

ตัวอย่างที่ 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);
});

ตัวอย่างที่ 3 ทำการส่งค่าตำแหน่งที่ทำการคลิก เพื่อส่งข้อมูลไปที่หน้าต่อไป โดยในตัวอย่างนี้จะส่งค่า lat และ lng

*ในหน้าที่รับค่าจะต้องทำการกระกาศค่าตัวแปรก่อนเพื่อให้เรียกใช้งานได้เช่นจากตัวอย่างนี้ส่งค่า lat และ lng ก็ให้ประกาศก่อนด้วยว่า

<?php
$lat = $_GET["lat"];
$lng = $_GET["lng"];
?>

ตัวอย่างที่ 4 การสร้าง Marker ด้วยการคลิกบนแผนที่มีคำสั่งในการใช้งานดังนี้

GEvent.addListener(map, "click", function(marker, point) {
map.addOverlay(new GMarker(point));});

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 ขึ้นมา)

ตัวอย่างที่ 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;

map.openInfoWindow(latlng, myHtml);
}
});
}

function Addpoint(lat,lon){
window.location="ex_7b.php?lat="+lat+"&lng="+lon;
}
//]]>

</script>
<style type="text/css">

</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">

</style></head>

<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

require("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>

ตัวอย่างที่ 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());
}
?>

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);
}
});

ตัวอย่างที่ 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 เพื่อเรียกใช้งานได้้ให้ไปสู่พิกัดที่เก็บไว้ได้ทันที่เมื่อเลือก

การค้นหาจะแบ่งออกเป็น 2 แบบคือค้นหาจากฐานข้อมูลของGoogle Map และ การค้นหาจากฐานข้อมูล Mysql ที่ต้องใช้ในการค้นหา

ตัวอย่างที่ 10 การค้นหาสถาที่ หรือที่อยู่บนแผนที่ ด้วย Google API เพื่อหาจากฐานข้อมูลของ Google Map

จากตัวอย่างข้างบนเป็นการสร้างฟร์อมตัวรับการพิมพ์ข้อมูลเพื่อไปทำการค้นหาที่ฟังชั้น showAddress

จากตัวอย่างจะเห็นว่า ฟังชั้น showAddress จะได้รับข้อมูลมาและนำไปหาที่GoogleMap ด้วย API geocoder

ตัวอย่างที่ 11 ค้นหาจากฐานข้อมูล Mysql ที่ต้องการแล้วนำมาแสดงผล

1.ก่อนอื่นทำการสร้างฐานข้อมูลขึ้นมาโดยที่มีข้อมูลใส่หรับใช้งาน ให้โหลดได้จาก ตัวอย่างฐานข้อมูล ให้ทำการ import ลงMysql เพื่อใช้สำหรับการค้นหา

2.สร้างหน้าสำหรับสร้างตัวแปลที่ใช้ในการติดต่อฐานข้อมูล
(โหลดหน้า phpsql_dbinfo.php)

3.ทำการสร้างหน้า php ที่ใช้ในการค้นหา Mysql ในตัวอย่างนี้ใช้ชื่อว่า search.php
(โหลดหน้า search.php )

<?php

require("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));
});
}

<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 customIcons = [];
customIcons["ปิด"] = iconBlue;
customIcons["เปิด"] = icongreen;

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">

</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>

ตัวอย่างที่ 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(ความชัดเจนของสีพื้นที่ในวงกลม))
โดยผู้ใช้งานสามารถนำไปดัดแปลงใช้งานได้ตามความเหมาะสม