ดึงข้อมูลจาก DB มาแสดง marker บนGmap หลายๆตัว

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ดึงข้อมูลจาก DB มาแสดง marker บนGmap หลายๆตัว

ดึงข้อมูลจาก DB มาแสดง marker บนGmap หลายๆตัว

<!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>test3</title>

<span class="head" style="height:40px;"><img src="blogo.png" alt=""/></span>

<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;
} 
#map_canvas
	{width:800px;
	height:400px;
	margin:auto;
	margin-top:50px;}
</style>
</head>

<body>
  <div id="map_canvas"></div>


		 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
				  Search Place 
				  <input name="namePlace" type="text" id="namePlace" size="40" />
				  <input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
				  <hr />
				   <form name="form_get_detailMap" method="post" action="test222.php">    
					Latitude  
					<input name="lat_value" type="text" id="lat_value" value="0" />  
					Longitude  
					<input name="lng_value" type="text" id="lng_value" value="0" />  
					<input type="submit" name="button" id="button" value="save" />  
				   </form>  
		 </div> 
<div name="showData" id="showData"></div>

<script type="text/javascript" src="jquery-1.6.3.js"></script>
<script type="text/javascript">
var geocoder; 
var map; 
var my_Marker; 
var my_Marker1;
var icon = '2.png';
var icon1 = '3.png';
var GGM;  
var str1=[];
var id=[];
var latlng;
var lat=[];
var lng=[];

function initialize() {
	GGM=new Object(google.maps);
	geocoder = new GGM.Geocoder(); 
	var my_Latlng  = new GGM.LatLng(13.7578,100.3645);
	var my_mapTypeId=GGM.MapTypeId.ROADMAP;
	var my_DivObj=$("#map_canvas")[0];

		var myOptions = {
		zoom: 13,
		center: my_Latlng ,
		mapTypeId:my_mapTypeId };

	map = new GGM.Map(my_DivObj,myOptions);
	
	my_Marker = new GGM.Marker({
		position: my_Latlng,  
		map: map,
		draggable:true,
		title:"marker",
		icon : icon
								});


	
	
	maker=function(){
		for(i1=0;i1<lat.length;i  ){
		my_Marker1 = new GGM.Marker({ 
		position : new GGM.LatLng(lat[i1],lng[i1]),
		map : map,
		icon : icon1
									});
								   }
				   }

	
	GGM.event.addListener(my_Marker, 'dragend', function(){
		var my_Point = my_Marker.getPosition();  
        map.panTo(my_Point);		
        $("#lat_value").val(my_Point.lat().toFixed(5)); 
        $("#lng_value").val(my_Point.lng().toFixed(5));  	

	});		

}
$(function(){
		var searchPlace=function(){ 
		var AddressSearch=$("#namePlace").val();
		if(geocoder){  
			geocoder.geocode({
				 address: AddressSearch 
			},function(results, status){ 
      			if(status == GGM.GeocoderStatus.OK) { 
					var my_Point=results[0].geometry.location; 
					map.setCenter(my_Point); 
					my_Marker.setMap(map); 					
					my_Marker.setPosition(my_Point); 
					$("#lat_value").val(my_Point.lat().toFixed(5));
					$("#lng_value").val(my_Point.lng().toFixed(5));  
				}else{
					
					alert("Geocode was not successful for the following reason: " + status);
					$("#namePlace").val("");
				 }
			});
		}		
	}
	$("#SearchPlace").click(function(){ 
		searchPlace();	
	});
	$("#namePlace").keyup(function(event){ 
		if(event.keyCode==13){	
			searchPlace();	
			}		
	});
});

$(function(){	
	$("<script/>", {
	  "type": "text/javascript",
	  src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});

$(function(){
	setInterval(function(){
		var getData=$.ajax({ 
				url:"DB_Map.php",
				data:"rev=1",
				async:false,
				success:function(getData)
					{
					var j1=0;j2=0;
					var str = getData;
					str1 = str.split(" ");
					//alert(str1);
					for(var i=0;i<str1.length-1;i  )
					{
					if(i%4==2)
						{
							lat[j1] = str1[i];
							//alert(lat[j1]);
							j1++;
						}
					if(i%4==3)
						{
							lng[j2] = str1[i];
							j2++;
						}
						
					}
					
					maker();
					$("#showData").html(getData); 				                                         
					}
		}).responseText;
	},3000);	
});



</script>  
</body>
</html>

Net Chakkrit 30-04-2012 13:55:15

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน