Google Maps api v2 - การนำพิกัดจากฐานข้อมูลมาแสดงบน Google Map

บทความนี้มาต่อไนเรื่องของ Google Map api v2 จากที่เคยกล่าวถึงในเรื่องของ Google Maps api v2 - การเชื่อมต่อฐานข้อมูล เพื่อแปลง Mysql ให้เป็นไฟล์ Xml เพื่อใช้ในการสร้าง Marker บนแผนที่ มาแล้ว บทความนี้จะเป็นการนำ Marker มาแสดงผลบน Google Map ซึ่งเป็นการนำพิกัดที่ได้เก็บไว้มาแสดงผลเป็น 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;
}

จากโค้ดตัวอย่างนี้จะทำการโหลดข้อมูลจากบทความ " Google Maps api v2 - การเชื่อมต่อฐานข้อมูล เพื่อแปลง Mysql ให้เป็นไฟล์ Xml เพื่อใช้ในการสร้าง Marker บนแผนที่"  ขึ้นมาเพื่อทำการสร้าง Marker ขึ้นมาบนแผนที่ โดยข้อมูลจะถูกสร้างขึ้นมาและเก็บไว้ที่ตัวแปล sidebar เพื่อเก็บไว้ใช้แสดงข้อมูล โดยคำสั่ง for (var i = 0; i < markers.length; i++) จะทำการวนลูปสร้าง พิกัดขึ้นมาจนครบ และดึงข้อมูล name(ชื่อ), address(ที่อยู่), type(รูปแบบmarkerที่ให้แสดง) และ point(พิกัด) เพื่อสำหรับเรียกใช้งานการแสดงผลของฟังชั้น createMarker

function createMarker เพื้อใช้ในการแสดงผล Marker ออกมาด้วยคำสั่ง map.addOverlay(marker); และ 

function createSidebarEntry เพื้อสร้างการแสดงผลในส่วน body ของ Html เพื่อเรียกใช้งานได้้ให้ไปสู่พิกัดที่เก็บไว้ได้ทันที่เมื่อเลือก เขียนไปเขียนมาก็งงลองโหลดตัวอย่างไปดูล่ะกันครับ

Read more >>

code php กับการทำ dropdownlist 2 ขั้นอย่างง่าย

บทความ โค้ด php บทความนี้จะเกี่ยวกับการทำ dropdownlist แบบ 2 ชั้น ยกตัวอย่างเช่น ถ้าเราเลือกรายการใน listbox หลักแล้วใน listbox ย่อยก็จะแสดงรายการที่เกี่ยวข้องกับ listbox หลักขึ้นมานั่นเอง  คิดว่าคงมีหลายคนเคยใช้ หรือเคยค้นหาวิธีการทำอยู่บ้างโค้ดที่นำมานี้จะเป็นการใช้ภาษา php ในการเขียน และเชื่อมโยงฐานข้อมูลกับ MS Access แต่ก็สามารถนำไปประยุกต์ใช้กับฐานข้อมูล Sql ได้น่ะครับ ก็ลองนำโค้ดไปปรับแต่งดู
ตัวอย่าง Code php


       <script>
function submit_click(obj,s)
{
if(s=='a' & document.form_test.a.value!='<?=$a?>')
{
document.form_test.b.value="";
obj.action="";
obj.submit();
}

else if(s=='b' & document.form_test.b.value!='<?=$b?>')
{
obj.action="";
obj.submit();
}
}
      </script>
 
<form name="form_test" method="post" action="insert.php">
  <table width="50%" border="2" align="center" cellpadding="0" cellspacing="0" bordercolor="#3366CC">
    <tr>
      <td width="40%"><div align="left"><strong>เลือกประเภทหลัก </strong>&nbsp;&nbsp;&nbsp;&nbsp;</div></td>
      <td><select name="a" onChange="submit_click(this.form,'a')" >
        <option value="<?=$a?>">
        <? if($a){echo"$a";}else if(!$a){echo"- เลือกประเภทหลัก -";}?>
        </option>
        <?
