Google Map real time (Marker จุดเดิมไม่หายหลังจาก update จุดใหม่แล้ว)

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา Google Map real time (Marker จุดเดิมไม่หายหลังจาก update จุดใหม่แล้ว)

Google Map real time (Marker จุดเดิมไม่หายหลังจาก update จุดใหม่แล้ว)
สวัสดีครับพี่ Ninenik พอดีผมมีปัญหาเกี่ยวกับ Marker บน google Map จุดเดิมมันไม่หายครับ แต่จุดใหม่ก็ขึ้นมานะครับ
- ผมเอาโค๊ดตัวอย่างของบทที่ 1 - 5

   - แสดง infowindow เนื้อหา เมื่อคลิก icons ใน google map ตอนที่ 5
      
   - แล้วใช้  runtime เข้ามาครอบ ajax ที่ดึงค่าจาก xml (ให้มัน refresh update ค่าใหม่ทุกๆ 3 วิ)

     $(function(){  
        setInterval(function(){
        },3000);      
     }); 
   - ภาพตอน run ครั้งแรก
     
   - ภาพหลัง update จาก Database แล้ว มัน refresh 3 วิ ตามคำสั่ง
    
   - code ทั้งหน้า
     
<!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" />
<!-- <meta http-equiv="refresh" content="500">  -->
<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="js/jquery-2.1.1.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
var image2='icon/customer.png';

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);  // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน									
				});
				var	my_Marker = new GGM.Marker({ // สร้างตัว marker    
                        position:pos,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง    
                        icon: image2,
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map    
                        title:'จุดเกิดเหตุ' // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ    
                    });
				mapCircle = new GGM.Circle({ // สร้างตัว circle  
				      strokeColor: "#CC0000", // สีของเส้นสัมผัส หรือสีขอบโดยรอบ  
				      strokeOpacity: 0.8, // ความโปร่งใส ของสีขอบโดยรอบ กำหนดจาก 0.0  -  0.1  
				      strokeWeight: 1, // ความหนาของสีขอบโดยรอบ เป็นหน่วย pixel  
				      fillColor: "#FF0000", // สีของวงกลม circle  
				      fillOpacity: 0.35, // ความโปร่งใส กำหนดจาก 0.0  -  0.1  
				      map: map, // กำหนดว่า circle นี้ใช้กับแผนที่ชื่อ instance ว่า map  
				      center: pos, // ตำแหน่งศูนย์กลางของวลกลม ในที่นี้ใช้ตำแหน่งเดียวกับ ศูนย์กลางแผนที่  
				      radius: 750 // รัศมีวงกลม circle ทีสร้าง หน่ายเป็น เมตร  
				    }); 
            },function() {  
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน  
            });  
    }else{  
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง  
    }  	


$(function(){  //โค๊ดที่เพิ่มลงไปใหม่ refresh ทุกๆ 3s 
setInterval(function(){ 

    // ใช้ ajax ดึงค่าจาก xml มาใช้งาน
    var xml = $.ajax({  
        url:"friend_list.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml  
        dataType: "xml", 
        async:false,   
        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());  
            	});  
       		 }     
    	}).responseText;   


 },3000);      
});    

}

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


Decode 61.90.58.xxx 03-09-2014 12:30:03

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ล้าง marker ตัวเดิมก่อน ลองใส่โค้ด นี้ ไว้บรรทัดก่อน
 
 var xml = ....
 
ใน setInterval

    for(i=0;i<my_Marker.length;i++){ // วนหลูปเพื่อยกเลือก ตัว marker ทั้งหมด หรือล้างค่า ก่อนกำหนดใหม่  
        my_Marker[i].setMap(null);// คำสั่งในการยกเลิกตัว marker  
    }  


ninenik 124.121.248.xxx 03-09-2014
 ความคิดเห็นที่ 2

edit**

- ภาพหลัง update พิกัด lati,logti จาก Database แล้ว มัน refresh 3 วิ ตามคำสั่ง (จุด Mark สีน้ำเงินจุดเดียวนะครับ)
    - ผมทำการ update จุด Mark สีน้ำเงินจาก database พอมัน refresh มันเกิดการย้ายจุด Mark ไปตามพิกัดที่ update
      แต่จุด Mark จุดเดิมยังอยู่

