tanomsak.com » Tutorial http://www.tanomsak.com Random Thoughts on Random Things by Tanomsak Sun, 23 May 2010 08:39:03 +0000 en hourly 1 http://wordpress.org/?v=3.0 การหาเส้นทางโดย Google Maps API (GDirections) http://www.tanomsak.com/index.php/2010/01/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%ab%e0%b8%b2%e0%b9%80%e0%b8%aa%e0%b9%89%e0%b8%99%e0%b8%97%e0%b8%b2%e0%b8%87%e0%b9%82%e0%b8%94%e0%b8%a2-google-maps-api-gdirection/ http://www.tanomsak.com/index.php/2010/01/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%ab%e0%b8%b2%e0%b9%80%e0%b8%aa%e0%b9%89%e0%b8%99%e0%b8%97%e0%b8%b2%e0%b8%87%e0%b9%82%e0%b8%94%e0%b8%a2-google-maps-api-gdirection/#comments Sun, 31 Jan 2010 06:06:56 +0000 tanomsak http://www.tanomsak.com/?p=377

เมื่อสองสามวันก่อน มี comment ถามมาว่า “อยากทราบว่าสามารถทำ google map บอกระยะทางได้ไหมค่ะ เช่น จากกรุงเทพไปเชียงใหม่เป็นระยะทางเท่าไหร่” ผมก็ตอบไปสั้นๆ วันนี้ขอขยายความเรื่องการหาเส้นทาง และการหาระยะทางจากจุดสองจุดในโดยใช้ Google Maps API ครับ เรื่องนี้เป็นเรื่องที่หลายๆคนสนใจ และเวปใหม่ที่ผมกำลังซุ่มทำอยู่ก็ใช้เยอะมากครับ

ใครอ่านภาษาอังกฤษคล่อง และต้องการข้อมูลแบบละเอียด ผมแนะน ลองอ่าน document ของ Google นะครับ http://code.google.com/apis/maps/documentation/services.html#Directions

เรามาเริ่มกันเลยดีกว่าครับ อ้อ! วิธีการข้างล่างจะเ็ป็นของ API v2 นะครับ เพราะว่าคนส่วนใหญ่คงยังใช้งาน version 2 กันอยู่

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>Google Maps JavaScript API Example: Simple Directions</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAeNsNnRXUdrpgSw3qfvhz5hRHchrjOSPM-moa2HMmJZw-0fE6VhTsARfVd9x1Dg8TowZALqHIOcO20g"
      type="text/javascript"></script>
    <script type="text/javascript">
	// Create a directions object and register a map and DIV to hold the
    // resulting computed directions

    var map;
    var directionsPanel;
    var directions;

    function initialize() {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(13.998, 100.5009), 15);
      directions = new GDirections(map);
      directions.load("from: 14.068, 100.6009 to: 13.8152, 100.5606"});
   }
  </script>
  </head> 

  <body onload="initialize()">
    <div id="map_canvas" style="width: 70%; height: 480px; float:left; border: 1px solid black;"></div>
    <br/>
  </body>
</html>

source code ข้างบนผมเอามาจาก Tutorial ของ Google ครับ การใช้ GDirection ง่ายมากครับ โดย code ส่วนที่เกี่ยวข้องจริงๆคือบรรทัดที่ 19-20

directions = new GDirections(map);
directions.load("from: 14.068, 100.6009 to: 13.8152, 100.5606");

บรรทัดที่ 19 เป็นการสร้าง GDirections และระบุว่าให้แสดงเส้นทางใบแผนที่ที่เราสร้างไว้ก่อนหน้านี้
บรรทัดที่ 20 เป็นการเรียกใช้บริการหาเส้นทางจาก Google โดยเราระบุ จุดเริ่มต้นกับปลายทาง

การระบุจุดเริ่มต้นกับปลายทาง สามารถระบุเป็ืนชื่อสถานที่ก็ได้นะครับ แต่ผมว่ามันไม่ค่อยแม่นเนื่องจาก Google ต้องตีความสถานที่ก่อน และระบบ reverse-geocode สำหรับของไทยยังไม่สมบูรณ์ครับ

แค่นี้เราก็จะได้เส้นทางเ็ป็น Polyline บนแผนที่ของเราแล้วครับ

ถ้าต้องการให้ มีข้อความบอกเส้นทางด้วย แบบว่า “ตรงไป 2 กม. แล้วเลี้ยวซ้าย” ก็ทำได้ง่ายๆครับ โดยสร้าง div สำหรับแสดงผลขึ้นมาแล้วระบุตอน new GDirections แบบนี้ครับ


directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel );
directions.load("from: 14.068, 100.6009 to: 13.8152, 100.5606", {locale: 'th'});

ตรง {locale: ‘th’} เป็นการบอกว่าให้แสดงข้อความเป็นภาษาไทยครับ

ดูตัวอย่างการใช้หาเส้นทางจาก Google Maps API http://tanomsak.com/tutorial-7.html

Update: ตัวอย่างสำหรับกรณีมีจุดหมายสองจัดครับ http://tanomsak.com/tutorial-7_1.html

ถ้าผมอธิบา่ยตรงไหนไม่เข้าใจ แนะนำได้ใน Comment เหมือนเดิมนะครับ

]]> http://www.tanomsak.com/index.php/2010/01/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%ab%e0%b8%b2%e0%b9%80%e0%b8%aa%e0%b9%89%e0%b8%99%e0%b8%97%e0%b8%b2%e0%b8%87%e0%b9%82%e0%b8%94%e0%b8%a2-google-maps-api-gdirection/feed/ 35 การใช้รูปภาพแทนปุ่มซูมเข้าออก (Custom control) http://www.tanomsak.com/index.php/2009/07/google-maps-custom-control/ http://www.tanomsak.com/index.php/2009/07/google-maps-custom-control/#comments Mon, 27 Jul 2009 10:49:04 +0000 tanomsak http://www.tanomsak.com/?p=295

ถ้าใครเคยเข้าไปเวป ddproperty.com จะเห็นว่าปุ่มซูมเข้าซูมออกจะไม่เหมือนแบบปกติของ Google Maps และมีปุ่มย่อขยายแผนที่เพิ่มขึ้นมาด้วย การทำแบบนี้เค้าเรียกว่า Custom Control ครับ

ddproperty-maps-crop.jpg

คราวนี้เราจะพูดถึงเรื่องการสร้าง Control ของ Google Maps ให้เป็นแบบเฉพาะของเวปเรากันครับ

ทำความรู้จักกับ Control ใน Google Maps

ก่อนอื่นมาทำความรู้จักกับ Control ใน Google Maps API กันก่อน ในตัว Google Maps API มี Control มาตราฐานมาให้เราใช้อยู่หลายอย่างครับ

  • GLargeMapControl – เป็น Control ที่มีครบทั้งซูมเข้าออก,เลื่อนแผนที่ซ้ายขวา และ Slider
  • GSmallMapControl – จะมีแค่ซูมเข้าออก,เลื่อนแผนที่ซ้ายขวา
  • GSmallZoomControl – มีแต่ ซูมเข้าออกเล็กๆ
  • GScaleControl – scale บอกขนาดแผนที่
  • GLargeMapControl3D – เหมือน GLargeMapControl แต่ว่าดูสวยกว่า :)
  • GSmallZoomControl3D – เหมือน GSmallZoomControl แต่ว่าดูสวยกว่า
  • GMapTypeControl – เอาไว้เลือกประเภทแผนที่ ว่าจะเป็นแผนที่ธรรมดา หรือภาพถ่ายดาวเทียม
  • GHierarchicalMapTypeControl – Control แบบที่มี Drop down ให้เลือกได้
  • GOverviewMapControl – แผนที่ขนาดเล็กที่ปกติอยู่ทางขวาล่าง
  • GNavLabelControl – Label แสดง “ที่อยู่” ณ ตำแหน่งปัจจุบัน

