แสดงข้อมูลตัวเลือก ด้านข้าง google map กับการใช้งาน event.trigger

เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee
sortcompare event.trigger sortnumber google map

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

ดูแล้ว 14,414 ครั้ง




เนื้อหาต่อไปนี้ เป็นส่วนต่อเนื้องจาก หัวข้อ
https://www.ninenik.com/กำหนด_infowindow_ให้กับตัว_marker_จำนวนมาก_ใน_google_map-338.html

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

 

ตัวอย่างโค้ต เนื้อหาบางส่วนตัวเนื่องจาก https://www.ninenik.com/กำหนด_infowindow_ให้กับตัว_marker_จำนวนมาก_ใน_google_map-338.html

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
177
178
179
180
181
182
183
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map API 3 - 01</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 {
    position:relative;
    float:left;
    top:0px;
    width:450px;
    height:400px;
/*  margin:auto;*/
}
/* css สำหรับ div คลุม google map อีกที */
#contain_map {
    position:relative;
    width:600px;
    height:400px;
    margin:auto;
    margin-top:50px;
    overflow:hidden;
/*  background-color:#FC6;*/
}
/* บรรทัดต่อจากนี้เป็น css กำหนดการแสดงในส่วน sidebar หรือแถบข้าง */
#side_bar{
    position:relative;
    float:left;
    width:150px;
    height:418px;
    background-color:#000;
    overflow:auto;
/*  scrollbar-3dlight-color:#CCCCCC;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-base-color:#CCCCCC;
    scrollbar-darkshadow-color:#EAEAEA;
    scrollbar-face-color:#999999;
    scrollbar-highlight-color:#666666;
    scrollbar-shadow-color:#CCCCCC;
    scrollbar-track-color:#EAEAEA;  */
}
/* ส่วน css สำหรับกำหนดการแสดงของ ul ใน sidebar */
#navigator_link{
    position:relative;
    list-style:none;
    padding:0px;
    padding-bottom:10px;
    left:10px;
}
/* ส่วน css กำหนดสีและรูปแบบลิ้งค์ ใน sidebar */
#navigator_link li a{
    text-decoration:none;
    color:#FFF;
}
/* ส่วน css กำหนดให้ข้อความใน li เยื้องเข้าไป 5 pixel */
#navigator_link li{
    text-indent:5px;
}
/* ส่วน css สีพื้นหลังของ li เมื่อ mouse over */
#navigator_link li:hover{
    background-color:#CCC; 
}
/* ส่วน css สีของลิ้งค์ เมื่อ mouse over */
#navigator_link li:hover a{
    color:#000;
}
</style>
 
 
</head>
 
<body>
 
