จากเนื้อหาในตอนที่ 4 เมื่อเราสามารถแสดง icons ระบุตำแหน่ง
ของเพื่อน ใน google map ได้แล้ว ต่อไปมาดูว่า ต้องการให้คลิก แต่ละ icons
แล้วแสดงข้อมูลของแต่ละคน ที่เราเก็บค่ามาแล้ว เช่น ชื่อ วันที่เวลา พิกัด
โดยแสดงเป็นแบบ infowindow จะทำได้อย่างไร
แต่เนื่องจากเนื้อหาในตอนที่ 4
แสดงพิกัด จาก xml ไฟล์ ใน google map ตอนที่ 4
https://www.ninenik.com/content.php?arti_id=482 via @ninenik
เราต้องการเพียงแสดง ข้อมูล icons พิกัด ตำแหน่งเพื่อนในแผนที่เท่านั้น
จึงไม่ได้กำหนด ตัวแปรระบุ icons ของแต่ละตัว เป็น array จึงให้ไม่สามารถ
จัดการ icons แต่ละรายการได้
ดังนั้นในตอนที่ 5 จะมีการประยุกต์ จากเนื้อหาในตอนที่ 4
โดยจะมีการประกาศตัวแปร แต่ละตัวเป็นแบบ array เป็นประมาณนี้
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่ var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array var markerID=[]; // ประกาศเป็น arrray สำหรับเก็บค่า id var markerName=[]; // ประกาศเป็น arrray สำหรับเก็บค่า name var markerLat=[]; // ประกาศเป็น arrray สำหรับเก็บ latitude var markerLng=[]; // ประกาศเป็น arrray สำหรับเก็บ longitude var markerDate=[]; // ประกาศเป็น arrray สำหรับเก็บ datetime var narkerIcons=[]; // ประกาศเป็น arrray สำหรับเก็บ icon var markerLatLng=[]; // ประกาศเป็น arrray สำหรับเก็บ พิกัดในรูปแบบของ google map var contentData=[]; // ประกาศเป็น arrray สำหรับเก็บ เนื้อหาของแต่ละ icon var image1=[]; // ประกาศเป็น arrray สำหรับเก็บ icons ในรูปแบบของ google map
และตัวแปรที่มีการกำหนดเป็น array แล้ว จะไม่มีการกำหนด var นำหน้าอีก
โดยจะใช้รูปแบบ เช่น my_Marker[i] เพื่อระบุ แต่ละรายการ เป็นต้น
การปรับจากเนื้อหา ตอนที่ 4 จะเป็นการเปลี่ยนแค่ตัวแปร
และมีการเพิ่มโค้ด
- สร้างเนื้อหา infowindow ของแต่ละ icon
- การคลิก แต่ละรายการ icons และแสดง
ตัวอย่าง ทดสอบโดยการ คลิกที่ icon แต่ละตัว
ไฟล์ แผนที่ ตัวอย่างกำหนดชื่อเป็น my_friend_location.php
คำอธิบายแสดงในโค้ด
<!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 - Friend 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:650px;
height:500px;
margin:auto;
margin-top:50px;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script src="http://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 infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
var markerID=[]; // ประกาศเป็น arrray สำหรับเก็บค่า id
var markerName=[]; // ประกาศเป็น arrray สำหรับเก็บค่า name
var markerLat=[]; // ประกาศเป็น arrray สำหรับเก็บ latitude
var markerLng=[]; // ประกาศเป็น arrray สำหรับเก็บ longitude
var markerDate=[]; // ประกาศเป็น arrray สำหรับเก็บ datetime
var narkerIcons=[]; // ประกาศเป็น arrray สำหรับเก็บ icon
var markerLatLng=[]; // ประกาศเป็น arrray สำหรับเก็บ พิกัดในรูปแบบของ google map
var contentData=[]; // ประกาศเป็น arrray สำหรับเก็บ เนื้อหาของแต่ละ icon
var image1=[]; // ประกาศเป็น arrray สำหรับเก็บ icons ในรูปแบบของ google map
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: 12, // กำหนดขนาดการ 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
// เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude ปัจจุบัน
var myPosition_lon=position.coords.longitude; // เก็บค่าตำแหน่ง longitude ปัจจุบัน
// สรัาง LatLng ตำแหน่ง สำหรับ google map
var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude);
map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน
map.setCenter(pos); // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน
$.post("save_location.php",{ // ส่งค่าตำแหน่งปัจจุบัน บันทึกลงฐานข้อมูล
myPosition_lat:myPosition_lat, // ส่งค่า latitude
myPosition_lon:myPosition_lon // ส่งค่า longitude
},function(){
map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน
map.setCenter(pos); // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน
});
},function() {
// คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน
});
}else{
// คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง
}
// ใช้ ajax ดึงค่าจาก xml มาใช้งาน
$.ajax({
url:"friend_list.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
dataType: "xml",
success:function(xml){
$(xml).find("marker").each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker
markerID[i]=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
markerName[i]=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
markerLat[i]=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
markerLng[i]=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
markerDate[i]=$(this).find("lastdate").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
narkerIcons[i]=$(this).find("icon").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
markerLatLng[i]=new GGM.LatLng(markerLat[i],markerLng[i]);
image1[i] = new GGM.MarkerImage(narkerIcons[i], // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้
new GGM.Size(50, 60), //กำหนดความกว้าง สูงของ icons
new GGM.Point(0,0), // จุดเริ่มต้นของรูปภาพ ใช้ 0,0
new GGM.Point(25, 60) // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)
);
my_Marker[i] = new GGM.Marker({ // สร้างตัว marker
position:markerLatLng[i], // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
icon: image1[i], // เปลี่ยนเป็น icon ตามรูปภาพที่ดึงจาก xml
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
title:markerName[i] // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// จัดรูปแบบ เนื้อหาใน infowndow
contentData[i]=markerName[i]+"<br/>"+markerDate[i]+"<br/>"+markerLat[i]+","+markerLng[i];
infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
content: contentData[i] // แสดงเนื้อหา ของแต่ละ icons
});
GGM.event.addListener(my_Marker[i], "click", function(){ // เมื่อคลิกตัว marker แต่ละตัว
if(infowindowTmp!=null){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
infowindow[infowindowTmp].close(); // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
}
infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก
infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
});
// 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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
}).appendTo("body");
});
</script>
</body>
</html>
เนื้อหาที่เกี่ยวข้อง