เนื้อหาต่อไปนี้ เป็นส่วนต่อเนื้องจาก หัวข้อ
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> |