การแสดงจุดบน googlemap แต่แสดงแค่บางส่วนก่อน

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา การแสดงจุดบน googlemap แต่แสดงแค่บางส่วนก่อน

การแสดงจุดบน googlemap แต่แสดงแค่บางส่วนก่อน

พี่ค่ะ พอจะมีตัวอย่าง สร้าง Marker ในแผนที่ Google map จาก Database ที่ดึงมา
แต่ว่า เวลามันโชว์ จุด Marker ในตอนแรก ให้มันโชว์แค่บางส่วน แล้วพอเราซูมเข้าไป มันก้อจะแสดง จุด Marker ที่เหลือ เพิ่มขึ้นมาอีก
คือ แบบ ตอนแรก มีแค่ สองสามจุด พอซูมเข้าไป ก้อ มีอีกหลายๆ จุดอ่ะค่ะ
ช่วยน่อยน่ะค่ะ ขอบคุณมากค่ะ

Nanozeez 03-12-2014 01:59:26

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

ความคิดเห็นที่ 1

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

นี้คือตัวอย่างในเว็บที่ประยุกต์ให้ดูเบื้องต้น
ลอกสังเกตที่ภาคใต้ จะมีปักหมุดเริ่มต้น แค่ที่เดียว พอเรา 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: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"  
    }).appendTo("body");      
});  
</script>              
</body>
</html>

ดูเนื้อหาเกี่ยวกับการใช้งาน google map ได้ที่

https://www.ninenik.com/google_search.php?tags=google map

ninenik 03-12-2014

ความคิดเห็นที่ 2

ขอบคุณมากๆๆเรยค่ะ ตัวอย่างนี้ช่วยหนูได้เยอะเรลยค่ะ

หนูขอถามเพิ่มน่ะค่ะ จากตัวอย่างที่พี่ให้มา ถ้าหนูอยากให้แบบว่า พอเรากดตรงมุดที่ปักไว้แล้ว มี pop-up ขึ้นมาอ่าค่ะ ซึ่ง pop-up นั้น ก้อจะมี ข้อมูลต่างๆ เช่น มีภาพติดอยู่ มีรายละเอียด ด้วยอ่ะค่ะ ต้องทำไงค่ะ ช่วยน่อยน่ะค่ะ ขอบคุณมากค่ะ

nanozeez 03-12-2014 19:29

ความคิดเห็นที่ 3

ดูอัพเดท จากบทความได้เลย มีปรับให้รองรับการใช้งาน infowindow ถ้าจะดึงข้อมูลแสดงเมื่อกดให้เปิดใช้งาน
ตัว comment ไว้

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

https://www.ninenik.com/content.php?arti_id=589 via @ninenik

ninenik 03-12-2014

ความคิดเห็นที่ 4

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

nanozeez 03-12-2014 21:09

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

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

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