*คำถาม คือผมจะทำยังไงครับให้จุดเดิมมันหายในขณะที่จุดใหม่มันย้าย
    



decode 61.90.58.xxx 03-09-2014 13:29
 ความคิดเห็นที่ 3
ได้แล้วครับ ขอบคุณมากๆครับ พี่ Ninenik


decode 61.90.58.xxx 03-09-2014 13:34
 ความคิดเห็นที่ 4
ผมกำลังทำโปรเจ็ค คล้ายๆกับกระทู้นี้อยู่อ่ะคับ
ผมรันโค๊ดแล้วไม่ขึ้นอะไรเรยคับ
จะอนุเคราะห์ป่ะคับ ถ้าอยากจะขอโค๊ดทั้งหมดอ่ะคับ



minity 110.78.168.xxx 06-11-2014 11:06
 ความคิดเห็นที่ 5
คืออยากทราบว่า ถ้าเป็นกรณี เป็นไฟล์ json แทน ละต้องการลูปข้อมูลมาใส่หมุด ต้องทำยังไงอ่าค่ะ 


taipowera 134.196.96.xxx 08-10-2016 01:57
 ความคิดเห็นที่ 6
การใช้กับ json ไฟล์ ดูเนื้อหานี้เป็นแนวทาง

google map แสดงจำนวน marker ตามเงื่อนไข การ  zoom 


ninenik 1.47.9.xxx 08-10-2016
 ความคิดเห็นที่ 7
คือตอนนี้มาประยุกต์ใช้แล้ว แต่ว่าเวลากด infowindown มันไม่ยอมปิดอ่าค่ะ คือกดกี่ตัวก็โชว์ทับกันหมดเลย 
<?php
session_start();
include("connect.php");
if (!isset($_SESSION['admin_user'])){
	echo "Login Please...";
	echo "<meta http-equiv='refresh' content='0;URL=login.php'>";
	exit;
}
?>
<!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>Map Online</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;  
}  
</style>  
</head>
<body onload="initialize()">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/jquery-3.1.1.js"></script>
  
<?php include "header.php" ;?>
<div class="col-sm-9 col-md-9">
	<div class="panel panel-grey">
		<div class="panel-heading grey" style="text-align: left;">
			<h3><font color="#FFFFFF">แสดงตำแหน่งผู้ใช้งานออนไลน์</font></h3>
		</div><!--panel-heading grey -->
		<div class="panel-body-grey" >
			<div class="bgwhite panel-body">

<div id="map_canvas" style="height:460px;width:960px;border-color:#000;border-top-style:ridge;border-right-style:ridge;border-left-style:ridge;border-bottom-style:ridge;border-top-width:thin;border-bottom-width:thin;border-left-width:thin;border-right-width:thin;"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script src="bootstrap/jquery-3.1.1.js"></script>
<script src="bootstrap/JSXTransformer.js"></script>
<script type="text/javascript">  
	var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้  
	var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น  
	var obj_marker;  // สำหรับเก็บค่าพิกัดและข้อมูลจากฐานข้อมูล
	var limit_show=999; // กำหนดแสดงรายการไม่เกิน
	var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่    
	var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด    
	var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array    
	var tourist_icon='pic/touristpoint.gif'; 
	var admin_icon='pic/adminpoint.gif';  
	var guide_icon='pic/guidepoint.gif';  
