เนื้อหาในโค้ดนี้ มาจากคำถามของสมาชิก เอามาเพิ่มไว้ในบทความ
เพื่อให้ง่ายต่อการค้นหา และรวบรวมไว้
สิ่งที่ได้รู้เพิ่มเติม คือ การสร้างไฟล์ json จากฐานข้อมูลเพื่อดึง
ตำแหน่ง latitude และ longitude และข้อมูลอื่นมาเก็บไว้ในตัวแปร
object แล้ว แสดงเป้น marker ในแผนที่
โดยในเนื้อหาจะใช้ข้อมูลจากตารางตำแหน่งแผนที่ระบุ พิกัด จังหวัดในประเทศทไทย
การนำไปใช้งาน สามารถประยุกต์ได้ตามความเหมาะสม
ตัวอย่าง
ลอกสังเกตที่ภาคใต้ จะมีปักหมุดเริ่มต้น แค่ที่เดียว พอเรา zoom เข้าไป ก็จะแสดงรายการปักหมุดเพิ่มเข้ามา
ไฟล์ get_marker.php สำหรับดึงข้อูลและพิกัด จากฐานข้อมูล มาเป็นรูปแบบไฟล์ json
<?php
header("Content-type:application/json; 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","") or die("Cannot connect the Server");
mysql_select_db("test") or die("Cannot select database");
mysql_query("set character set utf8");
?>
<?php
$q="SELECT * FROM province_th WHERE 1 ORDER BY province_id";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
$json_data[]=array(
"province_id"=>$rs['province_id'],
"province_name"=>$rs['province_name'],
"latitude"=>$rs['province_lat'],
"longitude"=>$rs['province_lon'],
"zoom"=>$rs['province_zoom']
);
}
$json= json_encode($json_data);
echo $json;
?>
ไฟล์ทดสอบ google_map_zoom.php คำอธิบายแสดงในโค้ด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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>
<br>
<div style="margin:auto:width:80%;">
<div id="map_canvas"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Marker=[]; // สำหรับปักหมุด
var obj_marker; // สำหรับเก็บค่าพิกัดและข้อมูลจากฐานข้อมูล
var limit_show=10; // กำหนดแสดงรายการไม่เกิน
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
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: 5, // กำหนดขนาดการ 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
// ดึงข้อมูลจากฐานข้อมูลที่สร้างมาในรูปแบบไฟล์ json
$.getJSON( "get_marker.php", function( data ) {
obj_marker=data; // เก็บค่าไว้ในตัวแปร ไว้ใช้งาน
var m=0;
$.each(obj_marker,function(i,k){ // วนลูปแสดงการปักหมุด
if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show
var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);
my_Marker[i] = new GGM.Marker({ // สร้างตัว marker
position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow
});
// กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
// infowindow[i] = new GGM.InfoWindow({
// content:$.ajax({
// url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
// data:'placeID='+obj_marker[i].province_id, // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
// async:false
// }).responseText
// });
// ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker
GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว
if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
infowindow[infowindowTmp].close(); // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
}
infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก
infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
});
m++;
}
});
});
// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
GGM.event.addListener(map, 'zoom_changed', function() {
// วนลูปล้างค่าเก่า ก่อนสร้างปักหมุดใหม่
if(my_Marker.length>0){
for(i=0;i<my_Marker.length;i++){
my_Marker[i].setMap(null);
}
}
var m=0;
var map_zoom=map.getZoom();
// zoom เท่าไหร่ แสดงเท่าไหร่ เงื่อนไขกำหนดตามต้องการ
if(map_zoom<=6){
limit_show=10;
}else if(map_zoom<=7){
limit_show=30;
}else if(map_zoom<=8){
limit_show=40;
}else if(map_zoom<=20){
limit_show=100;
}else{
limit_show=10;
}
$.each(obj_marker,function(i,k){ // วนลูปแสดงการปักหมุด
if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show
var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);
my_Marker[i] = new GGM.Marker({ // สร้างตัว marker
position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow
});
// กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
// infowindow[i] = new GGM.InfoWindow({
// content:$.ajax({
// url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
// data:'placeID='+obj_marker[i].province_id, // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
// async:false
// }).responseText
// });
// ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker
GGM.event.addListener(my_Marker[i],"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว
if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
infowindow[infowindowTmp].close(); // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
}
infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก
infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
});
m++;
}
});
});
}
$(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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
}).appendTo("body");
});
</script>
</body>
</html>
สำหรับกรณีการดึงข้อมูลจากฐานข้อมูล
ให้ไปเปิดใช้ ส่วนของการใช้งานดึงข้อมูล infowindow จากฐานข้อมูลแทน
จากนั้นสร้างไฟล์ php สำหรับจัดรูปแบบ รับค่า และดึงข้อมูลจากฐานข้อมูล
เพื่อสร้างเนื้อหารายละเอียดที่จะแสดงใน infowindow
ไฟล์ placeDetail.php เปลี่ยนค่าตามต้องการ
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// เชื่อมต่อกับฐานข้อมูล
$link=mysql_connect("localhost","root",""); // เชื่อมต่อ Server
mysql_select_db("test"); // ติดต่อฐานข้อมูล
mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล
// ดึงข้อมูลจากฐานข้อมูล ตามค่า id ของสถานที่ ที่ส่งมา
$q="SELECT * FROM province_th WHERE province_id='".$_GET['placeID']."' ";
$qr=@mysql_query($q);
$rs=@mysql_fetch_assoc($qr);
?>
<!--จัดรูปแบบ ที่ต้องการแสดงตามต้องการ -->
<table width="300" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="10" rowspan="4">
<img src="http://www.example.com/images/<?=$rs['province_picture']?>"
width="130" height="80">
</td>
<td width="10"> </td>
<td width="264">ชื่อสถานที่ <?=$rs['province_name']?></td>
</tr>
<tr>
<td> </td>
<td>Latitude: <?=$rs['province_name']?></td>
</tr>
<tr>
<td> </td>
<td>Longitude: <?=$rs['province_name']?></td>
</tr>
<tr>
<td> </td>
<td><a href="http://www.example.com/placeID=<?=$rs['province_id']?>"
target="_blank">ลิ้งค์อ่านเพิ่ม</a></td>
</tr>
</table>
เนื้อหาที่เกี่ยวข้อง