$dsn = ""; // กำหนดชื่อ DSN
$user =""; // กำหนดชื่อล็อกอิน
$pass =""; // กำหนดรหัสผ่าน
$connect = odbc_connect($dsn, $user, $pass) or die("ติดต่อ DSN ไม่ได้"); // เริ่มติดต่อฐานข้อมูล
$sql = "SELECT other.total AS a
FROM other
GROUP BY other.total;
 ";// กำหนดคำสั่ง SQL เพื่อแสดงข้อมูล
$exec = odbc_exec($connect, $sql); // เริ่มเอ็กซิคิวต์คำสั่ง SQL
While (odbc_fetch_row($exec4)) // ดึงข้อมูลเรกคอร์ดที่
{
$a1 = odbc_result($exec, "a");
?>
        <option value="<?=$a1?>">
        <?=$a1?>
        </option>
        <? } ?>
      </select></td>
    </tr>
    <tr>
      <td width="40%"><div align="left"><strong>เลือกประเภทย่อย</strong> &nbsp;&nbsp;&nbsp;&nbsp;</div></td>
      <td><select name="b" onChange="submit_click(this.form,'b')" >
        <option value="<?=$b?>">
        <? if($b){echo"$b";}else if(!$b){echo"- เลือกประเภทย่อย -";}?>
        </option>
        <?
$sql1 ="SELECT other.form AS b
FROM other
GROUP BY other.total, other.form
HAVING (((other.total)='$a'));
 ";// กำหนดคำสั่ง SQL เพื่อแสดงข้อมูล
$exec1 = odbc_exec($connect, $sql1); // เริ่มเอ็กซิคิวต์คำสั่ง SQL
While (odbc_fetch_row($exec1)) // ดึงข้อมูลเรกคอร์ดที่
{
$b1 = odbc_result($exec1, "b");
?>
        <option value="<?=$b1?>">
        <?=$b1?>
        </option>
        <? } ?>
      </select></td>
    </tr>
    <tr>
      <td colspan="2"><div align="center">
        <input type="submit" name="Submit" value="บันทึก">
        &nbsp;
        <input name="btnClear" type="reset" id="btnClear" value="Clear" onClick="clsControlObject('form_test','clear')" />
      </div></td>
    </tr>
  </table>
</form>

ซึ่งถ้าเราเข้าใจการทำงานของคำสั่งดีแล้ว เราก็จะสามารถนำไปพัฒนาต่อเป็น 3 ชั้น หรือ 4 ชั้นได้ต่อไป

Read more >>

Google Maps api v2 - การบันทึกข้อมูลลงฐานข้อมูล

หลังจากที่ศึกษา โค้ด php เกี่ยวกับ Google Maps api v2 มาแล้ว วันนี้เรามาต่อในเรื่องของการบันทึกข้อมูลลงฐานข้อมูล ซึ่งมีวิธีทำหลัก ๆ อยู่ 2 วิธีคือ

1.ส่งค่าละติจูต และ ลองติจูต ไปอีกหน้าเพื่อกรอกข้อมูลที่เหลือเแล้วค่อยทำการบันทึกข้อมูล
2.บันทึกการกรอกข้อมูลจากหน้าแสดงแผนที่ 

เรามาเริ่มดู code กันเลยครับ เริ่มจากการสร้างฐานข้อมูลเป็นอันดับแรกโค้ดด้านล่างเลยครับ

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 ;

หลังจากนั้นก็สร้างไฟล์หน้าแผนที่ขึ้นมาเพื่อเราจะได้ส่งค่าพิกัดไปได้ (ดูบทความการส่งค่าพิกัด) เมื่อสร้างหน้าส่งค่าเสร็จแล้วให้สร้างหน้ารับค่าเพื่อกรอกข้อมูลเพิ่มเติ่มขึ้นมา ซึ่งมีโค้ดตามข้างล้างนี้ 

โดยขอใช้ภาษา php  ในการเขียนโปรแกรม

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

และสุดท้าย ให้สร้างหน้าไฟล์เพื่อทำการบันทึกข้อมูลลง Mysql

code php

<?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>&nbsp; </p>
<table width="200" border="0">
<tr>
<td><div align="center"> บันทึกข้อมูลเรียบร้อย </a></div></td>
</tr>
</table>
<p>&nbsp;</p>
</div>