ปกติเราเรียกใช้งาน Control พวกนี้โดยคำสั่งแบบนี้ครับ

map.addControl(new GLargeMapControl());

มาสร้าง Control ของเรากันครับ

ขอเริ่มจาก source code ละกันนะครับ

// ก่อนอื่นสร้าง function myZoomControl ขึ้นมาก่อน
function myZoomControl() {
}
// ทำ "subclass" GControl โ้้ดยการกำหนดให้ prototype object เป็น Instance ของ GControl
myZoomControl.prototype = new GControl();

myZoomControl.prototype.initialize = function(map) {
  // เริ่มต้นก็สร้าง div ว่างๆมาหนึ่งอัน เอาไ้ว้เป็น container
  var container = document.createElement("div");

  container.style.width = "37px";
  container.style.height = '100px';

  // สร้าง div อีกอันเอาไว้เป็นปุ่ม ZoomIn
  var zoomInDiv = document.createElement("div");
  // กำหนด style ให้กับปุ่ม -> ไป call function ด้านล่าง
  this.setButtonStyle_(zoomInDiv,"zoonin.png");
  // เพิ่ม div ของปุ่ม ZoomIn ไว้ใส่ container
  container.appendChild(zoomInDiv);

  // กำหนดหน้าที่ให้กับปุ่ม
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });

  // สร้าง div อีกอันเอาไว้เป็นปุ่ม ZoomOut
  var zoomOutDiv = document.createElement("div");
  // กำหนด style ให้กับปุ่ม -> ไป call function ด้านล่าง
  this.setButtonStyle_(zoomOutDiv,"zoomout.png");
  // เพิ่ม div ของปุ่ม ZoomIn ไว้ใส่ container
  container.appendChild(zoomOutDiv);

  // กำหนดหน้าที่ให้กับปุ่ม
  GEvent.addDomListener(zoomOutDiv, "click", function() {
    map.zoomOut();
  });

  // นำ div container ใส่เข้าไปในแผนที่
  map.getContainer().appendChild(container);
  return container;
}

myZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

myZoomControl.prototype.setButtonStyle_ = function(button,button_pic) {

    button.style.backgroundImage = "url(/"+button_pic+")";
    button.style.width = "31px";
    button.style.height = "31px";
    button.style.margin = "0px 0px 3px 3px";
    //styleFloat  for IE
    if (navigator.appName.indexOf("Netscape") != -1) {
       button.style.cssFloat = "left";
    }
    else {
       button.style.styleFloat = "left";
    }
    button.style.cursor = "pointer";
}

function load() {
    if (GBrowserIsCompatible()) {
       var map = new GMap2(document.getElementById("map"));

       // เรียกใช้ Custom Control ที่สร้าง
       map.addControl(new myZoomControl());
       map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    }
}

ดูตัวอย่างกันครับว่าออกเป็นแบบไหน

การสร้าง Custom Control จริงแล้วไม่ยากเลยครับ ส่วนที่สำคัญๆมีดังนี้ครับ

บรรทัดที่ 1-5 กำหนด prototype ของ Custom Control ที่จะสร้าง ให้เป็น instance ของ GControl ขั้นตอนนี้้เป็นการทำ “subclass” จาก GControl แต่ว่า Javascript ไม่มีการ inherit Class เหมือนพวก OOP แต่มีการทำ prototype แทนครับ ไม่ต้องงงครับ  copy ไปเลย :)

มี function ที่สำคัญ 2 อันคือ initialize บรรทัดที่ 7-41 กับ getDefaultPosition บรรทัด 43-45 ห้ามตกหล่นไม่งั้นไม่ work

โดย initialize ทำหน้าที่กำหนดหน้าตาของ Custom Control และ กำหนด Action เวลากดปุ่มต่าง มาดูกันทีละบรรทัดครับ

บรรทัด 9-11 เริ่มต้นด้วยการสร้าง div เปล่าๆขึ้นมาและกำหนดขนาดให้มัน div อันนี้จะเรียกว่า container ครับ โดยเราจะสร้างปุ่มไว้ข้างใน แล้วก็ append ทั้ง container เข้าไปใน Google maps ของเราตอนท้าย คอยดูนะครับ

บรรทัด 15-17 เริ่มสร้างปุ่ม ZoomIn โดยการสร้าง div อีกอันนึง แล้วก็ กำหนด style ให้มันโดยเรียก function setButtonStyle_ ถ้าตามไปดูข้างในก็จะเห็นว่าเป็นการกำหนด background ให้เป็นรูปปุ่ม และก็กำหนดขนาดนั้นเอง

บรรทัด 19 ใส่ div ZoomIn เข้าไปใน Container

บรรทัด 22-24 เป็นการตั้ง Listener ให้ซูมเข้าเวลามรการ “click” ที่ div ZoomIn ของเรา

จากนั้น บรรทัด 26-36 ก็ทำซ้ำสำหรับปุ่ม ZoomOut

บรรทัด 39 ก็ append container ที่เราใส่ปุ่ม ZoomIn/ZoomOut แล้วเข้าไปในแผนที่

ส่วน getDefaultPosition ทำหน้าที่กำหนดตำแหน่งว่า Control ของเราจะอยู่ตรงไหนของแผนที่ครับ

สุดท้ายก็เรียกใช้ myZoomControl ก็เป็นอันเรียบร้อย

Update:

คุณ @iampz แนะนำให้ใช้ id/class กำหนด style แทน ผมทดลองแล้วตามแล้วลองดูตัวอย่างนะครับ

]]> http://www.tanomsak.com/index.php/2009/07/google-maps-custom-control/feed/ 34 การทำ Custom marker icon สำหรับ Google Static Maps http://www.tanomsak.com/index.php/2009/06/custom-marker-icon-google-static-maps/ http://www.tanomsak.com/index.php/2009/06/custom-marker-icon-google-static-maps/#comments Sun, 21 Jun 2009 08:27:31 +0000 tanomsak http://www.tanomsak.com/?p=234

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

Google Static Maps มีการสนับสนุนการแสดงหมุดด้วยครับ แต่ว่าหมุดมันจะเป็นชุดมาตราฐานซึ่งอาจจะไม่เข้ากับเวปอันแสนสวย(??) ของเราเท่าไหร่ จะใช้วิธีการเปลี่ยนรูปหมุดใน Google Maps ที่แนะนำไปแล้วก็ไม่ได้ เนื่องจากแผนที่เป็นรูปภาพไม่ได้สร้างจาก Javascript API

และนี่เป็นหัวข้อของผมในวันนี้ครับ คือการ การทำ Custom marker icon สำหรับ Google Static Maps ผมพบวิธีนี้จากเวป Yelp.com ตอนที่เค้าเปลี่ยนมาใช้ static map ครับ

1. การใช้งาน Google Static Maps

