การปักหมุด (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 » 03/07/2017 6:44 pm

วิธีการปัดหมุด บน 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

 });


รูปภาพ

ตัวอย่างด้านบน คือการปักหมุดแบบหลายตำแหน่ง ถ้าหากต้องการดูวิธีการปักหมุดเพียงจุดเดียวสามารถดูได้ที่ [url=
viewtopic.php?f=79&t=40878]การปักหมุด (Marker) อ้างอิงจาก Lat,Lon [/url]

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน