ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C#

by
Post Views: 3,551

      การพัฒนาเว็บไซต์ในปัจจุบัน พบว่ามีบางเว็บไซต์มีความต้องการในการแสดงผลตำแหน่ง ที่ตั้งบนแผนที่ Google map เพื่ออำนวยความสะดวกให้กับผู้เยี่ยมชมเว็บไซต์ในการค้นหาตำแหน่งที่ตั้งของสถานที่นั้นๆมากกว่าการบอกเพียงที่อยู่อย่างเช่นแต่ก่อน อาธิเช่น เว็บไซต์ที่เป็นศูนย์รวมในการจองที่พัก ที่มีความจำเป็นต้องแสดงที่ตั้งของโรงแรมที่มีในบริเวณหรือละแวกนั้นๆที่เข้ามาร่วมให้ข้อมูลกับเว็บไซต์ในการจองที่พัก หรือแม้กระทั่งโรงพยาบาล ห้างสรรพสินค้า โรงเรียน มหาวิทยาลัย ที่เว็บไซต์ต้องการแสดงที่ตั้งเพื่อให้ผู้เยี่ยมชมเว็บไซต์สามารถทราบได้ว่าสถานที่เหล่านั้นมีที่ตั้งอยู่ในบริเวณใดบ้าง เพื่อเป็นประโยชน์ให้ผู้ที่เข้ามาเยี่ยมชมเว็บไซต์สามารถเรียกดูได้จากแผนที่เพื่อศึกษาเส้นทาง หรือหาตำแหน่งที่จะสามารถไปยังจุดนั้นๆได้โดยง่ายและใช้ระยะทางใกล้ที่สุดนั่นเอง
      ในบทความนี้ ผู้เขียนจึงขอพูดถึงวิธีการแสดงผลตำแหน่งที่ตั้งบน Google map ซึ่งมีทั้งแบบกำหนดตายตัว โดยมีการระบุตำแหน่งที่ตั้งทั้งละติจูดและลองจิจูด และแบบที่มีการดึงค่าของละติจูดและลองจิจูดมาจากฐานข้อมูลของเว็บไซต์ที่พัฒนาโดยใช้เครื่องมือ ASP.NET ด้วย C# และแบบที่มีการกำหนดจุดแสดงตำแหน่งเพียงจุดเดียวและหลายจุดพร้อมกัน เพื่อประโยชน์กับนักพัฒนาท่านอื่นๆที่มีความสนใจสามารถนำไปประยุกต์ใช้กับเว็บไซต์ของตนได้

      โดยผู้เขียนขอเสนอวิธีการเบื้องต้นในการแสดงผลแบบกำหนดค่าตายตัวให้ผู้อ่านลองศึกษาการทำงานเพื่อทำความเข้าใจในเบื้องต้นก่อน ดังนี้

การแสดงผลแบบจุดเดียว

  1. อ้างอิงพาธที่ตั้งของ Google API ซึ่งเป็นส่วนหนึ่งของการแสดงผลบนแผนที่ Google map และไฟล์จาวาสคริปต์ที่ใช้ในการแสดงผล(ถ้ามี)
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 
<script src="js/mapwithmarker.js" type="text/javascript"></script>
  1. กำหนดสไตล์ชีทที่ใช้ในการแสดงผล เมื่อมีการคลิกตำแหน่งที่ได้ทำการกำหนดพิกัดไว้