ทำได้ง่ายมากๆครับ คือใช้ html img tag สำหรับแสดงรูปภาพตรงๆเลย แ่ต่ว่า source ของรูปให้ระบุเป็น maps.google.com พร้อมด้วย parameter ตัวอย่างเป็นแบบนี้ครับ

http://maps.google.com/staticmap?center=13.6225480441,100.5334854126&zoom=14&size=300x300&maptype=roadmap&markers=13.6225480441,100.5334854126&key=YOUR_API_KEY

จาก code ข้างบนเป็นการขอรูปแผนที่จาก Google Static Maps โดยมี parameter ต่อไปนี้

  • ให้มีจุดกึ่งกลางที่(Center) lattitude = 13.6225480441 และ longtitude = 100.5334854126
  • ระดับการซูม (Zoomlevel) = 14
  • ขนาดรูป (กว้างxยาว) = 300×200 pixel
  • ประเภทแผนที่เป็นแบบถนน
  • ให้มีหมุดวางอยู่ตรงตำแหน่ง lattitude = 13.6225480441 และ longtitude = 100.5334854126
  • และสุดท้ายต้องใส่ Maps API Key ด้วยครับ (ดูวิธีการขอได้จาก ตอนก่อนหน้า นะครับ)

ใครสนใจความหมาย และ parameter ทั้งหมดที่มีดูได้จาก Google Static Maps API เราจะได้รูปแบบนี้ออกมาครับ

2. การจะเปลี่ยนหมุดจากแบบมาตราฐานเป็นรูปภาพที่เราต้องการ

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

div.png

วิธีการค่า left และ top เพื่อวางหมุดตรงกึ่งกลางแผนที่

done.png

html ที่ใช้เป็นแบบนี้ครับ อันนี้ไม่มีอะไรพิเศษ (เอา parameter เกี่ยวกับ markers ออกด้วย เวลาเรียก static map จะได้ไม่มีรูปหมุดซ้ำกับที่เรากำลังจะแสดง)

<div id="map_div">
<img style="border: 1px solid #c0c0c0; display: inline; width: 300px; height: 320px;" src="http://maps.google.com/staticmap?center=13.6225480441,100.5334854126&amp;zoom=14&amp;size=300x300&amp;maptype=roadmap&amp;key=ABQIAAAAeNsNnRXUdrpgSw3qfvhz5hRHchrjOSPM-moa2HMmJZw-0fE6VhTsARfVd9x1Dg8TowZALqHIOcO20g" alt="" width="300" height="320" />
<img class="marker" src="pin_blue.png"/>
</div>

ส่วน CSS เป็นแบบนี้ครับ

#map_div {
height:320px;
position:relative;
}
#map_div img.marker {
position:absolute;
height:37px;
width:25px;
left:142px;
top:125px;
}

property position ของ div ที่ใส่รูปทั้งสองต้องเป็น relative และ position ของรูปหมุดต้องเป็น absolute นะครับ

ใน IE6 จะมีปัญหากับ transparent png ทำให้รูปหมุดแสดงพื้นหลังเป็นแถบๆ เลือกวีธีแก้ในตามชอบใจเลยครับ

]]> http://www.tanomsak.com/index.php/2009/06/custom-marker-icon-google-static-maps/feed/ 3 Tutorial Google maps ใช้รูปภาพแทนหมุด (Custom Marker Icon) http://www.tanomsak.com/index.php/2009/06/google-maps-customer-marker/ http://www.tanomsak.com/index.php/2009/06/google-maps-customer-marker/#comments Sun, 07 Jun 2009 04:00:00 +0000 tanomsak http://www.tanomsak.com/?p=163

หลังจากหายหน้าไปนาน ขอต่อเรื่อง Google Maps ด้วยการใช้รูปภาพแทนหมุดกันครับ ถ้าจะค้นหาบทความเพิ่มเติม ลองค้นคำว่า Custom Marker Icon นะครับ เรามาเริ่มเรื่องของเรากันเลยดีกว่า

สังเกตุไหมครับว่าจากตัวอย่างที่ผ่านๆมาทั้งหมด หมุดของเราเป็นหมุดแดงๆ แล้วมีจุดดำๆตรงกลาง ซึ่งเป็นมาตรฐานของ Google Maps เค้า บา่งทีมันอาจดูไม่เนียน ไม่เข้ากับเวปเราเท่าไหร่ สามารถเปลี่ยนได้นะครับ โดยใช้ Customer Marker Icon วิธีกา่รไม่ยากครับ ผมว่าที่ยากที่สุดก็ตรงทำรูป Icon ที่ดูดีอย่างที่ต้องการมากกว่า (ของ ddproperty.com ผมกับเพื่อน ก็ดูแบบจากหลายๆที่มารวมๆกัน ซึ่งทำนานกว่าเขียน script อีก)

ddproperty-marker.png

Plazes-marker.png Yelp.png

การปรับ Options ของ Gmarker

ตามเอกสาร Google Maps API (Gmarker) ฟังชั่น Gmarker รับ parameter แบบนี้ครับ

Google Code.png

โดยปกติถ้าเราระบุแค่ latlng เราก็จะได้ Marker ที่ตำแหน่งที่ต้องการโดย icon จะเป็น G_DEFAULT_ICON ซึ่งก็คือ หมุดแดงที่มีจุดดำครับ

ถ้าเราต้องการเปลี่ยนหมุดให้เป็นรูปสวยงาม (??) ตามต้องการเราก็ต้องระบุ options (GMarkerOptions) ซึ่งมีตัวเลือกให้เยอะมากครับและก็มีเพิ่มขึ้นเรื่อยๆเมื่อมีการ update Google Maps API ที่เราสนใจในตอนนี้คือ options ชื่อ icon ครับ โดยเราต้องสร้าง GIcon (การใช้งาน GIcon) ขึ้นมาแล้วนำไปใช้

ใครถนัดอ่านภาษาอังกฤษผมแนะนำให้อ่าน Making your own custom markers ของคุณ Mike Williams ผมว่าเขียนไว้ได้ครบถ้วนดีครับ ผมจะพยายามแปลให้เข้าใจง่ายๆดูนะครับ ย้ำว่าส่วนต่อจากนี้ผมแปลบทความของคุณ Mike เป็นหลัก ผสมกับการอธิบายของผมตามที่ติดว่าจะเข้าใจง่ายขึ้นครับ

var Icon = new GIcon();
Icon.image = "mymarker.png";
Icon.iconSize = new GSize(20, 34);
Icon.shadow = "myshadow.png";
Icon.shadowSize = new GSize(36, 34);
Icon.iconAnchor = new GPoint(5, 34);
Icon.infoWindowAnchor = new GPoint(5, 2);
Icon.transparent = "mytran.png";
Icon.imageMap=[9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0];
Icon.printImage = "mymarkerie.gif";
Icon.mozPrintImage = "mymarkerff.gif";
Icon.printShadow = "myshadow.gif";

script ข้างบนเป็นการสร้าง GIcon เพื่อนำไปใช้สำหรับ options ในการสร้าง GMarker อีกทีนึง ที่เห็นยาวเหยียดจริงๆไม่ได้จำเป็นหมดทุกคำสั่งหรอกนะครับ แต่ว่าอันนี้เป็น parameter ที่มีเกือบทั้งหมดแล้ว ลองมาทำความเข้าใจไปทีละส่วนด้วยกันนะครับ

