จะเปลี่ยนสี Marker ใน Google Map v3 ยังไงครับ

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

จะเปลี่ยนสี Marker ใน Google Map v3 ยังไงครับ

 คือผมอยากจะทำ Custom Marker ใน Google Map v3 อ่ะครับ (คืออยากจะเปลี่ยนสี marker เป็นสีฟ้า สีเขียว ฯลฯ อะไรงี้ครับ)

ทีนี้ ลองไปที่เว็บ api ของ google map มันมีแต่ custom marker ของ v2 เท่านั้นอ่ะครับ ไม่ทราบว่าของ v3 จะทำได้รึเปล่าครับ

เห็นเพื่อนบอกว่า api ของ v3 ยังไม่ค่อยสมบูรณ์เท่าไร กลับไปใช้ v2 ดีกว่า จริงป่าวครับ

 

อ้อ อีกเรื่องนึงคือ จากกระทู้นี้ >> https://www.ninenik.com/forum_view_339_1.html

คือเวลากด clear all marker อ่ะครับ ถ้าเราเกิดวาง marker ไปแล้ว อย่างเช่น 5 อัน เกิดไปคลิกขวา ลบไปอันนีง แล้วไปกด clear all marker อีกที บางทีมันลบได้ไม่หมดอ่ะครับ ยังเหลือ marker บางตัวอยู่ นี่ก็เป็นความไม่สมบูรณ์ของ Google Map v3 ด้วยรึเปล่าครับ แล้วพอจะมีทางแก้ไหมครับ

ขอบคุณล่วงหน้าสำหรับคำตอบนะครับ



Vincentva 04-01-2011 19:41:43

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

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


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


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

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

เปลี่ยนสี marker ลองดูในหัวข้อนี้ดู
https://www.ninenik.com/การใช้งาน_polyline_และ_polygon_ใน_google_map_api_v3-380.html

ส่วนว่า api v2 กับ v3 อันไหนดีกว่า คงต้องเข้าไปอ่านความสามารถใน แต่ละ version ดู
แต่ถ้าให้แนะนำ ให้ใช้ v3 หรือล่าสุด
We encourage you to migrate your code to this newly updated and enhanced version!

คำตอบสำหรับคำถามสุดท้าย---ลบ marker ได้ไม่หมด น่าจะขึ้นอยู่กับโค้ดที่เขียน
ยังไม่สมบูรณ์ หรือมีบางอย่างไม่ถูกต้อง



Ninenik 04-01-2011
 ความคิดเห็นที่ 2

  ครับ เรื่องลบ marker ไม่หมด ผมผิดเองครับ พอดีไปแก้โค้ดนิดหน่อย แล้วลืมไป ตอนนี้แก้กลับคืน ใช้ได้ปกติ ลบ marker ได้เกลี้ยงแล้วครับ

 
ส่วนเรื่องเปลี่ยนสี marker คือผมอยากได้ประมาณว่า ให้มี label ใน marker แต่ละตัวด้วยอ่ะครับ เช่น A-Z, 1-100 ผมโหลด custom marker จากเว็บนี้อ่ะครับ >> http://www.benjaminkeen.com/?p=105
 
ผมอยากได้ประมาณว่า ให้มี marker หลายๆตัว หลายๆสี โชว์ขึ้นมาในตัว map เดียวกันด้วยอ่ะครับ แล้วแยกหมวดหมู่สี marker ด้วย เช่น marker ตัวแรกสีน้ำเงิน มีหลายๆ label เช่น A B C, ตัวที่สอง marker สีน้ำตาล A B C, ตัวที่สาม marker สีเหลือง A B
 
