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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
marker zoom google map

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ marker zoom google map

ดูแล้ว 12,078 ครั้ง


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

 
ไฟล์ get_marker.php สำหรับดึงข้อูลและพิกัด จากฐานข้อมูล มาเป็นรูปแบบไฟล์ json
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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 คำอธิบายแสดงในโค้ด
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?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>


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง



Tags:: zoom marker google map







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