1. เริ่มสร้าง GIcon อันนี้ตรงไปตรงมาไม่มีอะไร

var Icon = new GIcon();

2. ต่อมาก็เริ่ม กำหนดรูปภาพที่ต้องการนำมาใช้เป็นรูปหมุด และบอกขนาดของรูปที่นำมาใช้ (กว้่าง x สูง)

ตรงนี้ต้องระวังเรื่อง path ของรูป ต้องให้ script สามารถมองเห็นรูปได้ไม่งั้นไม่ work และต้องกำหนด iconSize ถ้าไม่กำหนดจะไม่แสดง icon นะครับ การกำหนดขนาดของ icon กำหนดเป็น GSize นะครับ

Icon.image = "mymarker.png";
Icon.iconSize = new GSize(20, 34);

3. ถ้าใครต้องการทำเงาให้หมุดด้วยก็ต้องกำหนดรูปเงาและขนาดของเงาดังนี้ครับ (เป็น options ไม่ต้องมีก็ได้ครับ)

Icon.shadow = "myshadow.png";
Icon.shadowSize = new GSize(36, 34);

4. ต่อไปเป็นการกำหนดจุดอ้างอิงของหมุด ซึ่งมี 2 จุด (รูปนิ้วประกอบนำมาจากเวปคุณ Mike Williams นะครับ)

fingerbig.png

  • iconAnchor คือตรงปลายแหลมของหมุดที่จะปักลงบนแผน (จุดสีแดงในตัวอย่าง) ถ้ากำหนดผิดจุดเวลาแสดงผลมันจะดูหลอกๆ เพราะตรงปลายแหลมไม่ใช้จุดที่ปักลงแผนที่
  • infoWindowAnchor คือตำแหน่งที่จะให้ infoWindow จะโผล่ออกจากหมุด (จะให้ตรงปลายแหลมของ infoWindows โผล่ออกมาจากตรงไหนของหมุด) ถ้ากำหนดผิดจะทำให้เวลาแสดง infoWindow มันจะดูไม่เนียน เช่นห่างหมุดมากไป หรือทะลุออกมาจากกลางหมุด โดยปกติเราจะอยากให้ infoWindow ออกมาจากด้านบนของหมุด (จุดสีเขียวในตัวอย่าง)

การกำหนดจุดอ้างอิงทั้งสองทำได้โดย

Icon.iconAnchor = new GPoint(5, 34);
Icon.infoWindowAnchor = new GPoint(5, 2);

ให้สังเกตุว่าการนับตำแหน่งของจุดเริ่มจาก (1,1) ตรงมุมบนซ้ายของรูปหมุดของเรา และก็ใช้ GPoint ในการกำหนดจุดครับ

5. การป้องกันปัญหา การกดบนหมุดไม่ได้ (กดแล้วไม่เกิด event onClick) เวลามี infoWindow อยู่ใกล้ๆ

Icon.transparent = "mytran.png";
Icon.imageMap=[9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0];

  • transparent เป็นรูปภาพโปล่งใสของรูปหมุดของเรา (ดูวิธีการสร้างตอนท้าย) กำหนดเพื่อป้องกันการกดหมุดไม่ได้ใน Internet Explorer
  • imageMap กำหนดเพื่อป้องกันการกดหมุดไม่ได้ใน Firefox ชุดตัวเลขที่เห็นเป็นพิกัด x,y บนรูปหมุดของเรา เช่น 9,0 หมายถึงจุด x=9, y=0 ไล่ไปเรื่อยๆ ซุ่มๆกำหนดให้ทั่วๆหมุดลองเรา (ผมเองไม่ได้กำหนดตัวนี้เพราะว่างงเหมือนกัน ใครเข้าใจบอกด้วยครับ )

6. ส่วนสุดท้ายเป็นการเตรียมตัวสำหรับการพิมพ์ (options ใครไม่เน้นเรื่องพิมพ์ไม่ต้องกำหนดครับ)

Icon.printImage = “mymarkerie.gif”;
Icon.mozPrintImage = “mymarkerff.gif”;
Icon.printShadow = “myshadow.gif”;

เนื่องจาก browser ส่วนใหญ่ไม่สนับสนุนการพิมพ์รูปภาพแบบที่โปร่งใสบางส่วน Google Maps API เลยอนุญาติให้กำหนดรูปแทนได้เวลาจะพิมพ์

  • printImage เป็นรูปแทนของหมุดสำหรับ Internet Explorer
  • mozPrintImage เป็นรูปแทนของหมุดสำหรับ Firefox
  • printShadow เป็นรูปแทนของเงา

ถ้าไม่กำหนดค่า printImage และ mozPrintImage IE6 จะพิมพ์รูปหมุดหลักที่เรากำหนดไว้ก่อนหน้า (ซึ่งส่วนที่โปร่งใสจะออกมาทึบๆ) แต่ Firefox จะไม่พิมพ์หมุดเลยครับ

7. สุดท้าย พอเราสร้าง GIcon ใหม่เรียบร้อยแล้ว เราก็ต้องนำไปใช้ในการสร้างหมุด (GMarker) แบบนี้ครับ

var marker = new GMaker(latlng, {icon: Icon});

ลองดู ตัวอย่างการใช้รูปภาพแทนหมุด ที่เราทำข้างบนนะครับ

แถม 1: การสร้างเงาสำหรับหมุด

การสร้างเงา เริ่มแรกก็ใช้โปรแกรมจำพวก Photoshop เปิดรูปหมุดของเราขึ้นมาครับ แล้วก็เปลี่ยนสีของหมุดทั้งหมดให้เป็นสีดำไปเลย จากนั้นก็ปรับ opacity ลงซัก 50% หมุดดำของเราก็จะออกเป็นสีเทาๆ จากนั้นก็เอียงหมุด (Edit -> Transform -> Skew) ประมาณ 45% แล้วก็ทำพวก blur พองาม จากนั้นก็ Save for web เป็น PNG-24 เท่านี้ก็เรียบร้อยครับ

แถม 2: การสร้างภาพโปร่งใส (transparent) ของหมุด

การทำภาพโปร่งใสง่ายมากครับ แค่เปิดรูปหมุดในโปรแกรม Photoshop แล้วก็ลด opacity ลงเหลือ 1% เราจะมองไม่เห็นหมุดเลยครับ จากนั้นก็ Save for web เป็น PNG-24 เท่านี้ก็เรียบร้อยครับ

ทดลองทำกันดูนะครับ ทำเรียบร้อยแล้วก็ลองเอามาโชว์กันบ้างนะครับ ใครมีคำถามหรือว่าอยากแนะนำอะไร comment คุยกันได้นะครับ

]]> http://www.tanomsak.com/index.php/2009/06/google-maps-customer-marker/feed/ 10 เพิ่มหมุดจาก Google Maps ลง Database http://www.tanomsak.com/index.php/2008/12/google-maps-insert-database/ http://www.tanomsak.com/index.php/2008/12/google-maps-insert-database/#comments Wed, 24 Dec 2008 10:32:00 +0000 tanomsak http://www.tanomsak.com/?p=150

ในเวป ddproperty.com ที่ผมกับเพื่อนดูแลอยู่เนี้ย เราให้คนที่ลงประกาศทุกคนต้องระบุตำแหน่งด้วยว่า อสังหาฯที่กำลังลงประกาศตำแหน่งอยู่ตรงไหน ผมก็ใ้ช้ google maps นี้แหละครับในการระบุตำแหน่ง