วิธีที่ผมทำคือ สร้าง image object ขึ้นมา แล้วเข้าวนลูป เพื่อจะได้เรียกภาพ marker ที่ผมโหลดมาจากเว็บข้างบน ได้หลายๆตัว หลายๆสี แล้วทีนี้ ผมก็สร้าง array object marker ขึ้นมา 3 ตัว เพื่อจะได้เก็บและแยกสี แต่ละ marker ตามที่ผมยกตัวอย่างไว้ย่อหน้าบน แล้วเอา object 3 ตัวนั้นมาวนลูปแยกกันตามหมวดหมู่สี แต่ผมลองรันโค้ดดู ตัว map ยังไม่ขึ้นอ่ะครับ งงเลย
 
ทีนี้ผมอยากให้ ตอนรันโค้ดขึ้นมาแล้ว ทั้ง map ทั้ง marker ที่เซตไว้ในโค้ด โชว์ขึ้นมาหมดเลยอ่ะครับ และไม่สามารถเลื่อน marker ได้ ส่วนค่า ละติจูด ลองติจูด ผมกำหนดขึ้นมาสุ่มๆในโค้ดเลยครับ อยากลองเทสดูก่อน เพราะตอนจะเอาไปใช้จริง ผมต้องดึงค่า ละติจูด ลองติจูด มาจาก DB อ่ะครับ
 
ช่วยแนะนำหน่อยครับ


vincentva 05-01-2011 04:48
 ความคิดเห็นที่ 3

 ทำได้แล้วครับ ส่วนตรงที่แยก marker เป็นสี

แต่ผมอยากเพิ่มตรงส่วน infowindow อ่ะครับ มันยัง error อยู่ โค้ดผมประมาณนี้อ่ะครับ

var info1 = "<table width='300' border='0' cellspacing='2' cellpadding='0'><tr><td width='10' rowspan='4'><img src='http://www.healthcorners.com/2007/article/img0/icon_1248227106.jpg' width='130' height='80'></td><td width='10'>&nbsp;</td><td width='264'>Package Name</td></tr><tr><td>&nbsp;</td><td>Location </td></tr><tr><td>&nbsp;</td><td>Details</td></tr><tr><td>&nbsp;</td><td><a href='http://www.healthcorners.com/2007/article/img0/icon_1248227106.jpg' target='_blank'>Link</a></td></tr></table>";

แล้วนี่ตอนอยู่ในลูป

//loop for GREEN marker
        for (k = 0; k < 3; k++) {
            image3[k] = new googleMap.MarkerImage("icons/Marker_Green/green_Marker" + k + ".png",
            new googleMap.Size(20.0, 34.0),
            new googleMap.Point(0, 0),
            new googleMap.Point(10.0, 17.0)
            );

            my_Marker3[k] = new googleMap.Marker({ // สร้างตัว marker ไว้ในตัวแปร my_Marker
                position: Glatlng[k],  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                icon: image3[k],
                shadow: shadow
            });

            infowindow3[k] = new googleMap.InfoWindow({
                content: info1
            });

            GGM.event.addListener(my_Marker3[k], 'click', function () { // เมื่อคลิกตัว marker แต่ละตัว
                if (infowindowTmp) { // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
                    infowindow3[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
               }
                infowindow3[k].open(map, my_Marker3[k]); // แสดง infowindow ของตัว marker ที่คลิก
                infowindowTmp = k; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
            });
        }

พอรันโค้ดแล้ว marker ขึ้นไม่ครบ แล้วก็กด infowindow ไม่ได้ด้วยอ่ะครับ ต้องทำยังไงบ้างครับ

ขอบคุณล่วงหน้านะครับ



vincentva 05-01-2011 11:12
 ความคิดเห็นที่ 4

 ลองอัพไฟล์ทดสอบขึ้น server แล้วส่งลิ้งค์มาดู เผื่อแนะนำได้ 

หรือ แทรกตัวอย่างโค้ด หน้านั้นทั้งหน้าลองที่นี้ ก็ได้



Ninenik 05-01-2011
 ความคิดเห็นที่ 5

 นี่โค้ดทั้งหมดครับ

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map API 3 - search and marker</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:550px;
    height:400px;
    /*margin:auto;
    margin-top:50px;*/
}
</style>
 
 
</head>
 
