อยากจะขอแนวทาง การดัดแปลง Code Goggle Map ในเรื่อง Info windows ครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากจะขอแนวทาง การดัดแปลง Code Goggle Map ในเรื่อง Info windows ครับ

อยากจะขอแนวทาง การดัดแปลง Code Goggle Map ในเรื่อง Info windows ครับ

อยากจะขอแนวทาง การดัดแปลง Code Goggle Map ในเรื่อง Info windows ครับ พอดีผมอยากเขียนโค้ดที่เอาทั้ง 2 ตัวอย่างCode ที่คุณ ninenik แบ่งปันไว้ มาดักแปลงใช้งานรวมกันครับ ผมลองทำแล้วแต่ไม่สำเร็จ ยังไงก็อยากจะขอคำชี้แนะครับ

นี้คือตัวอย่างภาพ ครับ

ผมเอา code ของ https://www.ninenik.com/content.php?arti_id=328 และ https://www.ninenik.com/content.php?arti_id=350 มาลองประยุกต์ใช้ร่วมกัน คือวัตถุประสงค์ของผมคือ ต้องการโฆษนา ขายที่ดิน แล้วถ้าผม Click ที่รายละเอียดของที่ดินๆที่ต้องการดูข้อมูลก็กด click ที่แถบ Link ด้านขวามือ แล้วให้มันแสดง Infowindows ขึ้นมา แบบตามภาพ แต่ที่ผมแสดงข้อมูลออกมามันทำได้แค่การ Link หาข้อมูล เพียงหน้าเดียว คือผมอยากให้มันแสดง info windows ที่เป็นของหน้ารายละเอียดที่ดินของแต่ละที่ดินที่เลือกครับ แต่ที่ทำได้ตอนนี้ คือมันแสดงinfo windows เหมือนกันหมด ผมอยากจะขอคำชี้แนะจากพี่ๆด้วยครับ ผมควรแก้ไขCode ยังไงดี ถึงจะออกมาเป็นตามที่ผมต้องการ ขอบคุณมากๆๆครับ

Forkawasaki 11-12-2011 13:41:59

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

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

code ของผม มีดังนี้ครับ

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

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</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 สำหรับ div คลุมGridViewAccident อีกที */
#GridViewAccident {
    position:relative;
    width:600px;
    height:900px;
    margin:auto;
    margin-top:20px;
    overflow:hidden;