คราวนี้เราจะมาดูกันว่า จะใช้ Google Maps เพิ่มตำแหน่งหมุดใน Database ยังไง จริงๆแล้ว trick หลักๆก็คือว่าเราจะเอาค่าตำแหน่ง lat, lng ของจุดที่เราต้องการออกมาจาก Google Maps ได้ยังไง ส่วนการบันทึกค่าลง database ก็ทำเหมือนกับการส่งค่าจาก form ตามปกติ ขั้นตอนคร่าวๆเป็นแบบนี้ครับ

  1. หาค่า lat, lng จากตำแหน่งที่ click บนแผนที่
  2. เขียนค่า lat, lng ไว้ใน hidden fields ของ form ที่เราจะใช้ส่งค่ากลับไปฝั่ง server
  3. ทางฝั่ง server ก็รับกา่ร submit แล้วก็เขียนค่าลง database

ง่ายไหมครับ ลองมาดูกันทีละขั้น

ขั้นแรก หาค่า lat, lng จากตำแหน่งที่ click บนแผนที่

Google Maps API มี function ต่างๆที่เตรียมไว้ให้ใช้งานเยอะมากครับ รวมถึงเมื่อผู้ใช้ Interactive กับแผนที่เช่น Click บนแผนที่ ซูมเข้า ซูมออก หรือว่าจะขยับหมุดก็มี Event เกี่ยวข้องทั้งหมด สิ่งที่เราต้องทำเพื่อหาตำแหน่งที่ผู้ใช้งาน Click บนแผนที่ก็คือสร้าง Listerner เพื่อมาดักจับ Event เหล่านี้ ซึ่งทำได้อย่างนี้ครับ

 GEvent.addListener(map, &quot;click&quot;, function(overlay, latlng) { /*เรา check ค่า overlay เพื่อดูว่าเป็นการกดบนแผนที่ หรือว่ากดบน overlay ที่อยู่บนแผนที่เช่น marker โดยตัวแปล overlay จะมีค่าเป็น null ในกรณีที่กดบนแผนที่เปล่าๆ*/ if (!overlay) { var lat = latlng.lat(); var lng = latlng.lng(); } });

โดย Event “click” เนี้ยจะส่งค่าตัวแปลไปให้ function ที่เราเขียนขึ้นมารับด้วย คือ overlay และ latlng โดย overlay จะเป็นตัวบอกว่าเป็นการ click บนแผนที่ หรือว่า click บน overlay ส่วน latlng จะเป็นตัวแปลประเภท GLatLng ซึ่งมี method lat(), lng() เพื่อหาค่า lat, lng แค่นี้เราก็จะได้ค่า lat, lng ของตำแหน่งที่ click บนแผนที่แล้วครับ

เขียนค่า lat, lng ไว้ใน hidden fields ของ form ที่เราจะใช้ส่งค่ากลับไปฝั่ง server

อันนี้ก็ตรงไปตรงมาครับ โดยเราจะำสร้าง form ที่มี hidden fields ชื่อ lat กับ lng ไว้ แล้วทำการ update ค่าทุกครั้งที่มีกาีร click บนแผนที่

</p> <form action=&quot;/new_marker&quot;> <p><input name=&quot;marker[name]&quot; size=&quot;30&quot;/> <input name=&quot;marker[address]&quot; size=&quot;30&quot;/> <input type=&quot;hidden&quot; id=&quot;marker_lat&quot; name=&quot;marker[lat]&quot;/> <input type=&quot;hidden&quot; id=&quot;marker_lng&quot; name=&quot;marker[lng]&quot;/> <input type=&quot;submit&quot; name=&quot;commit&quot; value=&quot;submit&quot;/></p> </form> <p>

แล้วก็จัดกา่รแก้ไข javascript ของเราให้ Update value ของ hidden fields lat, lng สังเกตุว่า ผมใช้ $(‘marker_lat’) แทนการ getElementById เพราะผมใช้ Prototype Framework อันนี้เพราะผมชินครับ ส่วนใครจะใช้ javascript แบบมาตราฐานก็ตามสะดวกครับ

 var map; var present = null; function updateHiddenFields(marker) { latlng = marker.getLatLng(); var lng = latlng.lng(); var lat = latlng.lat(); $('marker_lat').value = lat; $('marker_lng').value = lng; } function addMarker(latlng) { if (!present) { /*ใส่ options draggable เป็น true เพื่อให้สามารถย้ายตำแหน่งของหมุดได้ ส่วน bouncy เป็น false เพื่อไม่ให้หมุดเด้งหลังการย้ายตำแหน่ง*/ var newMarker = new GMarker(latlng, { draggable: true, bouncy: false}); map.addOverlay(newMarker); /*ตรวจจับ Event dragend เพื่อทำการ update ค่า lat,lng เมื่อมีย้ายหมุด*/ GEvent.addListener(newMarker, &quot;dragend&quot;, function() { updateHiddenFields(newMarker); }); updateHiddenFields(newMarker); map.panTo(latlng); present = true; } } function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById(&quot;map&quot;)); map.setCenter(new GLatLng(37.4419, -122.1419), 13); GEvent.addListener(map, &quot;click&quot;, function(overlay, latlng) { if (!overlay) { addMarker(latlng); } }); } }

เนื่องจากผมต้องการให้ระบุตำแหน่งทีละหนึ่งอัน (หนึ่งอสังหาฯ หนึ่งตำแหน่ง) เลยต้องมีตั้งค่าตัวแปล present เอาไว้ check ไม่ให้เพิ่มหมุดซ้ำ

ทางฝั่ง server รับกา่ร submit แล้วก็เขียนค่าลง database

ที่นี้ก็จัดกา่ร insert ค่าที่ได้รับจาก form ลง database ครับ

 def new_marker _marker = params[:marker] @marker = Marker.new(_marker) @marker.save! end

เท่านี้ก็เป็นอันเรียบร้อยครับ ลองดูตัวอย่าง ลองดู Firebug console นะครับว่า ค่า value ของ hiddle fields เปลี่ยนหลังจากย้ายหมุดตามที่ต้องการหรือเปล่า

Del.icio.us : ,
Technorati : ,

]]> http://www.tanomsak.com/index.php/2008/12/google-maps-insert-database/feed/ 17 แสดงหมุดจาก database ใน Google Maps ด้วย AJAX http://www.tanomsak.com/index.php/2008/12/google-maps-database-ajax/ http://www.tanomsak.com/index.php/2008/12/google-maps-database-ajax/#comments Sun, 21 Dec 2008 09:16:46 +0000 tanomsak http://www.tanomsak.com/?p=127

ความเดิมจากตอนที่แล้ว เราพูดถึงวิธีิการแสดงหมุดจาก database บนแผนที่ Google Maps ไปแล้ว แต่ติดตรงที่ว่าเวลามีหมุดเยอะๆจะแสดงหน้าเวปช้า และเปลือง memory คราวนี้ผมจะพูดถึงการใช้วิธีการแสดงหมุดจาก database เฉพาะส่วนที่มองเห็นในหน้าต่างแผนที่โดยการใช้ AJAX ครับ

ส่วน table database และ ข้อมูลใน database ก็ใช้ของคราวที่แล้วครับ (ดูได้ที่ Tutorial แบบบ้านๆ ตอนที่ 2 – แสดงหมุดจาก database ใน Google Maps)