<body>
  <div id="map_canvas"></div>
 
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">
    var geocoder; // the variable for translate the place name to coordinate
    var map;
    var marker;
    var googleMap; // indicate the variable to store the object "google.maps"
    var my_Marker1 = [];
    var my_Marker2 = [];
    var my_Marker3 = [];
    var Rlatlng = [];
    var Blatlng = [];
    var Glatlng = [];
    var image1 = [];
    var image2 = [];
    var image3 = [];
    var i;
    var j;
    var k;
    var infowindow1 = [];
    var infowindow2 = [];
    var infowindow3 = [];
    var infowindowTmp;
 
    function initialize() {
        googleMap = new Object(google.maps);
        geocoder = new googleMap.Geocoder();
 
        var my_Latlng = new googleMap.LatLng(13.9235362, 100.3947116);  // indicate the initial point
        var my_mapTypeId = googleMap.MapTypeId.ROADMAP;  // indicate the pattern of map that represent
         
        var my_DivObj = $("#map_canvas")[0];  // indicate the object that bring the map to represent
         
        var myOptions = {  // indicate initial value of the map
            zoom: 8,
            center: my_Latlng,
            mapTypeId: my_mapTypeId
        };
        map = new googleMap.Map(my_DivObj, myOptions); // build the map
 
        Rlatlng[0] = new googleMap.LatLng(13.9235362, 100.3947116);
        Rlatlng[1] = new googleMap.LatLng(13.6917962, 100.4138746);
        Rlatlng[2] = new googleMap.LatLng(13.7768464, 100.3208549);
        Rlatlng[3] = new googleMap.LatLng(13.7575264, 100.363692);
        Rlatlng[4] = new googleMap.LatLng(13.7783653, 100.4550477);
 
        Blatlng[0] = new googleMap.LatLng(13.7559862, 100.6460058);
        Blatlng[1] = new googleMap.LatLng(13.8129355, 100.7316899);
        Blatlng[2] = new googleMap.LatLng(13.745718, 100.5365898);
        Blatlng[3] = new googleMap.LatLng(13.7781968, 100.508353);
 
        Glatlng[0] = new googleMap.LatLng(13.2017461, 101.2523792);
        Glatlng[1] = new googleMap.LatLng(12.9275, 100.8752778);
        Glatlng[2] = new googleMap.LatLng(13.2845548, 100.9151211);
 
 
        var info1 = "<table width='300' border='0' cellspacing='2' cellpadding='0'><tr><td width='10' rowspan='4'><img src='http://www.healthcorners.com/2007/article/img0/icon_1248227106.jpg' width='130' height='80'></td><td width='10'>&nbsp;</td><td width='264'>Package Name</td></tr><tr><td>&nbsp;</td><td>Location </td></tr><tr><td>&nbsp;</td><td>Details</td></tr><tr><td>&nbsp;</td><td><a href='http://www.healthcorners.com/2007/article/img0/icon_1248227106.jpg' target='_blank'>Link</a></td></tr></table>";
 
 
//        infowindow3[1] = new googleMap.InfoWindow({
//            content: "<table width='300' border='0' cellspacing='2' cellpadding='0'><tr><td width='10' rowspan='4'><img src='http://1.bp.blogspot.com/_CSZstFROFUg/S_yE5by5vgI/AAAAAAAAAPM/-mQXh6zcTzQ/s1600/pattaya-02.jpg' width='130' height='80'></td><td width='10'>&nbsp;</td><td width='264'>Package Name</td></tr><tr><td>&nbsp;</td><td>Location </td></tr><tr><td>&nbsp;</td><td>Details</td></tr><tr><td>&nbsp;</td><td><a href='http://beachresortpattaya.blogspot.com/' target='_blank'>Link</a></td></tr></table>"
//        });
 
//        infowindow3[2] = new googleMap.InfoWindow({
//            content: "<table width='300' border='0' cellspacing='2' cellpadding='0'><tr><td width='10' rowspan='4'><img src='http://www.moohin.com/database/pic/059/bangsan.jpg' width='130' height='80'></td><td width='10'>&nbsp;</td><td width='264'>Package Name</td></tr><tr><td>&nbsp;</td><td>Location </td></tr><tr><td>&nbsp;</td><td>Details</td></tr><tr><td>&nbsp;</td><td><a href='http://www.moohin.com/059/059h002.shtml' target='_blank'>Link</a></td></tr></table>"
//        });
         
         
        var shadow = new googleMap.MarkerImage("icons/Marker_Red/shadow.png",
        new googleMap.Size(38.0, 34.0),
        new googleMap.Point(0, 0),
        new googleMap.Point(10.0, 17.0)
        );
 
//        my_Marker1[] = new googleMap.Marker();
//        my_Marker2[] = new googleMap.Marker();
//        my_Marker3[] = new googleMap.Marker();
 
        //loop for RED marker
        for(i=0; i<5; i++){
            image1[i] = new googleMap.MarkerImage("icons/Marker_Red/red_Marker"+i+".png",
            new googleMap.Size(20.0, 34.0),
            new googleMap.Point(0, 0),
            new googleMap.Point(10.0, 17.0)
            );
 
            my_Marker1[i] = new googleMap.Marker({ // สร้างตัว marker ไว้ในตัวแปร my_Marker
            position: Rlatlng[i],  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
            map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
            icon: image1[i],
            shadow: shadow,
            title: "Click to view info"
        });
        }
 
        //loop for BLUE marker
        for(j=0; j<4; j++){
            image2[j] = new googleMap.MarkerImage("icons/Marker_Blue/blue_Marker"+j+".png",
            new googleMap.Size(20.0, 34.0),
            new googleMap.Point(0, 0),
            new googleMap.Point(10.0, 17.0)
            );
 
            my_Marker2[j] = new googleMap.Marker({ // สร้างตัว marker ไว้ในตัวแปร my_Marker
            position: Blatlng[j],  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
            map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
            icon: image2[j],
            shadow: shadow,
            title: "Click to view info"
        });
        }
 
        //loop for GREEN marker
        for (k = 0; k < 3; k++) {
            image3[k] = new googleMap.MarkerImage("icons/Marker_Green/green_Marker" + k + ".png",
            new googleMap.Size(20.0, 34.0),
            new googleMap.Point(0, 0),
            new googleMap.Point(10.0, 17.0)
            );
 
            my_Marker3[k] = new googleMap.Marker({ // สร้างตัว marker ไว้ในตัวแปร my_Marker
                position: Glatlng[k],  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                icon: image3[k],
                shadow: shadow,
                title: "Click to view info"
            });
 
            infowindow3[k] = new googleMap.InfoWindow({
                content: info1
            });
 
            GGM.event.addListener(my_Marker3[k], 'click', function () { // เมื่อคลิกตัว marker แต่ละตัว
                if (infowindowTmp) { // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
                    infowindow3[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
                }
                infowindow3[k].open(map, my_Marker3[k]); // แสดง infowindow ของตัว marker ที่คลิก
                infowindowTmp = k; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
            });
        }
 
      }
 
 
      $(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=en&callback=initialize"
        }).appendTo("body");
    });
 
 