***หมายเหตุ การส่งข้อมูลไปเก็บทีื่่ Mysql และการเรียกใช้ข้อมูลจาก Mysql ที่เป็นภาษาไทยไม่ให้ภาษาผิดเพี้ยนให้ใส่tagคำสั่ง
mysql_query("SET NAMES UTF8",$con); ลงไปหลังคำสั่งเชื่อมต่อ mysql_connect

****และต้องกำหนดตัวอักษรของฐานข้อมูลเป็นประเภท UTF8 เท้านั้น (จะเป็นUTF8แบบใหนก็ได้)  

Read more >>

Google Maps api v2 - การเชื่อมต่อฐานข้อมูล เพื่อแปลง Mysql ให้เป็นไฟล์ Xml เพื่อใช้ในการสร้าง Marker บนแผนที่

ในบทความนี้จะเป็นการนำฐานข้อมูลของเราที่มีการเก็บพิกัดไว้ มาใช้ร่วมกับ Google map api v2 โดยใช้ภาษา php การเขียนคำสั่งของโค้ด php นั้นเพื่อความสะดวกในการใช้งานควรจะสร้างไฟล์เชื่อมต่อ Mysql แยกไว้ 1 ไฟล์โดยสมมุติว่าชื่อ phpsql_dbinfo.php เมื่อต้องการใช้ก็ให้ทำการ require("phpsqlinfo_dbinfo.php"); โดยประกาศตัวแปลดังนี้ (สมมุติว่าใช้บน localhost)

code php ไฟล์ phpsql_dbinfo.php

$username="(ปกติรันบนlocalhostมักจะเป็นคำว่า  root)";
$password="(ใส่ตามที่ตั้งไว้)";
$database="(ใส่ชื่อฐานข้อมูล)";
$hostname  = "(ปกติรันบนlocalhostก็ใช้คำว่าlocalhost)";
?>

จากนั้นสำหรับการเปลี่ยนจากฐานข้อมูล Mysql ให้เป็น Xml (โดยในที่นี้คือไฟล์ phpsqlajax_markers.php ซึ่งจะถูกเรียกใช้ในตัวอย่างต่อๆไป)

code php phpsqlajax_markers.php

<?php
require("phpsqlinfo_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;
}

$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 แบบใหนก็ได้)

ดังนั้นในตอนนี้เราก็จะได้ข้อมูลที่แปลงจากฐาน mysql เป็น xml ได้แล้ว ในบทความต่อไปผมจะนำตัวอย่างของโค้ด php ที่นำข้อมูล xml ไปแสดงบน google map api v2 ครับ

Read more >>

Google Maps api v2 - การสร้างและปรับแต่ง Marker

วันนี้เราต่อเรื่อง Google Maps API V2 หลังจากที่หายไปนาน ใครลืมไปแล้วเข้าไปดูเรื่องเก่าได้ ที่นี่ โค้ดตัวนี้จะเป็นในเรื่องของการสร้างและปรับแต่ง Marker ด้วยการคลิกบนแผนที่ ผมขอใช้ภาษา php ในการเขียนโค้ด php น่ะครับ โค้ดคำสั่งในการเรียกใช้งานคือ

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

map.addOverlay(new GMarker(point)); คือคำสั่งในการสร้าง Marker sซึ่งเราสามารถปรับแต่ ง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ตามรูปแบบที่เราได้ปรับแต่งตามต้องการ

ส่วนอันนี้เป็นตัวอย่างการใช้งานทั้งหมดน่ะครับ

<!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" xmlns:v="urn:schemas-microsoft-com:vml">

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>newsirius13</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog"

            type="text/javascript"></script>

    <script type="text/javascript">

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

   function initialize() {

      if (GBrowserIsCompatible()) {

        var map = new GMap2(document.getElementById("map_canvas"));

        map.setCenter(new GLatLng(13.8196,100.0601), 7);

GEvent.addListener(map, "click", function(marker, point) {

map.addOverlay(new GMarker(point, icongreen));});

        map.addControl(new GLargeMapControl());

        map.addControl(new GMapTypeControl());

      }

    }

    </script>

  </head>

  <body onload="initialize()" onunload="GUnload()">

    <div id="map_canvas" style="width: 800px; height: 500px"></div>

  </body>

</html>

ให้กดคลิกบนแผนที่จะทำการสร้างMarker ขึ้นมา

Read more >>