สิ่งที่ต้องเตรียมก่อนเริ่ม

  1. ผมใช้ Prototype Javascript Framework สำหรับทำ AJAX เพราะมันติดมากับ Rails เลยชินครับ ถ้าใครถนัดตัวอื่นก็ตามสะดวก
  2. แนะนำ Firefox + Firebug สำหรับการ Debug ครับ สุดยอดมากๆ

หลักกาำรทำงาน

  1. ทุกครั้งที่มีกา่รเลื่อนแผนที่ หรือซูมเข้า/ซูมออก script จะขอข้อมูลจาก server และนำไปแสดงจุดพิกัดใหม่ในแผนที่
  2. ใช้พิกัดของแผนที่ ที่กำลังแสดงผล (x1,y1,x2,y2 ตรงมุมกรอบของแผนที่) เป็นตัวแปลในการเลือกข้อมูลพิกัดจาก database

อ้อ วิธีการที่จะเขียนถึง ส่วนใหญ่นำมาจากหนังสือ “Beginning Google Maps Applications with Rails and Ajax” นะครับ ลองไปหาอ่านดูกัน แนะนำๆ

ส่วนที่ 1 เรียกใช้ prototype.js โดยการเพิ่มบรรทัดต่อไปนี้ ในส่วน head

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>

ส่วนที่ 2 แก้ไขส่วน Javascript โดยเพิ่ม function สำหรับแสดงหมุด และ แก้ไข function load() ดังนี้ครับ

var displayingMarkers = [];
var displayingMarkersNum = 0;
var deletingMarkers = [];
var deletingMarkersNum = 0;

function clearMarkers() {

for (var i = 0 ; i < deletingMarkersNum ; i++) {
map.removeOverlay(deletingMarkers[i]);
}

}

function updateMarkers() {
//เตรียม parameters พิกัดของแผนที่ที่กำลังแสดง เพื่อ query หมุดจาก database
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var mapBoundary = 'ne=' + northEast.toUrlValue() + '&amp;amp;amp;sw=' + southWest.toUrlValue();
var myAjax = new Ajax.Request( '/get_marker', {
method: 'get',
parameters: mapBoundary,
onComplete: function(request){
// function นี้จะทำงานหลังจากได้รับค่า response จาก server
// ทำการเก็บค่า response จาก server เข้าตัวแปล markers
markers = eval( "(" + request.responseText + ")" );

// copy markers ที่กำลังแสดงอยู่เก็บไว้ เดี๋ยวเราจะลบหมุดพวกนี้ออก หลังจากเพิ่มหมุดชุดใหม่ในแผนที่แล้ว
deletingMarkers = displayingMarkers.clone();
deletingMarkersNum = displayingMarkersNum;
displayingMarkersNum = 0;
displayingMarkers.clear();

for (var i = 0 ; i < markers.length ; i++) {
var marker = markers[i]
var lat = marker.lat;
var lng = marker.lng;

//check for lat and lng so MSIE does not error on parseFloat of a null value
if (lat &amp;amp;amp;&amp;amp;amp; lng &amp;amp;amp;&amp;amp;amp; lat != 0 &amp;amp;amp;&amp;amp;amp; lng != 0) {
var latlng = new GLatLng(lat,lng)

var marker = new GMarker(latlng);

displayingMarkers[displayingMarkersNum] = marker;
displayingMarkersNum++;

map.addOverlay(marker);

} // end of if lat and lng
} // end of for loop

clearMarkers();

} // end of anonymous onComplete function

}); // end of the new Ajax.Request() call

}

function load() {
if (GBrowserIsCompatible()) {
displayingLandmarkNum = 0;
displayingLandmark.clear();
deletingLandmarkNum = 0;
deletingLandmark.clear();

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

updateMarkers();
GEvent.addListener(map,'zoomend',function() {
updateMarkers();
});

GEvent.addListener(map,'moveend',function() {
updateMarkers();
});
}
}

ส่วนที่ 3 เพิ่ม action ฝั่ง server ให้รับ AJAX request และ return ค่าพิกัด

def get_marker
ne = params[:ne].split(',').collect{|e|e.to_f}
sw = params[:sw].split(',').collect{|e|e.to_f}

# if the NE longitude is less than the SW longitude,
# it means we are split over the meridian.

if ne[1] > sw[1]
conditions = '((lng > ? AND lng < ?) AND (lat <= ? AND lat >= ?))'
else
conditions = '((lng >= ? OR lng < ?) AND (lat <= ? AND lat >= ?))'
end
markers = Marker.find :all, :select => 'id, lat, lng', :conditions => [conditions,sw[1],ne[1],ne[0],sw[0]]

render :text=>markers.collect{|c|c.attributes}.to_json
end

TIPS:

ลองสังเกตุหน้าต่าง console ของ Firebug เวลาเลื่อนแผนที่ดูครับ จะเห็นการสื่อสารระหว่าง browser กับ server เพิ่มขอข้อมูลพิกัดทุกครั้งที่มีการเลื่อนแผนที่

]]> http://www.tanomsak.com/index.php/2008/12/google-maps-database-ajax/feed/ 15 Tutorial แบบบ้านๆ ตอนที่ 2 – แสดงหมุดจาก database ใน Google Maps http://www.tanomsak.com/index.php/2008/12/google-maps-overlay1/ http://www.tanomsak.com/index.php/2008/12/google-maps-overlay1/#comments Tue, 09 Dec 2008 15:09:01 +0000 tanomsak http://www.tanomsak.com/?p=84

จากคราวก่อนที่เราทดลองใช้ Google Maps API แสดงแผนที่ในหน้าเวปของเราไปแล้ว (อ่าน Tutorial แบบบ้านๆ ตอนที่ 1) คราวนี้มาต่อตอนที่ 2: เพิ่มและแสดงหมุดใน Google Maps กันครับ

ประโยชน์ของการใช้ Google Maps API แสดงแผนที่ก็คือเราสามารถแสดงหมุด จากข้อมูลใน database ของเราเองได้ คราวนี้เราจะทดลองสร้าง interface ให้ปักหมุด จัดค่าพิกัดใน database และนำข้อมูลจาก database กลับมาแสดงครับ

สิ่งที่ต้องเตรียมก่อนเริ่ม

  1. Database server สำหรับเก็บข้อมูลพิกัด (ผมใช้ MySQL v5.0)
  2. Web Server สำหรับประมวลผลและติดต่อ database จะใช้อะไรก็ตามสะดวกครับ (ผมเขียน server side ด้วย Rails ครับ ขอใช้ตัวอย่างเป็น Rails นะครับ)

ขั้นตอนที่ 1 มารู้จักวิธีการแสดงหมุดบนแผนที่ด้วย Google Maps API กันก่อน

หมุดที่แสดงบนแผนที่ Google Maps จะเรียกว่า Marker ครับ โดยการจะแสดงหมุดบนแผนที่นั้น ก็ต้องสร้าง Marker ขึ้นมาก่อน แล้วก็ทำการเพิ่ม Marker ที่สร้างมาลงบนแผนที่ ลองดูจาก script นะครับ

/*บรรทัด 2-3 เป็นการสร้างแผนที่และกำหนดจุดศูนย์กลางแผนที่ เหมือนในตอนที่ 1*/
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

