กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map
17 September 2010เนื้อหานี้เป็นส่วนต่อเนื่องจาก
สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์
http://www.ninenik.com/สร้าง_ตัว_marker_ระบุตำแหน่ง_ใน_google_map_จำนวนมาก_จาก_xml_ไฟล์-336.html
โดยในบทความข้างต้นก่อนหน้า จะเป็นเพียง วิธีการสร้างตัว marker จำนวนมากจาก xml ไฟล์ โดยไม่ได้กำหนด infowindow ให้กับ ตัว marker แต่ละตัว ทั้งนี้เพื่อให้เข้าใจแนวทางในการใช้งาน
google map api อย่างเป็นลำดับๆ ไป ซึ่งจะเหมาะกับคนที่เริ่มต้นศึกษา
การสร้างตัว marker ในกรณีนี้ จำเป็นต้องกำหนด แต่ละตัวเป็น array เพื่อใช้อ้างอิงในการแสดง infowindow ของตัว marker นั้นๆ
โดยในตัวอย่างโค้ดเป็นการ ดึง title ของตัว marker มาแสดงใน infowindow เมื่อคลิก ซึ่งเป็นแนวทางเบื้องต้น เราสามารถประยุกต์ ให้ดึงข้อมูลจากฐานข้อมูลมาแสดง สำหรับตัว marker แต่ละตัวด้วย การใช้งาน ajax ใน jQuery ดังนี้
// กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
infowindow[i] = new GGM.InfoWindow({
content:$.ajax({
url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
data:'placeID='+markerID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
async:false
}).responseText
});
อ่านเพิ่มเติมเกี่ยวกับ
การแสดง ข้อมูลใน infowindows ของ google map ด้วย ajax ใน jQuery
http://www.ninenik.com/การแสดง_ข้อมูลใน_infowindows_ของ_google_map_ด้วย_ajax_ใน_jQuery-328.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 infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
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: 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
$.ajax({
url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
dataType: "xml",
success:function(xml){
$(xml).find('marker').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker
var markerID=$(this).find("id").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
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);
my_Marker[i] = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
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='+markerID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
// async:false
// }).responseText
// });
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 ที่เปิดไว้อ้างอิงใช้งาน
});
});
}
});
}
$(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 Nov 08 เก็บ HTML ไว้ในตัวแปร PHP อย่างง่ายด้วยฟังก์ชัน ob_start() อ่าน 3386 26 Mar 09 ฟังก์ชัน php แบ่งหน้าแต่งด้วย css อ่าน 6826 13 Oct 10 สร้างเส้นทาง จากการ คลิกกำหนด waypoints จุดผ่านเส้นทาง ใน google map อ่าน 2554 08 Dec 09 แปลง jQuery object เป็น DOM object อ่าน 2679 24 Feb 10 เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย อ่าน 5312 07 Oct 10 การใช้ php sdk เรียกใช้งาน graph api ใน facebook แบบระบุส่วนของข้อมูล อ่าน 2926 20 Aug 10 การสร้าง popup ที่แตกต่าง ด้วยวิธี showModalDialog อ่าน 6032 03 Nov 08 การส่งข้อมูลแบบ POST ด้วย Ajax อ่าน 9714 17 Jan 11 เทคนิค วิธี การแสดงข้อมูล ด้วยเงื่อนไข วันที่ date ใน mysql อ่าน 5377 10 Dec 09 ประยุกต์ เทคนิค jQuery เลื่อน scrollbar ขึ้นลง ตามเมาส์ สำหรับ div และ textarea อ่าน 4685 30 Oct 10 การเลื่อน jQuery UI tab อัตโนมัติ ตามเวลาที่กำหนด อ่าน 11027 21 Oct 08 php กับการแสดงวันที่เป็นภาษาไทย อ่าน 11586 20 Aug 09 jQuery ป้องกัน การคลิกขวา ในหน้าเว็บไซต์ อ่าน 3045 09 Nov 11 แนวทางการสร้างเมนูหลายภาษา อย่างง่ายด้วย php และ javascript อ่าน 2517 22 Mar 11 การกำหนด แท็ก html ในตัวแปร JavaScript อย่างง่าย อ่าน 2278 18 Oct 08 รู้จักการใช้งานฟังก์ขัน after() ใน jquery อ่าน 3046 06 Sep 10 ประยุกต์ การ invite friends ใน facebook มาใช้งาน อ่าน 3996 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบลำดับขั้น ตอนที่ 1 อ่าน 4087 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4911 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 5349