PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

เรื่อง googlemap api ครับ ก็อปไปลองใช้แล้วจอขาวครับ

เรื่อง googlemap api ครับ ก็อปไปลองใช้แล้วจอขาวครับ

 

อยากได้โค้ด สมมุติผุ้ใช้ต้องการอยากทราบว่าหอพักในระยะห่างจากมหาลัยไม่เกิน5กม ดึงข้อมูลออกมาจาก dataase แสดงในแผนที่ครับ

ลองเอาโค้ดที่โพสไว้มาทำแต่เป็นจอขาวครับ ทุกอันเลยครับ ก็อปโค้ดมาต้องเปลี่ยนตรงไหนบ้างครับ  ช่วยแนะนำหน่อยครับ



โดย:  Buraratn IP: 182.52.77.xxx วันที่: 23-06-2011 เวลา: 13:10:28

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 22

 และถ้าอยากรับค่าจาก txt มาเปรียบเทียบกับค่า distance ที่ได้จากการ select ออกมา เช่น กรอก 3 ก็แสดงสถานที่ที่อยู่ห่างจุดกึ่งกลางไม่เกิน 3 กม

ตอนนี้ออกแค่จุดกึ่งกลางกับอีก1จุดเท่านั้นครับ

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=tis-620" />
<title>แผนที่หอพัก</title>
<style type="text/css">
html {
height: auto;
}

body {
height: auto;
margin: 0;
padding: 0;
}
#map {
	width:1000px;
	height:650px;
	margin:auto;
	margin-top:50px;
}

@media print {
#map {
height: 950px;
}
}

</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
src="https://www.google.com/jsapi?key=ABQIAAAA_KNcKfoyaTskjEp-kSSEjxSsDbTxMRg-JrUcPZT14QWonZA5mxRqx3ct_DbeHVelXNr1WbKEEJ5k-A"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/googleearth/src/googleearth-compiled.js" type="text/javascript"></script>


<script type="text/javascript">
google.load('earth', '1');
var map;
var googleEarth;
function init() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(14.85467, 103.48357),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
googleEarth = new GoogleEarth(map);

var locations = [
['มหาวิทยาลัยเทคโนโลยีราชมงคลอีสาน วิทยาเขตสุรินทร์', 14.85467, 103.48357], 
<?php
include"connect.php";


$sql="SELECT id_prd,name_prd,lat_prd,lng_prd, ( 6371 * acos( cos( radians(14.85467) ) * cos( radians( lat_prd ) ) * cos( radians( lng_prd ) - radians(103.48357) ) + sin( radians(14.85467) ) * sin( radians( lat_prd ) ) ) ) AS distance FROM tb_product ";
$result=mysql_db_query($db_Name,$sql);
while($rs=mysql_fetch_array($result)){
$lat_prd=$rs[lat_prd];
$lng_prd=$rs[lng_prd];
$name_prd=$rs[name_prd];}
?>
['<?=$name_prd?>', <?=$lat_prd?>, <?=$lng_prd?>]
];

var infowindow = new google.maps.InfoWindow();