<style type="text/css">  
.labels { color: black; background-color: #FF8075; font-family: Arial; font-size: 11px; font-weight: bold; text-align: center; width: 12px; }  </style>
  1. กำหนดพิกัดที่ต้องการให้แผนที่ค้นหาจุดกึ่งกลางของการแสดงผล ซึ่งโดยปกติจะถือเอาจุดแรกที่ต้องการแสดงเป็นตำแหน่งกึ่งกลางของการแสดงผลตำแหน่งบนแผนที่นั้นๆ เพื่อให้ตำแหน่งดังกล่าวอยู่กึ่งกลางของแผนที่ที่ต้องการแสดงนั่นเอง
var mapOptions = {  
center: new google.maps.LatLng(ค่าละติจูด, ค่าลองจิจูด),  
zoom: 12, 
///ขนาดที่ต้องการให้ซูมเป็นค่าตั้งต้น  
mapTypeId: google.maps.MapTypeId.ROADMAP  };
  1. กำหนดส่วนที่ต้องการให้แสดงแผนที่ ว่าต้องการให้แสดงในส่วนใดของเว็บไซต์
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
 ///ในที่นี้พื้นที่ที่ต้องการให้แสดงผลในเว็บไซต์ คือ dvMap โดยนำค่าที่กำหนดกึ่งกลางไว้ในขั้นตอนที่ 3 (mapOptions) มาเป็นค่าพารามิเตอร์ในการแสดงผลด้วย
  1. การกำหนดจุดพิกัดที่ต้องการแสดงผล ซึ่งค่าที่ต้องการคือ ชื่อสถานที่ ค่าละติจูด ลองจิจูด และคำอธิบายในการแสดงผลตำแหน่งสถานที่ที่เราทำการกำหนดไว้ ดังนี้
    • กำหนดค่าพิกัดลองจิจูดและละติจูดของจุดที่เราต้องการกำหนดบนแผนที่
    var infoWindow = new google.maps.InfoWindow();
 var myLatlng = new google.maps.LatLng(ค่าละติจูด, ค่าลองจิจูด);
    • กำหนดค่าพิกัดตำแหน่งของจุดและพารามิเตอร์ต่างๆที่จำเป็นต้องใช้ในการกำหนดจุดที่เราต้องการกำหนดบนแผนที่
    var marker = new MarkerWithLabel({
 position: myLatlng, //เป็นการกำหนดค่าพิกัดตำแหน่งของจุดที่เราต้องการกำหนดบนแผนที่
 map: map, //เป็นการกำหนดพื้นที่ที่ต้องการแสดงแผนที่ ในที่นี้คือ dvMap
 title: title, //เป็นการกำหนดชื่อสถานที่
 labelContent:1,  //เป็นการกำหนดหมายเลขลำดับของตำแหน่งแสดงผล
 labelAnchor: new google.maps.Point(7, 30),
 labelClass: "labels", //เป็นการกำหนดรูปแบบในการแสดงผลด้วยสไตล์ชีท
 labelInBackground: false
 });
    • กำหนดการแสดงผลเมื่อผู้เยี่ยมชมมีการคลิกบนจุดดังกล่าว
    (function(marker) {
 google.maps.event.addListener(marker, "click", function(e) {
 infoWindow.setContent(description);
 //เป็นการกำหนดข้อความที่ต้องการแสดง เมื่อผู้เยี่ยมชมเว็บไซต์คลิกบนจุดดังกล่าว
 infoWindow.open(map, marker);
 });
 })(marker);
  1. สร้างพื้นที่ที่กำหนดการแสดงผลในส่วน body
<div id="dvMap" style="width: 800px; height: 700px;">
 </div>
  1. แสดง code ทั้งหมดที่ใช้
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 <!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 runat="server">
 <title>Google map Test for one point</title>
 <style type="text/css">
 .labels { color: black; background-color: #FF8075; font-family: Arial; font-size: 11px; font-weight: bold; text-align: center; width: 12px; }
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script src="js/mapwithmarker.js" type="text/javascript"></script>
 <script type="text/javascript">
 window.onload = function() {
 var mapOptions = {
 center: new google.maps.LatLng(7.006923, 100.500238),
 zoom: 12,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
 var infoWindow = new google.maps.InfoWindow();
 var myLatlng = new google.maps.LatLng(7.006923, 100.500238);
 var marker = new MarkerWithLabel({
 position: myLatlng,
 map: map,
 title: 'มหาวิทยาลัยสงขลานครินทร์',
 labelContent: 1,
 labelAnchor: new google.maps.Point(7, 30),
 labelClass: "labels", // the CSS class for the label
 labelInBackground: false
 });
 (function(marker ) {
 google.maps.event.addListener(marker, "click", function(e) {
 infoWindow.setContent('มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตหาดใหญ่');
 infoWindow.open(map, marker);
 });
 })(marker );
 }
 </script>
 </head>
 <body>
 <form id="form1" runat="server">
 <div id="dvMap" style="width: 800px; height: 700px;">
 </div>
 </form>
 </body>
 </html>

ตัวอย่างภาพผลลัพธ์ที่ได้ :
Map1point

แบบหลายจุดและดึงค่าละติจูด ลองจิจูดจากฐานข้อมูลมาแสดงผล

โดยลักษณะการเขียนจะคล้ายๆกับแบบกำหนดจุดเพียงจุดเดียวอย่างที่กล่าวไว้แล้วในตอนต้น แต่จะแตกต่างกันในส่วนของการดึงข้อมูล ซึ่งจะเน้นเฉพาะส่วนที่แตกต่าง และแสดง code สรุปรวมให้ดูอีกครั้ง

ไฟล์ default.aspx ในฝั่ง Client

  1. กำหนดค่าตัวแปรที่ใช้ในแสดงผลจาก Repeater ซึ่งเป็นเครื่องมือที่มีอยู่แล้วใน .NET โดยตัวแปรที่จะใช้ที่นี้ให้มีชื่อว่า markers และค่าที่ต้องการนำมาใช้จะเป็นฟิลด์ของ Name, Latitude, Longitude และ Description ซึ่งดึงมาจากฐานข้อมูล(โดยชื่อฟิลด์สามารถเปลี่ยนแปลงได้ตามข้อมูลที่มีอยู่จริงในฐานข้อมูลของแต่ละท่าน) 
    <script type="text/javascript">
 var markers = [
 <asp:Repeater ID="rptMarkers" runat="server">
 <ItemTemplate>
 {
 "title": '<%# Eval("Name") %>',
 "lat": '<%# Eval("Latitude") %>',
 "lng": '<%# Eval("Longitude") %>',
 "description": '<%# Eval("Description") %>'
 }
 </ItemTemplate>
 <SeparatorTemplate>
 ,
 </SeparatorTemplate>
 </asp:Repeater>
 ];
 </script>
  2. กำหนดพิกัดที่ต้องการให้แผนที่ค้นหาจุดกึ่งกลางของการแสดงผล ซึ่งโดยปกติจะถือเอาจุดแรกที่ต้องการแสดงเป็นตำแหน่งกึ่งกลางของการแสดงผลตำแหน่งบนแผนที่นั้นๆ เพื่อให้ตำแหน่งดังกล่าวอยู่กึ่งกลางของแผนที่ที่ต้องการแสดงนั่นเอง 
    var mapOptions = {
 center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
 zoom: 8,
 mapTypeId: google.maps.MapTypeId.ROADMAP};
  3. กำหนดค่าต่างๆ และวนค่าตัวแปร markers ที่ดึงมาจากฐานข้อมูลและตัว Repeater ที่กล่าวไว้ในข้างต้น และทำการกำหนดค่าต่างๆให้กับแต่ละจุดที่ต้องการ โดยรายละเอียดในการกำหนดค่าจะคล้ายกับวิธีกำหนดแบบจุดเดียว(แบบแรก) แต่จะมีการวนซ้ำให้ครบจำนวนตัวแปรที่ดึงมาจากฐานข้อมูล 
    var infoWindow = new google.maps.InfoWindow();
 var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
 for (i = 0; i < markers.length; i++) {
 //เป็นการวนค่าตัวแปร markers ที่ดึงมาจากฐานข้อมูลและตัว Repeater ที่กล่าวไว้ในข้างต้น

  var data = markers[i]
 //นำค่าจากตัวแปร markers  ที่ดึงมาทีละรายการตามลำดับมาใส่ไว้ในตัวแปร data เพื่อนำไปใช้ในการกำหนดค่าต่อไป
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
 //กำหนดค่าละติจูดและลองจิจูด
var marker = new MarkerWithLabel({
 position: myLatlng, //เป็นการกำหนดตำแหน่งที่ต้องการแสดงผล
map: map,
 title: data.title, //เป็นการกำหนดชื่อที่ต้องการแสดงผลเมื่อนำเมาส์ไปชี้ยังจุดดังกล่าว
labelContent: i+1, //เป็นการกำหนดหมายเลขลำดับให้กับจุดดังกล่าว
 labelAnchor: new google.maps.Point(7, 30),
 labelClass: "labels", // the CSS class for the label
 labelInBackground: false}
 );(function (marker, data) {google.maps.event.addListener(marker, "click", function (e) {
 infoWindow.setContent(data.description);
 //เป็นการกำหนดข้อความที่ต้องการแสดง เมื่อผู้เยี่ยมชมเว็บไซต์คลิกบนจุดดังกล่าว
infoWindow.open(map, marker);
 });
 })(marker, data);
 }
  4. Code ทั้งหมดในฝั่งไฟล์ Default.aspx 
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
 <title></title>
 </head>
 <body>
 <form id="form1" runat="server">
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><script src="js/mapwithmarker.js" type="text/javascript"></script>
<script type="text/javascript">
 var markers = [
 <asp:Repeater ID="rptMarkers" runat="server">
 <ItemTemplate>
 {
 "title": '<%# Eval("Name") %>',
 "lat": '<%# Eval("Latitude") %>',
 "lng": '<%# Eval("Longitude") %>',
 "description": '<%# Eval("Description") %>'
 }
 </ItemTemplate>
 <SeparatorTemplate>
 ,
 </SeparatorTemplate>
 </asp:Repeater>
 ];
 </script>
 <script type="text/javascript">
 window.onload = function() {
 var mapOptions = {
 center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
 zoom: 8,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var infoWindow = new google.maps.InfoWindow();
 var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
 var j = 1;
 for (i = 0 ; i <= markers.length-1; i++) {
 var data = markers[i]
 var myLatlng = new google.maps.LatLng(data.lat, data.lng);
 // var marker = new google.maps.Marker({
 var marker = new MarkerWithLabel({
 position: myLatlng,
 map: map,
 title: data.title,
 labelContent: i+1,
 labelAnchor: new google.maps.Point(7, 30),
 labelClass: "labels", // the CSS class for the label
 labelInBackground: false
 });
 (function(marker, data) {
 google.maps.event.addListener(marker, "click", function(e) {
 infoWindow.setContent(data.description);
 infoWindow.open(map, marker);
 });
 })(marker, data);
 }
 }
 </script>
 <div id="dvMap" style="width: 500px; height: 500px">
 </div>
 </form>
 </body>
 </html>

 

ไฟล์ default.cs ในฝั่ง server

using System;
 using System.Collections.Generic;
 using System.Web;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 using System.Data;public partial class _Default : System.Web.UI.Page
 {
 protected void Page_Load(object sender, EventArgs e)
 {
 if (!this.IsPostBack)
 {
 rptMarkers.DataSource = GetData();
//กำหนดแหล่งข้อมูลให้กับตัว Repeater ที่เราต้องการใข้ในการแสดงผล
 rptMarkers.DataBind();
 }
 }
  private DataTable GetData()
//เมธอดที่ใช้ในการดึงค่าข้อมูลจากฐานข้อมูล ซึ่งในที่นี้มีการส่งค่ากลับเป็น datatable และมีการสมมุติค่าข้อมูลใน datatable เพื่อให้เห็นภาพการดึงจากฐานข้อมูลเท่านั้น แต่สามารถนำไปประยุกต์ใช้กับการติดต่อฐานข้อมูลจริงได้  {
 DataTable table = new DataTable();
 table.Columns.Add("Name", typeof(string));
 table.Columns.Add("Latitude", typeof(decimal));
 table.Columns.Add("Longitude", typeof(decimal));
 table.Columns.Add("Description", typeof(string));
 table.Rows.Add("มหาวิทยาลัยสงขลานครินทร์", 7.006923, 100.500238, "Hatyai");
 table.Rows.Add("มหาวิทยาลัยราชภัฏ สงขลา", 7.172661, 100.613726, "Songkla");
 return table;
 }
 }
  1. ดึงข้อมูลจากแหล่งข้อมูลที่ต้องการ ซึ่งประกอบด้วยข้อมูลตามที่ต้องการให้แสดงผล เช่น ค่าละติจูด ลองจิจูด และชื่อสถานที่ โดยในกรณีนี้ผู้เขียนขอสมมติค่าและสร้าง datatable ขึ้นมา เพื่อใช้ในการทดสอบ โดยแสดงในเมธอด GetData() หากเป็นข้อมูลที่ใช้จริงผู้พัฒนาสามารถนำไปประยุกต์กับการดึงข้อมูลของท่านได้
  2. กำหนดค่าแหล่งข้อมูลให้กับ repeater เพื่อสร้างตัวแปร marker ตามที่กล่าวไว้ในข้างต้น
  3. ผลลัพธ์ที่ได้ :

Mapmultipoint

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

แหล่งข้อมูลอ้างอิง :
http://www.dotnetbull.com/2013/06/multiple-marker-with-labels-in-google.html
http://www.codeproject.com/Articles/36151/Show-Your-Data-on-Google-Map-using-C-and-JavaScrip

Comments are closed.