PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

google map แสดงจำนวน marker ตามเงื่อนไข การ zoom

04 December 2014 By


เนื้อหาในโค้ดนี้ มาจากคำถามของสมาชิก เอามาเพิ่มไว้ในบทความ
เพื่อให้ง่ายต่อการค้นหา และรวบรวมไว้
 
สิ่งที่ได้รู้เพิ่มเติม คือ การสร้างไฟล์ json จากฐานข้อมูลเพื่อดึง
ตำแหน่ง latitude และ longitude และข้อมูลอื่นมาเก็บไว้ในตัวแปร
object แล้ว แสดงเป้น marker ในแผนที่
 
โดยในเนื้อหาจะใช้ข้อมูลจากตารางตำแหน่งแผนที่ระบุ พิกัด จังหวัดในประเทศทไทย
การนำไปใช้งาน สามารถประยุกต์ได้ตามความเหมาะสม
 
ตัวอย่าง
ลอกสังเกตที่ภาคใต้ จะมีปักหมุดเริ่มต้น แค่ที่เดียว พอเรา zoom เข้าไป ก็จะแสดงรายการปักหมุดเพิ่มเข้ามา
 

 
ไฟล์ get_marker.php สำหรับดึงข้อูลและพิกัด จากฐานข้อมูล มาเป็นรูปแบบไฟล์ json
 
<?php
header("Content-type:application/json; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);  
// ส่วนติดต่อกับฐานข้อมูล
mysql_connect("localhost","root","") or die("Cannot connect the Server");     
mysql_select_db("test") or die("Cannot select database");     
mysql_query("set character set utf8");   
?>
<?php
$q="SELECT * FROM province_th WHERE 1 ORDER BY province_id";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
	$json_data[]=array(
		"province_id"=>$rs['province_id'],
		"province_name"=>$rs['province_name'],
        "latitude"=>$rs['province_lat'],
        "longitude"=>$rs['province_lon'],
        "zoom"=>$rs['province_zoom']
	);	
}
$json= json_encode($json_data);
echo $json;
?>
 
ไฟล์ทดสอบ google_map_zoom.php คำอธิบายแสดงในโค้ด
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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>
  
  <br>
   <div style="margin:auto:width:80%;">
       <div id="map_canvas"></div>  
       
   </div>   

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">  
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้  
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น  
var my_Marker=[]; // สำหรับปักหมุด
var obj_marker;  // สำหรับเก็บค่าพิกัดและข้อมูลจากฐานข้อมูล
var limit_show=10; // กำหนดแสดงรายการไม่เกิน
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่  
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด      
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: 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  
    
    // ดึงข้อมูลจากฐานข้อมูลที่สร้างมาในรูปแบบไฟล์ 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
                    var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);  
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                        title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });     
                     
                     // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
                     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='+obj_marker[i].province_id,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล  
//                              async:false     
//                          }).responseText     
//                        });                           

                     // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ 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++;
                 }
                
         });              
    });  
    

    // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom  
    GGM.event.addListener(map, 'zoom_changed', function() {  
        // วนลูปล้างค่าเก่า ก่อนสร้างปักหมุดใหม่
        if(my_Marker.length>0){  
            for(i=0;i<my_Marker.length;i++){  
                my_Marker[i].setMap(null);  
            }  
        }  
        var m=0;
        var map_zoom=map.getZoom();
        // zoom เท่าไหร่ แสดงเท่าไหร่ เงื่อนไขกำหนดตามต้องการ
        if(map_zoom<=6){
            limit_show=10;
        }else if(map_zoom<=7){
            limit_show=30;
        }else if(map_zoom<=8){
            limit_show=40;
        }else if(map_zoom<=20){
            limit_show=100;
        }else{
            limit_show=10;
        }
         $.each(obj_marker,function(i,k){  // วนลูปแสดงการปักหมุด
                 if(m<limit_show){ // ปักหมดได้ไม่เกิน limit_show
                     
                    var markerLatLng=new GGM.LatLng(obj_marker[i].latitude,obj_marker[i].longitude);  
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                        title:obj_marker[i].province_name // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });    

                    // ส่วนของ infowindow สำหรับทดสอบ ดึงจากชื่อ titile
                     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='+obj_marker[i].province_id,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล  
//                              async:false     
//                          }).responseText     
//                        });                           

                     // ส่วนของการกำหนด ให้เมื่อคลิกแต่ละ 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++;
                 }
         });          
        
    });  
    
  
}  
$(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>

 
สำหรับกรณีการดึงข้อมูลจากฐานข้อมูล
ให้ไปเปิดใช้ ส่วนของการใช้งานดึงข้อมูล infowindow จากฐานข้อมูลแทน
 
จากนั้นสร้างไฟล์ php สำหรับจัดรูปแบบ รับค่า และดึงข้อมูลจากฐานข้อมูล
เพื่อสร้างเนื้อหารายละเอียดที่จะแสดงใน infowindow 
 
ไฟล์ placeDetail.php  เปลี่ยนค่าตามต้องการ

<?php
header("Content-type:text/html; charset=UTF-8");                
header("Cache-Control: no-store, no-cache, must-revalidate");               
header("Cache-Control: post-check=0, pre-check=0", false);    
// เชื่อมต่อกับฐานข้อมูล      
$link=mysql_connect("localhost","root",""); // เชื่อมต่อ Server        
mysql_select_db("test");  // ติดต่อฐานข้อมูล        
mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล    
// ดึงข้อมูลจากฐานข้อมูล ตามค่า id ของสถานที่ ที่ส่งมา
$q="SELECT * FROM  province_th WHERE province_id='".$_GET['placeID']."'  ";
$qr=@mysql_query($q);	
$rs=@mysql_fetch_assoc($qr);
?>
<!--จัดรูปแบบ ที่ต้องการแสดงตามต้องการ -->
<table width="300" border="0" cellspacing="2" cellpadding="0">  
  <tr>  
    <td width="10" rowspan="4">  
    <img src="http://www.example.com/images/<?=$rs['province_picture']?>"   
     width="130" height="80">  
    </td>  
    <td width="10">&nbsp;</td>  
    <td width="264">ชื่อสถานที่ <?=$rs['province_name']?></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>Latitude: <?=$rs['province_name']?></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>Longitude: <?=$rs['province_name']?></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td><a href="http://www.example.com/placeID=<?=$rs['province_id']?>"  
     target="_blank">ลิ้งค์อ่านเพิ่ม</a></td>  
  </tr>  
</table>  

Tags:: marker google map zoom





URL สำหรับอ้างอิง