var marker, i; for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
draggable : false,
title : locations[i][0],
icon : 'http://maps.google.com/mapfiles/kml/pal3/icon48.png',
map: map
});

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})
(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

 



โดย:  Buraratn IP: 182.52.76.xxx วันที่: 28-06-2011 เวลา: 13:33:15
 ความคิดเห็นที่ 21

ยากให้คลิกแล้วให้ข้อมูลขึ้น และก็ยากทำหมุดอ้างอิงไว้ตรงกึ่งกลางแผนที่ที่สีไม่เหมือนหมุดอื่นๆ เพื่อเวลาดูจะได้อ้างอิงว่าเป้นมหาลัยตรงนั้นครับ



โดย:  ธรรมะ IP: 182.52.76.xxx วันที่: 24-06-2011 เวลา: 12:14:00
 ความคิดเห็นที่ 20
อันนี้เป็นไฟล์ xml แบบเรียกข้อมูลหลายตารางครับ เผื่อใครจะนำไปเป้นแนวทางครับ  

แต่ตอนนี้มีแต่หมุดขึ้นครับ ยังไม่แสดงข้อมูลใดๆ
<?php
header("Content-type:text/xml; charset=tis-620");              
header("Cache-Control: no-store, no-cache, must-revalidate");             
header("Cache-Control: post-check=0, pre-check=0", false);   
mysql_connect("localhost","root","1234") or die("Cannot connect the Server");
mysql_select_db("db_shop") or die("Cannot select database");
mysql_query("set character set tis620");
echo '<?xml version="1.0" encoding="tis-620"?>';
?>
<markers>
<?
$q = " SELECT * FROM tb_product  ";       
$q .= " LEFT JOIN tb_type ON tb_product .ref_id_type = tb_type.id_type";
$q .=	" LEFT JOIN tb_type_lease ON tb_product .ref_id_type_lease = tb_type_lease.id_type_lease";
$q .=	" $where"; 
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?>
	<marker id="<?=$rs['id_prd']?>">
        <name><?=$rs['name_prd']?></name>
		<name_type><?=$rs['name_type']?></name_type>
        <name_type_lease><?=$rs['name_type_lease']?></name_type_lease>
		 <detail_prd><?=$rs['detail_prd']?></detail_prd>
        <price_prd><?=$rs['price_prd']?></price_prd>
		 <address_prd><?=$rs['address_prd']?></address_prd>
        <tel_prd><?=$rs['tel_prd']?></tel_prd>
        <lat_prd><?=$rs['lat_prd']?></lat_prd>
		<lng_prd><?=$rs['lng_prd']?></lng_prd>
    </marker>
<?php } ?>
</markers>

 

 



โดย:  ธรรมะ IP: 182.52.76.xxx วันที่: 24-06-2011 เวลา: 12:11:19
 ความคิดเห็นที่ 19

ได้แล้วครับตอนนี้ แต่คลิกที่หมุดข้อมูลยังไม่แสดงครับ

<?php
header("Content-type:text/xml; charset=tis-620");              
header("Cache-Control: no-store, no-cache, must-revalidate");             
header("Cache-Control: post-check=0, pre-check=0", false);   
mysql_connect("localhost","root","1234") or die("Cannot connect the Server");
mysql_select_db("db_shop") or die("Cannot select database");
mysql_query("set character set tis620");
mysql_query("SET SESSION group_concat_max_len = 8192;");
$q="SELECT CONCAT('<?xml version="1.0" encoding="tis-620"?>n'
   ,'<markers>n',
   GROUP_CONCAT(
      't<marker id="',id_prd, '">n'
        ,'tt<id>', `id_prd`, '</id>n'
        ,'tt<name>' ,`name_prd` ,'</name>n'
		 ,'tt<detail_prd>', `detail_prd`, '</detail_prd>n'
        ,'tt<price_prd>' ,`price_prd` ,'</price_prd>n'
		,'tt<address_prd>', `address_prd`, '</address_prd>n'
        ,'tt<tel_prd>' ,`tel_prd` ,'</tel_prd>n'
		,'tt<lat_prd>', `lat_prd`, '</lat_prd>n'
        ,'tt<lng_prd>' ,`lng_prd` ,'</lng_prd>n'
      ,'t</marker>n' SEPARATOR  '')
   ,'</markers>') AS xmlDoc