/*  background-color:#FC6;*/
}
/* 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>
    <form id="form1" runat="server">
    <div>
 <div id="contain_map" style="left: 0px; width: 789px; top: 0px">
  <div id="map_canvas" style="width: 462px"></div>
  <div id="side_bar" style="left: 0px; width: 326px; top: 2px">
        <ul id="navigator_link">
        </ul>
  </div>
</div> 
         
<script type="text/javascript" src="JS/jquery-latest.min.js"></script>        
    <script type="text/javascript">
    var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array
var my_Marker2; // กำหนดตัวแปรสำหรับเก็บตัว marker
var my_Marker3; // กำหนดตัวแปรสำหรับเก็บตัว marker
var my_Marker4; // กำหนดตัวแปรสำหรับเก็บตัว marker
var my_Marker5; // กำหนดตัวแปรสำหรับเก็บตัว marker
var my_Marker6; // กำหนดตัวแปรสำหรับเก็บตัว marker
var infowindow2; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindow3; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindow4; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindow5; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var infowindow6; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
    // กำหนดจุดเริ่มต้นของแผนที่
    var my_Latlng  = new GGM.LatLng(13.521251296714565,100.25057509908356);
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
    var my_DivObj=$("#map_canvas")[0]; 
    // กำหนด Option ของแผนที่
    var myOptions = {
        zoom: 14, // กำหนดขนาดการ zoom
        center: my_Latlng , // กำหนดจุดกึ่งกลาง
        mapTypeId:GGM.MapTypeId.SATELLITE, // กำหนดรูปแบบแผนที่
        mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
            position:GGM.ControlPosition.TOP_RIGHT, // จัดตำแหน่ง
            style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style 
        }
    };
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
 
 
    $.ajax({
        url:"XmlMark/IsosXmlMarkAu.xml", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml 
        dataType: "xml",
        success:function(xml){
            $(xml).find('Table').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker  
                var markerID=$(this).find("G_AuID").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                var markerG_AuName=$(this).find("G_AuName").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
                var markerG_AuAddress=$(this).find("G_AuAddress").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
                var markerG_AuDetail=$(this).find("G_AuDetail").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                var markerG_See=$(this).find("G_AuProvince").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
                var markerG_Tel=$(this).find("G_AuCarCompanyName").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
                var markerLat=$(this).find("G_AuLatitude").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน    
                var markerLng=$(this).find("G_AuLongitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน  
                var markerdistance=$(this).find("distance").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน  
                var markerLink=$(this).find("Link").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน 
  
                // ส่วนสำหรับสร้างลิ้งค์ใน sidebar
                var navi_link="<li><a href='javascript:showInfo("+i+")'>"+markerG_AuName+' <br>  '+'  <br>  '+markerG_AuAddress+' <br>  '+markerG_AuDetail+'<br>'+markerG_See+'<br> ระยะห่างจากจุดเกิดเหตุ  '+markerdistance+'<br>'+markerG_Tel+'<br>'+markerLink+'<br> .............................................................................'+' <br> '+'<br>'+"</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:markerG_AuName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                });
                 
                //Info 2
                var markerLatLng2=new GGM.LatLng(13.529103454672098,100.25309101113953);
                my_Marker2 = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
                    position:markerLatLng2,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                    title:markerG_AuName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                });
                 
                    //Info 3
                var markerLatLng3=new GGM.LatLng(13.52348101251885,100.25282279023804);
                my_Marker3 = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
                    position:markerLatLng3,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                    title:markerG_AuName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                });
                 
                //Info 4
                var markerLatLng4=new GGM.LatLng(13.518943323290766,100.24491563806214);
                my_Marker4 = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
                    position:markerLatLng4,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                    title:markerG_AuName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                });
                                //Info 5
                var markerLatLng5=new GGM.LatLng(13.515772105272134,100.24905696878113);
                my_Marker5 = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
                    position:markerLatLng5,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                    title:markerG_AuName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                });
                //Info 6
                var markerLatLng6=new GGM.LatLng(13.51232961690261,100.2468897438971);
                my_Marker6 = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array
                    position:markerLatLng6,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
                    title:markerG_AuName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                });
                //  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
                infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
 
        content:$.ajax({
            url:'ReadMoreMap.aspx',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
            async:false
        }).responseText
    });
                 
                //  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
                //infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
                //  content:my_Marker[i].getTitle()
                //  });
                 
    infowindow2 = new GGM.InfoWindow({
        content:$.ajax({
            url:'ReadMoreMap.aspx',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
            async:false
        }).responseText
    });
        infowindow3 = new GGM.InfoWindow({
        content:$.ajax({
            url:'ReadMoreMap.aspx',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
            async:false
        }).responseText
    });
            infowindow4 = new GGM.InfoWindow({
        content:$.ajax({
            url:'ReadMoreMap.aspx',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
            async:false
        }).responseText
    });
            infowindow5 = new GGM.InfoWindow({
        content:$.ajax({
            url:'ReadMoreMap.aspx',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
            async:false
        }).responseText
    });
            infowindow6 = new GGM.InfoWindow({
        content:$.ajax({
            url:'ReadMoreMap.aspx',//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
            async:false
        }).responseText
    });
 
//              //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง
//              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 ที่เปิดไว้อ้างอิงใช้งาน
 
 
                });     
                 
                     
                 //GGM.event.addListener(map, 'tilesloaded', function() {   
       // infowindow2.open(map,my_Marker2); // ให้แสดง infowindows รายละเอียดสถานที่ ทุกครั้งที่โหลดแผนที่แล้ว   
       // infowindow3.open(map,my_Marker3); // ให้แสดง infowindows รายละเอียดสถานที่ ทุกครั้งที่โหลดแผนที่แล้ว     
 // infowindow4.open(map,my_Marker4);
 // infowindow5.open(map,my_Marker5);
 // infowindow6.open(map,my_Marker6);
  //  });   
   // จบ
 
                         
            });
        }   
    });     
 
     
}
// ส่วนของฟังก์ชันที่เรียกใช้งานจากลิ้งค์ เพื่อแสดง 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> 
    </div>
    </form>
</body>
</html>

forkawasaki 11-12-2011 13:46

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

ได้แล้วครับ ขอบคุณมากครับ

ผมใช้วิธีนี้ครับ ก็ดึง i แล้วเรียก หา ReadMoreMap"+i+".aspx ก็จะได้ ReadMoreMap0.aspx ถึง ReadMoreMap5.aspx ผมมีอยู่ หน้าขายที่ดิน อยู่ 6 ที่ ก็จะได้ Array 0-5 ผมใช้วิธีสร้างหน้า ReadMoreMap0.aspx ถึง ReadMoreMap5.aspx เอางับ ^_^ ยังไงก็ขอบคุณมากครับ

//  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง
                infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array
 
        content:
 
        $.ajax({
            url:"ReadMoreMap"+i+".aspx",//ใช้ ajax ใน jQuery ดึงข้อมูลจากไฟล์ placeDetail.php มาแสดง
            async:false
        }).responseText
    });

forkawasaki 11-12-2011 16:45

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

เก่งจังเลยครับผม ไม่ทราบว่าจะพอช่วยแนะนำผมได้บ้างหรือป่าวครับ

คือ ผมลอง

สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์ ดู

จากอันนี้ครับ https://www.ninenik.com/content.php?arti_id=336 แต่ไม่เห็นมันจะมีอะไรขึ้นเลยครับ ผม อยากทราบว่าเราต้องสร้างฐานข้อมูลด้วยหรือป่าวครับ แล้วถ้าเราจะสร้าง มันต้องกำหนดยังไงบ้างอะครับผม รบกวนด้วยครับช่วยชี้แนะผมหน่อย

ผมลองเอาไปลงดู หน้า genmarker.php มันขึ้นแบบนี้ครับ

This page contains the following errors:

error on line 1 at column 1: Document is empty

Below is a rendering of the page up to the first error.

Kron Kuluna 26-01-2012 21:46

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

ขอโค้ด XmlMark/IsosXmlMarkAu.xml ด้วยได้ไหมค่ะคุณ Forkawasaki

ZatocksEii ComSci 27-03-2012 16:33

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

ไม่เห็นอะไรเกิดขึ้นเลย ขอไฟล์ดึงฐานข้อมูลหน่อย

ต้น โชคติกุล 30-09-2012 15:19

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

วิธีสร้างหน้า ReadMoreMap0.aspx ต้องทำอย่างไรคะ รบกวนด้วยค่ะ

kukiis 21-04-2013 14:19

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

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

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