</script>
</body>
</html>

 



vincentva 05-01-2011 12:01
 ความคิดเห็นที่ 6

 เท่าที่ดูรูปแบบที่พยามยามจะทำ น่าจะยาก ต้องเข้าใจการใช้งาน Google  Map พอสมควร

 
ลองเอาแนวทาง ตัวอย่างต่อไปนี้ ไปประยุกต์เพิ่มเติมดู 
 
ตัวอย่าง
 
โค้ดตัวอย่าง
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map API 3 - search and marker</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:550px;
    height:400px;
    /*margin:auto;
    margin-top:50px;*/
}
</style>
 
 
</head>
 
<body>
  <div id="map_canvas"></div>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    var geocoder; // the variable for translate the place name to coordinate
    var map;
    var marker;
    var GGM; // indicate the variable to store the object "google.maps"
    var my_Marker = [];
    var Rlatlng = [];
    var Blatlng = [];
    var Glatlng = [];
    var image1 = [];
    var image2 = [];
    var image3 = [];
    var i;
    var j;
    var k;
    var infowindow= [];
    var infowindowTmp;
 
    var char=["A","B","C","D","E"];
    var nub_info=1;
    function initialize() {
        GGM = new Object(google.maps);
        geocoder = new GGM.Geocoder();
 
        var my_Latlng = new GGM.LatLng(13.7559862, 100.6460058);  // indicate the initial point
        var my_mapTypeId = GGM.MapTypeId.ROADMAP;  // indicate the pattern of map that represent
         
        var my_DivObj = $("#map_canvas")[0];  // indicate the object that bring the map to represent
         
        var myOptions = {  // indicate initial value of the map
            zoom: 10,
            center: my_Latlng,
            mapTypeId: my_mapTypeId
        };
        map = new GGM.Map(my_DivObj, myOptions); // build the map
 
        Rlatlng[0] = new GGM.LatLng(13.9235362, 100.3947116);
        Rlatlng[1] = new GGM.LatLng(13.6917962, 100.4138746);
        Rlatlng[2] = new GGM.LatLng(13.7768464, 100.3208549);
        Rlatlng[3] = new GGM.LatLng(13.7575264, 100.363692);
        Rlatlng[4] = new GGM.LatLng(13.7783653, 100.4550477);
 
        Blatlng[0] = new GGM.LatLng(13.7559862, 100.6460058);
        Blatlng[1] = new GGM.LatLng(13.8129355, 100.7316899);
        Blatlng[2] = new GGM.LatLng(13.745718, 100.5365898);
        Blatlng[3] = new GGM.LatLng(13.7781968, 100.508353);
 
        Glatlng[0] = new GGM.LatLng(13.2017461, 101.2523792);
        Glatlng[1] = new GGM.LatLng(12.9275, 100.8752778);
        Glatlng[2] = new GGM.LatLng(13.2845548, 100.9151211);
 
 
        var info1 = "<table width='300' border='0' cellspacing='2' cellpadding='0'><tr><td width='10' rowspan='4'><img src='http://www.healthcorners.com/2007/article/img0/icon_1248227106.jpg' width='130' height='80'></td><td width='10'>&nbsp;</td><td width='264'>Package Name</td></tr><tr><td>&nbsp;</td><td>Location </td></tr><tr><td>&nbsp;</td><td>Details</td></tr><tr><td>&nbsp;</td><td><a href='http://www.healthcorners.com/2007/article/img0/icon_1248227106.jpg' target='_blank'>Link</a></td></tr></table>";
 
       
         
        var shadow = new GGM.MarkerImage("icons/Marker_Red/shadow.png",
        new GGM.Size(38.0, 34.0),
        new GGM.Point(0, 0),
        new GGM.Point(10.0, 17.0)
        );
 
 
        //loop for RED marker
        for(i=0; i<5; i++){
            image1[i] = new GGM.MarkerImage("icons/Marker_Red/red_Marker"+char[i]+".png",
            new GGM.Size(20.0, 34.0),
            new GGM.Point(0, 0),
            new GGM.Point(10.0, 17.0)
            );
 
            my_Marker[nub_info] = new GGM.Marker({ // สร้างตัว marker ไว้ในตัวแปร my_Marker
                position: Rlatlng[i],  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                icon: image1[i],
       //         shadow: shadow,
                title: "Click to view info"
            });
             
            infowindow[nub_info] = new GGM.InfoWindow({
                content: info1
            });
             
 
            GGM.event.addListener(my_Marker[nub_info], 'click', function () { // เมื่อคลิกตัว marker แต่ละตัว
                if (infowindowTmp) { // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
                    infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
                }
                infowindow[this.__gm_id].open(map, this); // แสดง infowindow ของตัว marker ที่คลิก
                infowindowTmp = this.__gm_id; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
            });
                nub_info++;    
        }
 
        //loop for BLUE marker
        for(j=0; j<4; j++){
            image2[j] = new GGM.MarkerImage("icons/Marker_Blue/blue_Marker"+char[j]+".png",
            new GGM.Size(20.0, 34.0),
            new GGM.Point(0, 0),
            new GGM.Point(10.0, 17.0)
            );
 
            my_Marker[nub_info] = new GGM.Marker({ // สร้างตัว marker ไว้ในตัวแปร my_Marker
                position: Blatlng[j],  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                icon: image2[j],
       //         shadow: shadow,
                title: "Click to view info"
            });
            infowindow[nub_info] = new GGM.InfoWindow({
                content: info1
            });
             
 
            GGM.event.addListener(my_Marker[nub_info], 'click', function () { // เมื่อคลิกตัว marker แต่ละตัว
                if (infowindowTmp) { // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
                    infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
                }
                infowindow[this.__gm_id].open(map, this); // แสดง infowindow ของตัว marker ที่คลิก
                infowindowTmp = this.__gm_id; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
            });
             
            nub_info++;    
        }
         
 
        //loop for GREEN marker
        for (k = 0; k < 3; k++) {
            image3[k] = new GGM.MarkerImage("icons/Marker_Green/green_Marker" + char[k] + ".png",
                new GGM.Size(20.0, 34.0),
                new GGM.Point(0, 0),
                new GGM.Point(10.0, 17.0)
            );
 
            my_Marker[nub_info] = new GGM.Marker({ // สร้างตัว marker ไว้ในตัวแปร my_Marker
                position: Glatlng[k],  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                icon: image3[k],
   //             shadow: shadow,
                title: "Click to view info"
            });
 
            infowindow[nub_info] = new GGM.InfoWindow({
                content: info1
            });
             
 
            GGM.event.addListener(my_Marker[nub_info], 'click', function () { // เมื่อคลิกตัว marker แต่ละตัว
                if (infowindowTmp) { // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่
                    infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่
                }
                infowindow[this.__gm_id].open(map, this); // แสดง infowindow ของตัว marker ที่คลิก
                infowindowTmp = this.__gm_id; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน
            });
            nub_info++;    
        }
 
 
 
 }
 
 
 
 
      $(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=en&callback=initialize"
        }).appendTo("body");
    });
 
 