<div id="contain_map">
  <div id="map_canvas"></div>
  <div id="side_bar">
        <ul id="navigator_link">
        </ul>
  </div>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
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: 6, // กำหนดขนาดการ zoom
        center: my_Latlng , // กำหนดจุดกึ่งกลาง
        mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่
        mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
            position:GGM.ControlPosition.TOP_RIGHT, // จัดตำแหน่ง
            style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style
        }
    };
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
 
 
    $.ajax({
        url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
        dataType: "xml",
        success:function(xml){
            $(xml).find('marker').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker 
 
                var markerID=$(this).find("id").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                var markerName=$(this).find("name").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                var markerLat=$(this).find("latitude").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
                 
                // ส่วนสำหรับสร้างลิ้งค์ใน sidebar
                var navi_link="<li><a href='javascript:showInfo("+i+")'>"+markerName+"</a></li>";
                $("#navigator_link").prepend(navi_link);     // นำลิ้สรายการ พร้อมลิ้งค์ไปแสดงใน sidebar           
                             
                var markerLatLng=new GGM.LatLng(markerLat,markerLng);
                my_Marker[i] = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
                    position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                    title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                });
                //  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
                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='+markerID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
//                      async:false  
//                  }).responseText  
//              });            
                 
                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 ที่เปิดไว้อ้างอิงใช้งาน
                });        
            });
        }  
    });    
 
     
}
// ส่วนของฟังก์ชันที่เรียกใช้งานจากลิ้งค์ เพื่อแสดง infowindow
function showInfo(i){ // ส่งค่า  i  คือ index ของตัว marker แต่ละตัวในแผนที่
    //  เมื่อคลิกจากลิ้งค์ ให้ตัว marker ในแผนที่นั้นๆ ถูกคลิกด้วย
    GGM.event.trigger(my_Marker[i],"click");
}  
$(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>

 



   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 20-11-2017


เนื่องจากปัจจุบัน (20/11/2017 อัพเดทล่าสุด) นิยมใช้งาน json ไฟล์ แทน xml ไฟล์ จึงข้ออัพเดทข้อมูล
และนำเนื้อหาเป้น 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
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
-- --------------------------------------------------------
 
--
-- Table structure for table `tbl_provinces_map`
--
 
CREATE TABLE `tbl_provinces_map` (
  `province_id` int(11) NOT NULL,
  `province_name` varchar(255) NOT NULL,
  `province_lat` varchar(255) NOT NULL,
  `province_lon` varchar(255) NOT NULL,
  `province_zoom` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
 
--
-- Dumping data for table `tbl_provinces_map`
--
 
INSERT INTO `tbl_provinces_map` (`province_id`, `province_name`, `province_lat`, `province_lon`, `province_zoom`) VALUES
(1, 'กรุงเทพมหานคร', '13.7278956', '100.52412349999997', 13),
(2, 'กระบี่', '8.0862997', '98.90628349999997', 13),
(3, 'กาญจนบุรี', '14.0227797', '99.53281149999998', 13),
(4, 'กาฬสินธุ์', '16.4314078', '103.5058755', 13),
(5, 'กำแพงเพชร', '16.4827798', '99.52266179999992', 13),
(6, 'ขอนแก่น', '16.4419355', '102.8359921', 13),
(7, 'จันทบุรี', '12.61134', '102.10385459999998', 13),
(8, 'ฉะเชิงเทรา', '13.6904194', '101.07795959999999', 13),
(9, 'ชลบุรี', '13.3611431', '100.98467170000004', 13),
(10, 'ชัยนาท', '15.1851971', '100.12512500000003', 13),
(11, 'ชัยภูมิ', '15.8068173', '102.03150270000003', 13),
(12, 'ชุมพร', '10.4930496', '99.18001989999993', 13),
(13, 'เชียงราย', '19.9071656', '99.83095500000002', 13),
(14, 'เชียงใหม่', '18.7877477', '98.99313110000003', 13),
(15, 'ตรัง', '7.5593851', '99.61100650000003', 13),
(16, 'ตราด', '12.2427563', '102.51747339999997', 13),
(17, 'ตาก', '16.8839901', '99.12584979999997', 13),
(18, 'นครนายก', '14.2069466', '101.21305110000003', 13),
(19, 'นครปฐม', '13.8199206', '100.06216760000007', 13),
(20, 'นครพนม', '17.392039', '104.76955079999993', 13),
(21, 'นคราชสีมา', '14.9798997', '102.09776929999998', 13),
(22, 'นครศรีธรรมราช', '8.4303975', '99.96312190000003', 13),
(23, 'นครสวรรค์', '15.6930072', '100.12255949999997', 13),
(24, 'นนทบุรี', '13.8621125', '100.51435279999998', 13),
(25, 'นราธิวาส', '6.4254607', '101.82531429999995', 13),
(26, 'น่าน', '18.7756318', '100.77304170000002', 13),
(27, 'บุรีรัมย์', '14.9930017', '103.10291910000001', 13),
(28, 'ปทุมธานี', '14.0208391', '100.52502759999993', 13),
(29, 'ประจวบคีรีขันธ์', '11.812367', '99.79732709999996', 13),
(30, 'ปราจีนบุรี', '14.0509704', '101.37274389999993', 13),
(31, 'ปัตตานี', '6.869484399999999', '101.25048259999994', 13),
(32, 'พระนครศรีอยุธยา', '14.3532128', '100.56895989999998', 13),
(33, 'พะเยา', '19.1664789', '99.9019419', 13),
(34, 'พังงา', '8.4407456', '98.51930319999997', 13),
(35, 'พัทลุง', '7.6166823', '100.07402309999998', 13),
(36, 'พิจิตร', '16.4429516', '100.34823289999997', 13),
(37, 'พิษณุโลก', '16.8298048', '100.26149150000003', 13),
(38, 'เพชรบุรี', '13.1111601', '99.93913069999996', 13),
(39, 'เพชรบูรณ์', '16.4189807', '101.15509259999999', 13),
(40, 'แพร่', '18.1445774', '100.14028310000003', 13),
(41, 'ภูเก็ต', '7.9810496', '98.36388239999997', 13),
(42, 'มหาสารคาม', '16.1850896', '103.30264609999995', 13),
(43, 'มุกดาหาร', '16.542443', '104.72091509999996', 13),
(44, 'แม่ฮ่องสอน', '19.2990643', '97.96562259999996', 13),
(45, 'ยโสธร', '15.792641', '104.14528270000005', 13),
(46, 'ยะลา', '6.541147', '101.28039469999999', 13),
(47, 'ร้อยเอ็ด', '16.0538196', '103.65200359999994', 13),
(48, 'ระนอง', '9.9528702', '98.60846409999999', 13),
(49, 'ระยอง', '12.6833115', '101.23742949999996', 13),
(50, 'ราชบุรี', '13.5282893', '99.81342110000003', 13),
(51, 'ลพบุรี', '14.7995081', '100.65337060000002', 13),
(52, 'ลำปาง', '18.2888404', '99.49087399999996', 13),
(53, 'ลำพูน', '18.5744606', '99.0087221', 13),
(54, 'เลย', '17.4860232', '101.72230020000006', 13),
(55, 'ศรีสะเกษ', '15.1186009', '104.32200949999992', 13),
(56, 'สกลนคร', '17.1545995', '104.1348365', 13),
(57, 'สงขลา', '7.1756004', '100.61434699999995', 13),
(58, 'สตูล', '6.6238158', '100.06737440000006', 13),
(59, 'สมุทรปราการ', '13.5990961', '100.59983190000003', 13),
(60, 'สมุทรสงคราม', '13.4098217', '100.00226450000002', 13),
(61, 'สมุทรสาคร', '13.5475216', '100.27439559999993', 13),
(62, 'สระแก้ว', '13.824038', '102.0645839', 13),
(63, 'สระบุรี', '14.5289154', '100.91014210000003', 13),
(64, 'สิงห์บุรี', '14.8936253', '100.39673140000002', 13),
(65, 'สุโขทัย', '17.0055573', '99.82637120000004', 13),
(66, 'สุพรรณบุรี', '14.4744892', '100.11771279999994', 13),
(67, 'สุราษฎร์ธานี', '9.1382389', '99.32174829999997', 13),
(68, 'สุรินทร์', '14.882905', '103.49371070000007', 13),
(69, 'หนองคาย', '17.8782803', '102.74126380000007', 13),
(70, 'หนองบัวลำภู', '17.2218247', '102.42603680000002', 13),
(71, 'อ่างทอง', '14.5896054', '100.45505200000002', 13),
(72, 'อำนาจเจริญ', '15.8656783', '104.62577740000006', 13),
(73, 'อุดรธานี', '17.4138413', '102.78723250000007', 13),
(74, 'อุตรดิตถ์', '17.6200886', '100.09929420000003', 13),
(75, 'อุทัยธานี', '15.3835001', '100.02455269999996', 13),
(76, 'อุบลราชธานี', '15.2286861', '104.85642170000006', 13),
(77, 'บึงกาฬ', '18.3609104', '103.64644629999998', 13);
 
--
-- Indexes for dumped tables
--
 
--
-- Indexes for table `tbl_provinces_map`
--
ALTER TABLE `tbl_provinces_map`
  ADD PRIMARY KEY (`province_id`);
 
--
-- AUTO_INCREMENT for dumped tables
--
 
--
-- AUTO_INCREMENT for table `tbl_provinces_map`
--
ALTER TABLE `tbl_provinces_map`
  MODIFY `province_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=78;
 
 
 
ไฟล์ dbconnect.php สำหรับเชื่อมต่อกับฐานข้อมูล ใช้งาน mysqli 
 
1
2
3
4
5
6
7
8
9
10
11
<?php 
$mysqli = new mysqli("localhost", "root","","test"); 
/* check connection */
if ($mysqli->connect_errno) { 
    printf("Connect failed: %s\n", $mysqli->connect_error); 
    exit(); 
if(!$mysqli->set_charset("utf8")) { 
    printf("Error loading character set utf8: %s\n", $mysqli->error); 
    exit(); 
}
 
ไฟล์ genMarker.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
<?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);
require_once("dbconnect.php");
$json_data = array();
$sql = "
SELECT * FROM tbl_provinces_map WHERE 1 ORDER BY province_id
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
            "province_id" => $row['province_id'],
            "province_name" => $row['province_name'],
            "province_lat" => $row['province_lat'],
            "province_lon" => $row['province_lon']                      
        );
    }
}
// แปลง array เป็นรูปแบบ json string 
if(isset($json_data)){ 
    $json= json_encode($json_data);   
    if(isset($_GET['callback']) && $_GET['callback']!=""){   
    echo $_GET['callback']."(".$json.");";       
    }else{   
    echo $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
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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="//unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <style type="text/css">
    /* css กำหนดความกว้าง ความสูงของแผนที่ */
    #map_canvas {
        position:relative;
        float:left;
        top:0px;   
        width:450px;
        height:500px;
        margin:auto;
    }
    /* css สำหรับ div คลุม google map อีกที */
    #contain_map {
        position:relative;
        width:610px;
        height:500px;
        margin:auto;
        margin-top:50px;
        overflow:hidden;
    /*  background-color:#FC6;*/
    }  
    /* บรรทัดต่อจากนี้เป็น css กำหนดการแสดงในส่วน sidebar หรือแถบข้าง */
    #side_bar{
        position:relative;
        float:left;
        width:160px;
        height:500px;
        background-color:#2196f3;
        overflow:auto;
    }
    /* ส่วน css สำหรับกำหนดการแสดงของ ul ใน sidebar */
    #navigator_link{
        position:relative;
        list-style:none;
        padding:0px;
        margin:0px;
        padding-bottom:10px;
    }
    /* ส่วน css กำหนดสีและรูปแบบลิ้งค์ ใน sidebar */
    #navigator_link li a{
        text-decoration:none;
        color:#FFF;
    }
    /* ส่วน css กำหนดให้ข้อความใน li เยื้องเข้าไป 5 pixel */
    #navigator_link li{
        text-indent:5px;
        margin:0px;
        padding:0px;
    }
    /* ส่วน css สีพื้นหลังของ li เมื่อ mouse over */
    #navigator_link li:hover{
        background-color:#CCC; 
    }
    /* ส่วน css สีของลิ้งค์ เมื่อ mouse over */
    #navigator_link li:hover a{
        color:#000;
    }  
    </style>   
  </head>
  
<body>
 
<div class="container" style="width:800px;">
    <div id="contain_map">
        <div id="map_canvas"></div>
        <div id="side_bar">
            <ul id="navigator_link">
            </ul>
        </div> 
    </div>
</div> 
   
<script src="//unpkg.com/jquery@3.2.1"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
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: 7, // กำหนดขนาดการ zoom
        center: my_Latlng , // กำหนดจุดกึ่งกลาง
        mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่
        mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
            position:GGM.ControlPosition.LEFT, // จัดตำแหน่ง
            style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style
        }
    };
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
   
    $.ajax({
        url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ json
        method: "POST",
        dataType: "json",
        success:function(data){
            if(data && typeof data == 'object'){
                data.sort(sortComparer); // เรียงข้อมูลตามตัวอักษร กรณีไม่ได้เรียงจากคำสั่ง sql แต่ต้น
                $.each(data,function(k,dataValue){
                    var markerID=dataValue.province_id;// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                    var markerName=dataValue.province_name; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                    var markerLat=dataValue.province_lat; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                    var markerLng=dataValue.province_lon; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน         
                     
                    // ส่วนสำหรับสร้างลิ้งค์ใน sidebar
                    var navi_link="<li><a href='javascript:showInfo("+k+")'>"+markerName+"</a></li>";
                    $("#navigator_link").prepend(navi_link);     // นำลิ้สรายการ พร้อมลิ้งค์ไปแสดงใน sidebar   
                       
                    var markerLatLng=new GGM.LatLng(markerLat,markerLng);
                    my_Marker[k] = new GGM.Marker({ // สร้างตัว marker
                        position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                        title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                    });
                     
                    //  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
                    infowindow[k] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array          
                        content: my_Marker[k].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow
                    });
                     
    //              //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
    //              infowindow[k] = new GGM.InfoWindow({  
    //                  content:$.ajax({  
    //                      url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล  
    //                      data:'placeID='+markerID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
    //                      async:false  
    //                  }).responseText  
    //              });            
                      
                    GGM.event.addListener(my_Marker[k], 'click', function(){ // เมื่อคลิกตัว marker แต่ละตัว
                        if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
                            infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
                        }                          
                        infowindow[k].open(map, my_Marker[k]); //  แสดง info window
                        infowindowTmp=k;
                        map.panTo(infowindow[k].getPosition()); // เลื่อนไปที่ marker ที่คลิก
                    });                    
                     
                }); // end loop data
            } // end check data
        }   // end success
    });    // End ajax function
           
}
// ฟังก์ชั่นสำหรับการเรียงข้อมูล number float
// เปลี่ยน province_id เป็นค่าที่ต้องการ
function sortNumber(a ,b){
    // จากน้อยไปมาก    
    return parseFloat(b.province_id) - parseFloat(a.province_id);
    // ถ้าเป้นจาก มากไปหน้อยให้สลับเป็น parseFloat(a.province_id) - parseFloat(b.province_id);
}
// ฟังก์ชั่นสำหรับการเรียงข้อมูล string
// เปลี่ยน province_name เป็นค่าที่ต้องการ
function sortComparer(a,b){
    // จากน้อยไปมาก
    return b.province_name.localeCompare(a.province_name)
    // ถ้าเป้นจาก มากไปหน้อยให้สลับเป็น a.province_name.localeCompare(b.province_name)
};
// ส่วนของฟังก์ชันที่เรียกใช้งานจากลิ้งค์ เพื่อแสดง infowindow
function showInfo(i){ // ส่งค่า  i  คือ index ของตัว marker แต่ละตัวในแผนที่
    //  เมื่อคลิกจากลิ้งค์ ให้ตัว marker ในแผนที่นั้นๆ ถูกคลิกด้วย
    GGM.event.trigger(my_Marker[i],"click");
}
$(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&key=<กรอก api key>&sensor=false&language=th&callback=initialize"
    }).appendTo("body");   
});
</script> 
</body>
</html>

ดูตัวอย่างที่ Demo
 




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







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









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





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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