การปักหมุด (Marker) ด้วย PHP/MySQL บน Google Maps API

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

การปักหมุด (Marker) ด้วย PHP/MySQL บน Google Maps API

โพสต์ที่ยังไม่ได้อ่าน โดย Ik Kat »

วิธีการปัดหมุด บน Google Maps API โดยการดึงค่า Latitude และ Longitude มาจากฐานข้อมูล MySQLด้วยการใช้ PHP เป็นอีกวิธีหนึ่งที่เหมาะสำหรับการปักหมุดหลาย ๆ ตำแหน่ง เพราะจะมีการเก็บค่าตำแหน่งต่าง ๆ ไว้ในฐานข้อมูล หากเราต้องการเพิ่มหรือลบตำแหน่งก็สามารถทำในฐานข้อมูลได้เลย

สร้างฐานข้อมูล ใน MySQL :

โค้ด: เลือกทั้งหมด

CREATE TABLE `location` (
  `LOC_ID` int(10) NOT NULL auto_increment,
  `LOC_NAME` varchar(250) NOT NULL,
  `LAT` varchar(50) NOT NULL,
  `LNG` varchar(50) NOT NULL,
  PRIMARY KEY  (`LOC_ID`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;


INSERT INTO `location` VALUES (1, 'Test1', '13.836760', '100.582560');
INSERT INTO `location` VALUES (2, 'Test2', '13.836328', '100.582123');
INSERT INTO `location` VALUES (3,'Test3', '13.837205', '100.581205');
รูปภาพ

json.php :

โค้ด: เลือกทั้งหมด

<?php
	header('Content-Type: application/json');
	$objConnect = mysql_connect("localhost","root","root");
	$objDB = mysql_select_db("mydatabase");
	mysql_query("SET NAMES UTF8");
	
	$strSQL = "SELECT * FROM location  ";

	$objQuery = mysql_query($strSQL);
	$resultArray = array();
	while($obResult = mysql_fetch_array($objQuery))
	{
		array_push($resultArray,$obResult);
	}
	
	mysql_close($objConnect);
	
	echo json_encode($resultArray);
?>
อ่านค่า JSON :

โค้ด: เลือกทั้งหมด

$.getJSON( "json.php", function( jsonObj ) {
		//*** loop
		$.each(jsonObj, function(i, item){
			marker = new google.maps.Marker({
			   position: new google.maps.LatLng(item.LAT, item.LNG),
			   map: maps,
			   title: item.LOC_NAME
			});

		  info = new google.maps.InfoWindow();

		  google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
			  info.setContent(item.LOC_NAME);
			  info.open(maps, marker);
			}
		  })(marker, i));

		}); // loop

 });
รูปภาพ
Jquery & Ajax Knowledge-1.png
Jquery & Ajax Knowledge-1.png (126.42 KiB) Viewed 37289 times
ตัวอย่างด้านบน คือการปักหมุดแบบหลายตำแหน่ง ถ้าหากต้องการดูวิธีการปักหมุดเพียงจุดเดียวสามารถดูได้ที่ การปักหมุด (Marker) อ้างอิงจาก Lat,Lon

นอกจาก Google Map ที่ทำได้แล้วเรายังสามารถใช้ openstreetmap แทน Google ก็ได้นะ ดูต่อตามลิงค์ด้านล่าง
https://www.mindphp.com/developer/openstreetmap.html
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41125
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: การปักหมุด (Marker) ด้วย PHP/MySQL บน Google Maps API

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ประหยัดค่า API ของ Google ใช้วิธีนี้ช่วยได้
viewtopic.php?f=78&t=60937
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
บุคคลทั่วไป

Re: การปักหมุด (Marker) ด้วย PHP/MySQL บน Google Maps API

โพสต์ที่ยังไม่ได้อ่าน โดย บุคคลทั่วไป »

แจ๋ว ขอบคุณครับ
ขอเอาไปใช้เลยนะ
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 32