/*บรรทัด 6-7 เป็นการสร้าง Marker โดยกำหนดตำแหน่งของ Marker ไว้ตำแหน่งเดียวกับศูนย์กลางแผนที่*/
var point = new GLatLng(37.4419, -122.1419);
var marker = new GMarker(point);

/*บรรทัด 10 เป็นการเพิ่ม marker ที่เพิ่งสร้างลงในแผนที่*/
map.addOverlay(marker);

ตัวอย่างของ script ข้างบน (view source กันเองนะครับ) เป็นไง ง่ายไหมครับ

ขั้นตอนที่ 2 สร้าง database สำหรับเก็บข้อมูลพิกัด

สร้าง table สำหรับเก็บข้อมูลพิกัด อย่างง่ายๆตาม SQL ข้างล่างครับ โดย field lat กับ lng เก็บทศนิยมแค่ 6 หลักก็พอครับ เนื่องจากถึงเก็บละเอียดกว่านี้ เรา็ก็คงสามารถสังเกตุไม่ออกแม้ว่าจะซูมแผนที่ใกล้ที่สุดแล้วก็ตาม ตัวอย่าง table และตัวอย่างข้อมูลต่อจากนี้ผมขออนุญาตนำมาจาก http://code.google.com/support/bin/answer.py?answer=87134&topic=11364 นะครับ

CREATE TABLE `markers` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 60 ) NOT NULL ,
`address` VARCHAR( 80 ) NOT NULL ,
`lat` FLOAT( 10, 6 ) NOT NULL ,
`lng` FLOAT( 10, 6 ) NOT NULL
) ENGINE = MYISAM ;

ขั้นตอนที่ 3 ใส่่ค่าเริ่มต้นใน database

ใส่ marker ลงใน database เพิ่มค่าเริ่มต้นซักหน่อย เดี๋ยวเราจะลองมาแสดงหมุดจาก database กัน

INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Frankie Johnnie Luigo Too','939 W El Camino Real, Mountain View, CA','37.386339','-122.085823');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Amici\'s East Coast Pizzeria','790 Castro St, Mountain View, CA','37.38714','-122.083235');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Kapp\'s Pizza Bar Grill','191 Castro St, Mountain View, CA','37.393885','-122.078916');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Round Table Pizza: Mountain View','570 N Shoreline Blvd, Mountain View, CA','37.402653','-122.079354');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Sausage Factory Inc','517 Castro St, San Francisco, CA','37.389578','-122.081463');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Tony and Alba\'s Pizza &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; Pasta','619 Escuela Ave, Mountain View, CA','37.394011','-122.095528');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES ('Oregano\'s Wood-Fired Pizza','4546 El Camino Real, Los Altos, CA','37.401724','-122.114646');

ขั้นตอนที่ 4 ทดลองนำค่าพิกัดจาก database มาแสดงในแผนที่

พอเสร็จขั้นตอนที่ 3 เราก็มี database ที่มีข้อมูลพิกัดแล้ว ตอนนี้เราจะมาแสดงพิกัดจาก database บนแผนที่กันครับ เริ่มต้นง่ายๆที่สุดก็คือทำเป็นแบบ static โดยโหลดค่าพิกัดทั้งหมดที่ต้องการแสดงเข้าไปกับหน้าเพจที่กำลังแสดงเลย แล้วใช้ javascript สร้าง Marker จากค่าพิกัดนั้นๆ แล้วก็ใส่ลงในแผนที่

ขั้นตอนนี้จะต้องเขียนโปรแกรมฝั่ง server side กันละครับ ว่ากันตามสะดวกนะครับใครถนัดภาษาอะไร ตัวอย่างข้างล่างเป็น Ruby on Rails

ส่วน controller query ค่าพิกัดจาก database

def show
@markers = Marker.find(:all, :limit => 5)
end

ส่วน view ไฟล์ show.html.erb

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;amp;amp;amp;amp;key=ABQIAAAAeNsNnRXUdrpgSw3qfvhz5hRHchrjOSPM-moa2HMmJZw-0fE6VhTsARfVd9x1Dg8TowZALqHIOcO20g"
type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(markers[i]['marker']['lat'],markers[i]['marker']['lng']);
var marker = new GMarker(point);
map.addOverlay(marker);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:500px;height:300px"></div>
<script type="text/javascript">

//<![CDATA[
var markers = <%=@markers.to_json%> ;
//]]>
</script>
</body>
</html>

ตัวอย่างเมื่อเสร็จสมบูรณ์

จุดสำคัญคือ ตรง var markers = <%=@markers.to_json%> เป็นส่วนที่นำค่าพิกัดที่ได้จาก database ส่งไปให้ function load() เพื่อนำไปสร้าง Marker และใส่ในแผนที่ โดย Rails จะ render ออกมาเป็น

var markers = [{"marker": {"lng": -122.083235, "lat": 37.38714}}, {"marker": {"lng": -122.078916, "lat": 37.393885}}, {"marker": {"lng": -122.085823, "lat": 37.386339}}, {"marker": {"lng": -122.079354, "lat": 37.402653 }}, {"marker": {"lng": -122.081463, "lat":37.389578 }}] ;

แล้วเราก็แกะค่าตัวแปล markers เพื่อเอา lat, lng ออกมาสร้าง Marker ครับ

var point = new GLatLng(markers[i]['marker']['lat'],markers[i]['marker']['lng']);

ไม่ยากใช่ไหมครับ แต่ว่าวิธีนี้มีปัญหาอยู่ตรงที่ ถ้าเรามี Marker จำนวนมากๆ เป็นร้อยเป็นพัน จะทำให้หน้า html ของเราใหญ่และโหลดช้า รวมถึงทำให้เปลือง memory ในการที่โหลด Marker จำนวนมากๆด้วยครับ วิธีแก้ก็คือทำการ load ค่าพิกัดและสร้างหมุดแบบ dynamic คือแสดงเพราะส่วนที่มองเห็นในแผนที่เท่านั้น แต่ว่าขอยกไปคราวหน้าละกันครับ

]]> http://www.tanomsak.com/index.php/2008/12/google-maps-overlay1/feed/ 25 Tutorial แบบบ้านๆ ตอนที่ 1 – Basic Google Maps API http://www.tanomsak.com/index.php/2008/12/google-maps-tutorial-1/ http://www.tanomsak.com/index.php/2008/12/google-maps-tutorial-1/#comments Mon, 08 Dec 2008 14:36:18 +0000 tanomsak http://www.tanomsak.com/?p=40

ตอนผมทำเวป ddproperty.com อยากจะเอา Google Maps มาใช้ระบุตำแหน่ง ก็เลยหาข้อมูลจากหลายๆที่ ทั้งดูตัวอย่างจากเวป แล้วก็หาอ่านจาก เอกสารของ google และ Google Maps Tutorial รวมถึงเอกสาร การใช้ Google Maps API ที่ รองศาสตราจารย์สวัสดิ์ชัย เกรียงไกรเพชร รวบรวมไว้ซึ่งละเอียดมากๆ ถ้าใครต้องการเนื้อหาแบบละเอียดๆ ก็ลองอ่านดูได้จาก link ข้างต้นไม่ผิดหวังครับ