FROM tb_product  WHERE  1 ";
echo mysql_result(mysql_query($q),0,0);
?>
<!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=tis-620" />
<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>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.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(14.85467,103.48357);
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ 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:"map1.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml 
		dataType: "xml",
		success:function(xml){
			$(xml).find('marker').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker  
				var markerID=$(this).find("id_prd").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerName=$(this).find("name_prd").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerdetail=$(this).find("detail_prd").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerprice=$(this).find("price_prd").text();	// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    			
				var markeraddress=$(this).find("address_prd").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markertel=$(this).find("tel_prd").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerLat=$(this).find("lat_prd").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerLng=$(this).find("lng_prd").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>

 



โดย:  ธรรมะ IP: 182.52.76.xxx วันที่: 24-06-2011 เวลา: 11:45:31
 ความคิดเห็นที่ 18

 ดูแล้ว น่าจะยังไม่ค่อยเข้าใจ

โค้ดตัวอย่าง ตามโค้ดความเห็นที่ 16 บรรทัดที่ 29 ไม่ค้องมี เพราะ เป็น google map V3 ไม่ต้องใช้ api key

บรรทัดที่ 30 เป็นการโหลด jQuery เราต้องมีไฟล์นี้ หรือเปลี่ยนไปใช้จาก เว็บ jQuery เป็น 

</script><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

บรรทัดที่ 60 - 64 เป็นการดึงค่าจาก xml ต้องตรงกับโครงสร้าง xml ที่ใช้

ลองหาความรู้เกี่ยวกับ ส่วนต่างๆ เพิ่มเติมใน ninenik.com อาจจะช่วยให้เข้าใจในรายละเอียดเพิ่มยิ่งขึ้น



โดย:  Ninenik IP: 27.130.128.xxx วันที่: 24-06-2011
 ความคิดเห็นที่ 17

รออยู่ครับ ยังไม่ออกเลยจอขาวเหมือนเดิมครับ



โดย:  ธรรมะ IP: 182.52.77.xxx วันที่: 23-06-2011 เวลา: 20:38:45
 ความคิดเห็นที่ 16

ตอนนี้หน้าจอขาวครับ

<!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=tis-620" />
<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 src="http://maps.google.com/maps?file=api&amp;v=3.2&amp;sensor=false&amp;key=ABQIAAAANgDQmzvkDBH4B789HT7s_BT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSYGzB2KnY8l1xmU_qjqjfCTclFTA" type="text/javascript"></script>
<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(14.85467,103.48357);
	// กำหนด 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:"map1.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml 
		dataType: "xml",
		success:function(xml){
			$(xml).find('marker').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker  
				var markerID=$(this).find("id_prd").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerName=$(this).find("name_prd").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerLat=$(this).find("lat_prd").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
				var markerLng=$(this).find("lng_prd").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>

 



โดย:  Buraratn IP: 182.52.77.xxx วันที่: 23-06-2011 เวลา: 17:44:32
 ความคิดเห็นที่ 15

 ตรงนี้เอาไว้เหมือนเดิมหรือเปลี่ยนครับ

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 markerID=$(this).find("id_prd").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
var markerName=$(this).find("name_prd").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
var markerLat=$(this).find("lat_prd").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
var markerLng=$(this).find("lng_prd").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
 
แล้วก็อันนี้ครับ
// โหลด สคริป 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
โหลดมาใส่ตรงไหนครับ


โดย:  Buraratn IP: 182.52.77.xxx วันที่: 23-06-2011 เวลา: 17:38:06
 ความคิดเห็นที่ 14

การดึงข้อมูลหลายตารางมาใช้งาน ขึ้นอยู่กับเราแล้วหละ ว่าข้อมูลตารางสัมพันธ์กันยังไง 

ส่วนที่จะแนะนำคือการนำข้อมูล มาแสดงใน google map นอกเหนือจากนี้ คงต้องลองทำดู



โดย:  Ninenik IP: 14.207.28.xxx วันที่: 23-06-2011
 ความคิดเห็นที่ 13

อยากดึง  name_type ตารางประเภทมาแสดงด้วยครับ



โดย:  Buraratn IP: 182.52.77.xxx วันที่: 23-06-2011 เวลา: 17:28:22
 ความคิดเห็นที่ 12

 ลองทำต่อ ตามตัวอย่าง

http://www.ninenik.com/content.php?arti_id=338

 



โดย:  Ninenik IP: 14.207.28.xxx วันที่: 23-06-2011
 ความคิดเห็นที่ 11

 <markers>

<marker id="103">
<name>พลอยพีเพชร</name>
<latitude>14.846</latitude>
<longitude>103.503</longitude>
</marker>
<marker id="104">
<name>เติ่งเติ้ง</name>
<latitude>14.8639</latitude>
<longitude>103.476</longitude>
</marker>
<marker id="105">
<name>ทิพวรรณ</name>
<latitude>14.8687</latitude>
<longitude>103.485</longitude>
</marker>
<marker id="106">
<name>ffffffffffffffffffff</name>
<latitude>0</latitude>
<longitude>0</longitude>
</marker>
<marker id="107">
<name>ธรรมธรรม</name>
<latitude>0</latitude>
<longitude>0</longitude>
</marker>
<marker id="108">
<name>
หอพักมหาวิทยาลัยเทคโนโลยีราชมงคลอีสาน วิทยาเขตสุรินทร์
</name>
<latitude>14.8495</latitude>
<longitude>103.495</longitude>
</marker>
</markers>
 
<markers>
n
<marker id="105">
<id>105</id>
<name>ทิพวรรณ</name>
</marker>
<marker id="103">
<id>103</id>
<name>พลอยพีเพชร</name>
</marker>
<marker id="104">
<id>104</id>
<name>เติ่งเติ้ง</name>
</marker>
<marker id="106">
<id>106</id>
<name>ffffffffffffffffffff</name>
</marker>
<marker id="107">
<id>107</id>
<name>ธรรมธรรม</name>
</marker>
<marker id="108">
<id>108</id>
<name>
หอพักมหาวิทยาลัยเทคโนโลยีราชมงคลอีสาน วิทยาเขตสุรินทร์
</name>
</marker>
</markers>


โดย:  Buraratn IP: 182.52.77.xxx วันที่: 23-06-2011 เวลา: 17:25:32
 ความคิดเห็นที่ 10

ตอนนี้ข้อมูลออกแล้วครับ



โดย:  Buraratn IP: 182.52.77.xxx วันที่: 23-06-2011 เวลา: 17:24:10
 ความคิดเห็นที่ 9

 ขึ้นกับผลที่รัน ให้ลองทำ แล้ว รันใน chrome หรือ firefox ถ้าข้อมูลแสดงออกมาเป็นรูปแบบ xml ไฟล์ แสดงว่าถูกต้อง

ถ้ามีตัวอย่างที่ทำออนไลน์ ก็ส่งมาให้ดูได้



โดย:  Ninenik IP: 14.207.28.xxx วันที่: 23-06-2011
 ความคิดเห็นที่ 8

 database มีสามตารางครับ  tb_product(หอพัก)

id_prd

name_prd

ref_id_type

ref_id_type_lease

detail_prd

price_prd

photo_prd

address_prd

tel_prd

lat_prd

lng_prd

ตาราง tb_type(ประเภท เช่น หอชาย หอหญิง)

id_type

name_type

ตาราง tb_type_laease(ลักษณะการเช่า เช่น เดือน เทอม)

id_type_lease

name_type_lease



โดย:  Buraratn IP: 182.52.77.xxx วันที่: 23-06-2011 เวลา: 17:20:09
 ความคิดเห็นที่ 7

ลองแก้แล้วครับไม่รู้ถูกไหมครับ

<?php
header("Content-type:text/xml; charset=tis-620");              
header("Cache-Control: no-store, no-cache, must-revalidate");             
header("Cache-Control: post-check=0, pre-check=0", false);   
mysql_connect("localhost","root","1234") or die("Cannot connect the Server");
mysql_select_db("db_shop") or die("Cannot select database");
mysql_query("set character set utf8");
echo '<?xml version="1.0" encoding="tis-620"?>';
?>
<markers>
<?php
$q="SELECT * FROM tb_product WHERE 1 ORDER BY id_prd LIMIT 30 ";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?>
	<marker id="<?=$rs['id_prd']?>">
        <name><?=$rs['name_prd']?></name>
        <latitude><?=$rs['lat_prd']?></latitude>
        <longitude><?=$rs['lng_prd']?></longitude>
    </marker>
<?php } ?>
</markers>


<?php
header("Content-type:text/xml; charset=tis-620");              
header("Cache-Control: no-store, no-cache, must-revalidate");             
header("Cache-Control: post-check=0, pre-check=0", false);   
mysql_connect("localhost","root","1234") or die("Cannot connect the Server");
mysql_select_db("db_shop") or die("Cannot select database");
mysql_query("set character set tis620");
mysql_query("SET SESSION group_concat_max_len = 8192;");
$q="SELECT CONCAT('<?xml version="1.0" encoding="tis-620"?>n'
   ,'<markers>n',
   GROUP_CONCAT(
      't<marker id="',id_prd, '">n'
        ,'tt<id>', `id_prd`, '</id>n'
        ,'tt<name>' ,`name_prd` ,'</name>n'
      ,'t</marker>n' SEPARATOR  '')
   ,'</markers>') AS xmlDoc
