สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์
15 September 2010ตัวอย่างโค้ดต่อไปนี้ เป็นการสร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมากๆ ด้วยข้อมูล จาก xml ไฟล์ โดยใน xml ไฟล์ จะมีการเก็บข้อมูลที่จำเป็นสำหรับการนำมาใช้ เช่น
ชื่อสถานที่ ตำแหน่ง latitude และ longitude ของสถานที่ สามารถศึกษาการสร้าง xml จากฐานข้อมูลได้ที่
http://www.ninenik.com/การดึงข้อมูล_จากฐานข้อมูล_สร้าง_xml_ไฟล์_ด้วย_php-335.html
โดยในที่นี้จะใช้งานไฟล์ xml จากการสร้างด้วย php ไฟล์ แทนการเรียกไฟล์ xml โดยตรง
คือใช้ genMarker.php ที่ส่งค่ากลับมาเป็น xml ไฟล์ (ไม่ได้บันทึกเป็น xml ไฟล์ไว้)
แทน genMarker.xml ที่เป็นไฟล์โดยตรง (ไฟล์ที่ได้จากการสร้างด้วย php และบันทึกเป็น xml ไฟล์ไว้ใช้งาน)
โค้ดไฟล์ genMarker.php ดึงข้อมูลจังหวัดและตำแหน่งในแผนที่ google map
<?php
header("Content-type:text/xml; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
mysql_connect("localhost","root","test") or die("Cannot connect the Server");
mysql_select_db("test") or die("Cannot select database");
mysql_query("set character set utf8");
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<markers>
<?php
$q="SELECT * FROM province_latlng WHERE 1 ORDER BY province_id LIMIT 30 ";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?>
<marker id="<?=$rs['province_id']?>">
<name><?=$rs['province_name']?></name>
<latitude><?=$rs['province_lat']?></latitude>
<longitude><?=$rs['province_lon']?></longitude>
</marker>
<?php } ?>
</markers>
เมื่อมีข้อมูลตำแหน่งต่างๆ พร้อมแล้ว จะใช้ jQuery ให้การดึงข้อมูลใน xml ไฟล์มาสร้างตัว marker ในแผนที่ ศึกษาการใช้งาน jQuery กับ xml ได้ที่
http://www.ninenik.com/การดึง_attribute_และค่าต่างๆ_จาก_xml_ไฟล์ด้วย_jQuery_อย่างง่าย-333.html
ตัวอย่างโค้ด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map API 3 - 01</title>
<style type="text/css">
html { height: 100% }
body {
height:100%;
margin:0;padding:0;
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas {
width:450px;
height:500px;
margin:auto;
margin-top:50px;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng = new GGM.LatLng(13.761728449950002,100.6527900695800);
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 7, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่
mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
position:GGM.ControlPosition.TOP, // จัดตำแหน่ง
style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style
}
};
map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
$.ajax({
url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
dataType: "xml",
success:function(xml){
$(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker
var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerLatLng=new GGM.LatLng(markerLat,markerLng);
var my_Marker = new GGM.Marker({ // สร้างตัว marker
position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// console.log($(this).find("id").text());
});
}
});
}
$(function(){
// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
// v=3.2&sensor=false&language=th&callback=initialize
// v เวอร์ชัน่ 3.2
// sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
// language ภาษา th ,en เป็นต้น
// callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize
$("<script/>", {
"type": "text/javascript",
src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
}).appendTo("body");
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
03 Dec 10 ทบทวน การขึ้น บรรทัดใหม่ ใน textarea ด้วย Special Characters in HTML อ่าน 2605 12 Sep 10 จัดรูปแบบ NavigationControlOptions ใน Google Map อ่าน 1857 20 Dec 09 ประยุกต์การทำ overlay เพจ กับกล่องข้อความ ด้วย jQuery อ่าน 5326 24 Feb 11 ยืนยันการเปลี่ยนแปลงข้อมูลใน select option ด้วย javascript อย่างง่าย อ่าน 2530 26 Mar 09 ฟังก์ชัน php แบ่งหน้าแต่งด้วย css อ่าน 6827 13 Oct 08 คำสั่ง SQL AND OR อ่าน 3448 09 Dec 09 การรวมไฟล์ javascript หรือไฟล์ css เป็นไฟล์เดียว ด้วย php อย่างง่าย อ่าน 2134 25 Sep 08 แสดงตัวอักษร เหมือนกับกำลังพิมพ์ คล้าย www.manager.co.th อ่าน 3485 05 Feb 09 เพิ่มลูกเล่นการโหวด Vote หรือ Rating ด้วย jQuery และ CSS อ่าน 4585 28 Sep 10 สร้างคำสั่ง สำหรับปุ่มควบคุม กำหนดเอง ใน google map อ่าน 1852 25 Sep 08 เลือกหรือไม่เลือก checkbox ทั้งหมด อ่าน 4331 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 5945 17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 10494 19 Oct 08 คำสั่ง SQL functions อ่าน 4871 24 Mar 09 Database ข้อมูลจังหวัดและอำเภอในประเทศไทย อ่าน 7507 25 Sep 08 รู้จักฟังก์ชันสำหรับการ random อ่าน 2902 25 Sep 08 การกำหนด Selectors ด้วย jquery แบบ Basic อ่าน 4591 03 Nov 08 เก็บ HTML ไว้ในตัวแปร PHP อย่างง่ายด้วยฟังก์ชัน ob_start() อ่าน 3386 22 Mar 11 การกำหนด แท็ก html ในตัวแปร JavaScript อย่างง่าย อ่าน 2278 23 Dec 09 จัดรูปแบบ การแบ่งคอลัมน์ column ของ ตาราง สำหรับแสดงข้อมูล ด้วย php อ่าน 4572