แต่ที่ผมจะเขียนนี้ขอเป็น Google Maps Tutorial แบบบ้านๆ รวบรวมเฉพาะส่วนที่ผมใช้เป็นหลักในเวป ddproperty.com โดยจะแบ่งเป็นตอนๆแบบนี้ครับ

  1. Basic Google Maps API
  2. แสดงหมุดจาก database ใน Google Maps
  3. แสดงหมุดจาก database ใน Google Maps ด้วย AJAX
  4. เพิ่มหมุดใน database
  5. ใช้รูปภาพแทนหมุด (Custom Marker Icon)
  6. การทำ Custom marker icon สำหรับ Google Static Maps
  7. ใช้รูปภาพแทนปุม control (Custom Control)
  8. สร้าง info windows แบบลอยนอกแผนที่
  9. แล้วแต่จะคิดออกต่อๆำไปครับ
แต่ก่อนอื่นขอออกตัวไว้ก่อนเลยนะครับ ว่าผมก็ไม่ใช่กูรูอะไร แต่คิดว่าน่าพอจะมีประโยชน์ช่วยให้หลายๆคน เริ่มใช้งานได้เร็วขึ้นเลยเอามาแบ่งบันกัน แนะนำติชมได้เลยนะครับ ยินดีมากๆ

ออกตัวเสร็จแล้วก็เริ่มตอนที่ 1 กันดีกว่า

ในการจะนำ Google Maps มาใส่ในเวปของเราเนี้ยจริงๆแล้วมันมีได้ 2 แบบคือ

  • แบบที่ใช้บริการจำพวก My maps ของ Google แบบนี้ใช้งานง่ายมากแค่แปะ link ในหน้า source code ของเวปก็แสดงแผนที่ได้แล้ว (แนะนำหนังสือ Google Maps มหัศจรรย์แผนที่ออนไลน์ ครับ) แต่ว่ามีข้อจำกัดในการทำลูกเล่นต่างๆและ ไม่สามารถแสดงข้อมูลที่อยู่ใน database ของเราเองได้
  • กับแบบที่แสดงแผนที่โดยใช้ Google Maps API จะสามารถปรับหน้าตาแผนที่ได้ และจะสามารถแสดงหมุดจาก database ของเราเอง หรือเพิ่มหมุดลงใน database ก็ได้ครับ

ที่ผมกำลังจะเขียนถึงเป็นแบบที่สอง คือ Google Maps API ครับ

ขั้นตอนที่ 1: ขอใช้ API Key สำหรับใช้งาน Google Maps

ขั้นแรกก็ต้องขอ API Key จาก Google ก่อนครับ โดยทำได้ง่ายมากๆ แค่มี account ของ google (ก็ account gmail นั้นแหละครับ) ก็เป็นอันใช้ได้ โดยไปที่ http://www.google.com/apis/maps/signup.html พออ่าน Term of Service จบแล้ว ก็ใส่ domain name ของเวปเรา ที่จะใช้ Google Maps API ในกล่้อง My web site ตามรูปครับ

เช่นถ้าจะใช้ Google Maps API กับเวป ddproperty.com ก็ใส่ http://www.ddproperty.com ลงไปจะทำให้สามารถใช้ Google Maps API กับทุกๆหน้าภายใตั domain www.ddproperty.com ได้ (sub domain ไม่ได้นะครับ ต้องขอ API key อันใหม่)

ในช่วง development ที่ยังไม่ได้จด domain ก็ใส่ http://localhost/ ไปได้เลยครับ แล้วก็เข้าหน้าทดสอบผ่านทาง url localhost เอา

สามารถขอได้หมายๆอันนะครับ ไม่ต้องกลัวหมด :) ผมขอมาทดลองหลายอันแล้ว

ขั้นตอนที่ 2: แปะ script สำหรับ Google Maps API และเรียกใช้งาน

พอกด Generate API Key ในขั้นแรกแล้วก็จะได้ API Key มา พร้อมด้วยตัวอย่างการนำไปใช้ในเวปของเราตามรูปข่างล่าง

จริงๆแล้วเจ้า Google Maps API เนี้ยมันก็คือ javascript functions ชุดนึงที่ Google เขียนขึ้นเพื่อให้เราเรียกใช้เพื่อสร้างแผนที่ในเวปเรา จากตัวอย่างที่ได้มาจากการสร้าง API Key จะเห็นได้ว่าการเรียกใช้งาน Google Maps API เนี้ยแบ่งเป็น 4 ส่วนใหญ่ๆครับ

  1. การ include Google Maps API (external javascript จาก google) เข้ามาในหน้าเวปเรา ตาม script ข้างล่างโดย v=2 หมายถึง API version 2 ซึ่งเป็นเวอร์ชั่นหลักในปัจจุบัน และ key=api_key ก็คือค่า API Key ของเราถ้าพัฒนาเสร็จแล้วก็ไปขอ API Key ใหม่โดยใช้ domain name ของจริงแล้วก็นำมาแทนที่ตรงนี้ครับ
    2. <script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;amp;amp;amp;v=2&amp;amp;amp;amp;amp;amp;amp;amp;key=ABQIAAAAeNsNnRXUdrpgSw3qfvhz5hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQKXEKxoc7nW6rPe_Qv-bqip6q6Kw" type="text/javascript"></script>
  2. เขียน javascript เพื่อเรียกใช้งาน Google Maps API จาก script จะเห็นการเรียก function GBrowserIsCompatible() เพื่อเป็นการตรวจสอบว่า browser รองรับหรือเปล่าก่อนจะสร้าง object map อันนี้เป็น pattern ในการเริ่มสร้าง map เลยครับ ที่อยากให้สังเกตุอีกอันนึงคือ GMap2(document.getElementById(“map”)); parameter ที่ใช้ในการสร้าง object GMap2 เป็นชื่อของ DIV Element ที่จะให้ google ใช้เป็นพื้นที่ของแผนที่
    3. <script type="text/javascript">// <![CDATA[

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

// ]]></script>
  3. ต่อไปก็เป็นส่วนเรียกใช้ function load() ที่เขียนเอาไว้ โดยจากตัวอย่างของ Google เค้าเขียนง่ายๆ โดยการผูกกับ Event onload ของ Page body ส่วน GUnload() ที่ผูกไว้กับ Event onunload เป็น function ของ Google Maps ครับ เอาไว้ release memory ป้องกันพวก memory leak ประมาณนั้น ใส่ไว้กันเหนียว
    4. 

  4. จาก script ในข้อ 3 อยากให้สังเกตุ DIV Element ที่มี id=”map” ครับ พื้นที่ตรงนี้แหละครับที่จะถูกแสดงแผนที่ ตามที่เรากำหนดไว้ใน function load() ในส่วนที่ 2 เราสามารถกำหนดขนาดเล็กใหญ่ของแผนที่ได้ โดยกำหนด style ให้กับ DIV Element อันนี้ครับ
    5. 



เท่านี้ก็เป็นอันเสร็จการเพิ่มแผนที่ Google Maps เข้าไปในเวปของเราแล้วครับ ลองดูผลงานจากตัวอย่าง เขียนไปเขียนมาทำไมมันยาวจัง แล้วตอนต่อไปมันจะยาวขนาดไหนเนี้ย :) 


ผมเขียนแล้วอ่านรู้เรื่องไหมครับ แนะนำและแสดงความคิดเห็นใน comment นะครับ แล้วจะนำไปปรับปรุงสำหรับตอนต่อๆไปครับ

]]>
			http://www.tanomsak.com/index.php/2008/12/google-maps-tutorial-1/feed/
		67