FROM tb_product  WHERE  1 ";
echo mysql_result(mysql_query($q),0,0);
?>

 



โดย:  Buraratn IP: 182.52.77.xxx วันที่: 23-06-2011 เวลา: 17:14:04
 ความคิดเห็นที่ 6

 ถ้าขึ้นจอสีขาว อาจเป็นไปได้ ที่เขียนโค้ด php ผิด คงต้องลองไล่ดู ทีละจุดไป



โดย:  Ninenik IP: 14.207.28.xxx วันที่: 23-06-2011
 ความคิดเห็นที่ 5

ผมลองดูแล้วครับ แต่ขึ้นจอขาวครับ



โดย:  Buraratn IP: 182.52.77.xxx วันที่: 23-06-2011 เวลา: 17:01:04
 ความคิดเห็นที่ 4

 ใครที่สนใจ และกำลังอยากทำ เกี่ยวกับ google map ทำตามคำแนะนำด้านล่างได้เลยน่ะครับ จะใช้ ข้อนี้เป้นตัวแนะนำ จนจบ



โดย:  Ninenik IP: 14.207.28.xxx วันที่: 23-06-2011
 ความคิดเห็นที่ 3

 แนะนำเป็น สเต็บไปดีกว่า

 
ก่อนอื่นไปสร้าง xml ไฟล์ จากฐานข้อมูลให้ได้ ใกล้เคียงกับ ตัวอย่างด้านล่าง
 