</script>
</body>
</html>
 


Ninenik 05-01-2011
 ความคิดเห็นที่ 7

 ทำได้แล้วครับ แต่งงอยู่บางจุด ขอสอบถามหน่อยนะครับ

- โค้ดนี่คืออะไรหรอครับ >> this.__gm_id

- ทำไมเราต้องสร้างตัวแปร nub_info=1 ด้วยหรอครับ ใช้ตัวนับ i, j, k ในแต่ละลูปไม่ได้หรอครับ

ขอบคุณสำหรับคำตอบล่วงหน้าครับ ^^



vincentva 05-01-2011 16:30
 ความคิดเห็นที่ 8

 nub_info สร้างไว้สำหรับใช้งานควบคุม การทำงานของตัว marker 

สามารถใช้ ตัว i, j, k ได้ แต่จะยากตอนเราเรียกใช้งาน ตัว marker  อันนี้เลือกได้ตามความสะดวก
ส่วน  this.__gm_id เป็นค่า object ในตัว marker จะระบุว่าเป็นตัว marker ตัวที่เท่าไหร่ในแผนที่
 
ปล.วิธีการที่แนะนำ เป็นแค่เพียงบางส่วน อาจมีวิธีการที่ดีกว่า หรือง่ายกว่านี้ ลองค้นหาเพิ่มเติมจาก google
แล้วสามารถนำมาแนะนำที่เว็บบอร์ดนี้ได้


Ninenik 05-01-2011
1







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