PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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 IP: 61.90.58.xxx วันที่: 03-09-2014 เวลา: 12:30:03

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 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: "http://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 IP: 134.196.96.xxx วันที่: 08-10-2016 เวลา: 15:22:42
 ความคิดเห็นที่ 6
การใช้กับ json ไฟล์ ดูเนื้อหานี้เป็นแนวทาง

google map แสดงจำนวน marker ตามเงื่อนไข การ  zoom 
http://www.ninenik.com/content.php?arti_id=589 via @ninenik


โดย:  Ninenik IP: 1.47.9.xxx วันที่: 08-10-2016
 ความคิดเห็นที่ 5
คืออยากทราบว่า ถ้าเป็นกรณี เป็นไฟล์ json แทน ละต้องการลูปข้อมูลมาใส่หมุด ต้องทำยังไงอ่าค่ะ 

โดย:  Taipowera IP: 134.196.96.xxx วันที่: 08-10-2016 เวลา: 01:57:47
 ความคิดเห็นที่ 4
ผมกำลังทำโปรเจ็ค คล้ายๆกับกระทู้นี้อยู่อ่ะคับ
ผมรันโค๊ดแล้วไม่ขึ้นอะไรเรยคับ
จะอนุเคราะห์ป่ะคับ ถ้าอยากจะขอโค๊ดทั้งหมดอ่ะคับ



โดย:  Minity IP: 110.78.168.xxx วันที่: 06-11-2014 เวลา: 11:06:34
 ความคิดเห็นที่ 3
ได้แล้วครับ ขอบคุณมากๆครับ พี่ Ninenik

โดย:  Decode IP: 61.90.58.xxx วันที่: 03-09-2014 เวลา: 13:34:44
 ความคิดเห็นที่ 2

edit**

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

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



โดย:  Decode IP: 61.90.58.xxx วันที่: 03-09-2014 เวลา: 13:29:14
 ความคิดเห็นที่ 1
ล้าง marker ตัวเดิมก่อน ลองใส่โค้ด นี้ ไว้บรรทัดก่อน
 
 var xml = ....
 
ใน setInterval

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


โดย:  Ninenik IP: 124.121.248.xxx วันที่: 03-09-2014