http://www.ninenik.com/demo/google_map/simple_3.xml
 
คืออย่างน้อยให้มี ตามตัวอย่าง ก่อน ส่วนอื่นๆ สามารถเพิ่มที่หลังได้
 
อ่านวิธีการทำได้จากหัวข้อ
 
http://www.ninenik.com/content.php?arti_id=335
 
ทำเสร็จ โพส url xml ไฟล์ที่ทำมาให้ดู


โดย:  Ninenik IP: 14.207.28.xxx วันที่: 23-06-2011
 ความคิดเห็นที่ 2

 ขอบคุณมากครับ ตอนนี้ต้องการมากเลยครับ เพราะทำโปรเจคอยู่เหลืออย่างเดียวก็จะเสร็จแล้วครับ

แต่ทำไมผมเอาตัวอย่างไปรันมันเป้นจอขาวก็ไม่รู้ครับ ต้องแก้ไขตรงไหนบ้างครับ หรือผมจะใส่โค้ด api ผิดที่

 



โดย:  ธรรมะ IP: 182.52.77.xxx วันที่: 23-06-2011 เวลา: 15:04:30
 ความคิดเห็นที่ 1

 เดี๋ยวว่างๆ จะทำตัวอย่างการใช้งานร่วมกับ ดาต้าเบส อย่างง่ายมาให้โหลดกัน แต่ รูปแบบ และการใช้งานที่ซับซ้อน คงต้องลองทำเองดู



โดย:  Ninenik IP: 14.207.28.xxx วันที่: 23-06-2011