function initialize() { // ฟังก์ชันแสดงแผนที่  
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
    // กำหนดจุดเริ่มต้นของแผนที่  
    var my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);  
    var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง  
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
    var my_DivObj=$("#map_canvas")[0];   
    // กำหนด Option ของแผนที่  

	
    var myOptions = {  
        zoom: 8, // กำหนดขนาดการ zoom  
        center: my_Latlng , // กำหนดจุดกึ่งกลาง  
        mapTypeId:my_mapTypeId, // กำหนดรูปแบบแผนที่  
		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 pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude);  
				
				var my_Marker = new GGM.Marker({ // สร้างตัว marker  
						icon: admin_icon,    
                        position:pos,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง      
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map      
                        title:'คุณอยู่ที่นี่' // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ      
                    });  
					
					
					 mapCircle = new GGM.Circle({ // สร้างตัว circle    
                      strokeColor: "#CC0000", // สีของเส้นสัมผัส หรือสีขอบโดยรอบ    
                      strokeOpacity: 0.8, // ความโปร่งใส ของสีขอบโดยรอบ กำหนดจาก 0.0  -  0.1    
                      strokeWeight: 1, // ความหนาของสีขอบโดยรอบ เป็นหน่วย pixel    
                      fillColor: "#FF0000", // สีของวงกลม circle    
                      fillOpacity: 0.35, // ความโปร่งใส กำหนดจาก 0.0  -  0.1    
                      map: map, // กำหนดว่า circle นี้ใช้กับแผนที่ชื่อ instance ว่า map    
                      center: pos, // ตำแหน่งศูนย์กลางของวลกลม ในที่นี้ใช้ตำแหน่งเดียวกับ ศูนย์กลางแผนที่    
                      radius: 100 // รัศมีวงกลม circle ทีสร้าง หน่ายเป็น เมตร    
                    });   
					
				var infowindow = new GGM.InfoWindow({  
                    content: 'คุณอยู่นี่'
                }); 
				 
                var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย  
                map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker                     
                map.setCenter(pos);  
				
				 GGM.event.addListener(my_Marker,"click", function(){ // เมื่อคลิกตัว marker แต่ละตัว    
                        infowindow.open(map,my_Marker); // แสดง infowindow ของตัว marker ที่คลิก    
                        infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน    
                    });             
				
				
            },function() {  
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน  
            });  
    }else{  
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง  
    }  
	
	
	$(function(){  //โค๊ดที่เพิ่มลงไปใหม่ refresh ทุกๆ 3s   
setInterval(function(){   
  
    // ดึงข้อมูลจากฐานข้อมูลที่สร้างมาในรูปแบบไฟล์ 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
					if(obj_marker[i].user_id=='u1'){
                    var markerLatLng=new GGM.LatLng(obj_marker[i].lat,obj_marker[i].lng);  
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
	          			icon : admin_icon,
                        title: "ชื่อผู้ใช้งาน : "+ obj_marker[i].username+"<br>"+"ชื่อ-สกุล : "+obj_marker[i].fullname+"<br>"+"กลุ่ม : "+obj_marker[i].team // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });     
                     
                     // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
                     infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array  
                        content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow  
                    });             
                     

                     // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker
     
					}else if (obj_marker[i].user_id=='u2'){
                    var markerLatLng=new GGM.LatLng(obj_marker[i].lat,obj_marker[i].lng);  
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
	          			icon : guide_icon,
                        title:"ชื่อผู้ใช้งาน : "+ obj_marker[i].username+"<br>"+"ชื่อ-สกุล : "+obj_marker[i].fullname+"<br>"+"กลุ่ม : "+obj_marker[i].team // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });     
                     
                     // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
                     infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array  
                        content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow  
                    });             
                     

                     // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ marker


					}else {
                    var markerLatLng=new GGM.LatLng(obj_marker[i].lat,obj_marker[i].lng);  
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
	         			icon : tourist_icon,
                        title: "ชื่อผู้ใช้งาน : "+ obj_marker[i].username+"<br>"+"ชื่อ-สกุล : "+obj_marker[i].fullname+"<br>"+"กลุ่ม : "+obj_marker[i].team // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });     
                     
                     // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
                     infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array  
                        content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow  
                    });             
                     

                     // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ 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++;
                 }
               
         });              
    });  
               
 
	
  
 },3000);        
});      
	
  
  
  

}  


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


</div><!--bgwhite panel-body -->
</div> <!--panel-body-grey -->

		</div><!--panel panel-grey -->
	</div><!--col-sm-9 col-md-9 -->

  </body>
</html>


taipowera 134.196.96.xxx 08-10-2016 15:22
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