หน้าหลัก โค้ด-บทความ php โค้ด-บทความ javascript โค้ด-บทความ css สารบัญ สารบัญ

ทักทายครับ

สวัสดีครับ หลังจากที่ blog นี้หยุดการอัพเดททบความเกี่ยวกับโค้ดในการใช้ทำเวปไปนานไม่ว่าจะเป็น code php, html, javascript, css, ajax เนื่องจากผมไม่ค่อยมีเวลาจนลืม blog นี้ไปเลย นึกขึ้นได้ตอนปีใหม่ ไปค้นหาใน google แล้วตกใจ เนื่องจาก blog นี้ไปอยู่ลำดับที่ 1 ของการค้นหา ไม่เชื่อลองดู เลยขอถือโอกาสเริ่มต้นใหม่ในช่วงปีใหม่นี้เริ่มอัพเดทบทความตั้งแต่ตอนนี้เป็นต้นไป หวังเป็นอย่างยิ่งว่าจะมีผู้ติดตามบทความของผมต่อไปน่ะครับ ปล.ท่านใดสนใจลงโฆษณาสามารถติดต่อได้ที่ hotcodephp@gmail.com

20 ก.ค. 2555

การทำ form ให้เลือกที่ radio buttom ก่อนถึงจะใส่ข้อมูลใน text field ได้

ใครเคยเขียนโค้ด php ทำ form ที่ให้ผู้ใช้งานบันทึกข้อมูลแล้วมีให้เลือกตรง radio buttom ไหมครับ แล้วเคยเจอปัญหาไหมว่าบางครั้งเราทำทั้ง radio buttom และ text field ในตัวเลือกเดียวกัน แต่ผู้ใช้งานบางคนเลือกแค่ radio buttom แต่ไม่ใส่ข้อมูลใน text field บางคนใส่ข้อมูลใน text field แต่ไม่เลือก radio buttom แล้วเราจะมีวิธีเขียน code ป้องกันยังไง ลองอ่านบทความนี้ดูครับ ก่อนอื่นดูรูปด้านล่างครับเพื่อจะได้ไม่งงกัน

คราวนี้มาดูโค้ดตัวอย่างกันครับ

<body>
<form id="form" name="form" method="post" action="add1.php" >
  <table width="100%" border="2" cellpadding="10" cellspacing="0" bordercolor="#000099">
    <tr>
      <td><strong>การดำเนินการ</strong><br />
        <input name="case1" type="radio" id="rdo2" onclick="document.form.case11.disabled=true;" value="กรณีที่ 1" />
        กรณีที่ 1
        <br />
        <input name="case1" type="radio" id="rdo3" onclick="document.form.case11.disabled=true;" value="กรณีที่ 2" />
        กรณีที่ 2<br />
        <input name="case1" type="radio" id="rdo4" onclick="document.form.case11.disabled=true;" value="กรณีที่ 3" />
        กรณีที่ 3<br />
        <input name="case1" type="radio" id="rdo5" onclick="document.form.case11.disabled=false;" value="อื่นๆ" />
        อื่น ๆ โปรดระบุ 
      <input  type="text" id="case11" size="60"  name="case11" disabled /></td>
    </tr>
  </table>
  <br />
  <p align="center">
    <input type="submit" name="Submit" value="บันทึก" />
    &nbsp;
    <input type="reset" name="Submit2" value="ยกเลิก" />
  </p>
</form>
</body>

จากโค้ดตัวคำสั่งหลักที่สำคัญก็คือตัวหนังสือสีแดงที่ใช้ onclick เข้ามาช่วย หลักการง่าย ๆ คือถ้าเราเลือกที่ช่อง กรณี 1 - กรณี 3 ช่อง อื่น ๆ โปรดระบุ ก็จะเป็น disabled แต่ถ้าเลือกที่ช่อง อื่นๆ ช่อง อื่น ๆ โปรดระบุ ก็จะเป็น abled ลองนำไปประยุกต์ใช้ดูน่ะครับ หวังว่าโค้ดตัวนี้คงเป็นประโยชน์กับทุกคน



Read more >>

19 ก.ค. 2555

การทำ jump menu เพื่อเปิดหน้าต่างใหม่


บทความ php นี้ขอพูดถึง jump menu ซึ่งเชื่อว่าหลายคนเคยใช้มากันบ้านแล้ว แต่เคยสงสัยหรือมีปัญหากันบ้างไหมว่าทำไมพอเวลาเลือกรายการใน jump menu เพื่อเปิดหน้าต่างใหม่นั้น มันจะเปิดแบบ target เป็นแบบ _blank ซึ่งบางครั้งมันจะไม่ค่อยสะดวกต่อการใช้งาน มันจะเปิดแบบ target เป็นแบบ _self ได้ไหม ก็ต้องได้สิครับเรามาดูโค้ดปกติก่อนนะครับ ผมขอเป็นแบบโค้ด php น่ะ


<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>

<body>
<form name="form1" id="form1">
  <select name="menu1" onchange="MM_jumpMenu('parent',this,0)">
   <option selected="selected">ระบุ</option>
        <option value="http://www.google.com">google</option>
  </select>
</form>
</body>

จาก code ด้านบนที่เป็นตัวสีแดงจะเป็นการทำงานในส่วนของการเปิดหน้าต่างใหม่ เราก็แก้ไขเป็นโค้ดด้านล่างนี้แทน
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
คราวนี้เราก็จะได้ jump menu ที่เปิดหน้าต่างใหม่เป็นแบบ _self แล้วครับ

Read more >>

27 มิ.ย. 2555

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

26 มิ.ย. 2555

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

22 มิ.ย. 2555

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

7 มิ.ย. 2555

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

5 มิ.ย. 2555

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