วันจันทร์ที่ 26 มีนาคม พ.ศ. 2555

ลองเล่นกับ Google Maps API V.3 : แผนที่แรกของผม

         ผมได้เห็นหลายๆเว็บไซต์ที่ใช้บริการติดแผนที่ของGoogle หรือ Google Maps API ก็เลยมีความคิดที่อยากลองทำบ้าง เผื่ออนาคตอาจได้นำมาใช้งานบ้างครับ (เพียงแต่ตอนนี้ยังไม่มีโอกาสเอามาใช้งาน)  ก็เลยเข้าไปที่เว็บ https://developers.google.com/maps/documentation/javascript/tutorial
ก็ได้ลองทำตัวอย่างแรกจากหน้านี้แหละครับ จากนั้นก็ค่อยๆต่อยอดจนได้ผลลัพธุ์ที่ต้องการ และจะนำเสนอให้ท่านได้ชมกันครับ ^_^ และอยากจะบอกDocumentเขียนได้ดีมากครับ และมีโค๊ดตัวอย่างประกอบดีมากๆเลยครับ แนะนำให้เข้าไปศึกษาตามลิงค์ที่กล่าวถึงข้างต้นได้เลยครับ
  ขออธิบายนิดนึงครับ ว่า Google Map API คืออะไร
        Google Maps API คือบริการของ Google อีกรูปแบบหนึ่ง เราสามารถนำข้อมูลของ Google Maps มาแสดงในหน้าเว็บเพจของเราตามที่เราต้องการ เช่น สามารถกำหนดตำแหน่งที่ตั้ง, สถานที่, ที่นัดหมาย เป็นต้น โดยเราสามารเรียกใช้ข้อมูลและMethodต่างๆที่Googleได้จัดเตรียมไว้ในแล้วหรือที่เราเรียกว่า API (Application Programming Interface)
เอาล่ะครับไม่อยากอธิบายมาก Copy โค๊ดข้างล่างไปลองใช้กันเลยครับ

<!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>แผนที่ Goo</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function myMaps() {
var mapsGoo=google.maps;
var Position=new mapsGoo.LatLng(13.723419,100.476232);//ละติจูด,ลองติจูด เริ่มต้น โดยผมให้เริ่มต้นที่ กรุงเตบ
var myOptions = {
center:Position,//ตำแหน่งแสดงแผนที่เริ่มต้น
zoom:8,//ซูมเริ่มต้น คือ 8
mapTypeId: mapsGoo.MapTypeId.ROADMAP //ชนิดของแผนที่
};
var map = new mapsGoo.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new mapsGoo.InfoWindow();
var marker = new mapsGoo.Marker({//เรียกเมธอดMarker(ปักหมุด)และกำหนดออปชั่น
position: Position,
draggable:true
//title:"Hello World!"
});
var Posi=marker.getPosition();//เลือกเมธอดแสดงตำแหน่งของตัวปักหมุด
$('#mapsLat').val(Posi.lat());//ละติจูดของMarker
$('#mapsLng').val(Posi.lng());//ลองติจูดของMarker
marker.setMap(map);//แสดงตัวปักหมุดโลด!!
//ตรวจจับเหตุการณ์ต่างๆ ที่เกิดใน google maps
mapsGoo.event.addListener(marker, 'dragend', function(ev) {//ย้ายหมุด
var location =ev.latLng;
$('#mapsLat').val(location.lat());//เอาค่าละติจูดไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ mapsLat
$('#mapsLng').val(location.lng());//เอาค่าลองติจูดไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ mapsLng
});
mapsGoo.event.addListener(marker, 'click', function(ev) {//คลิกที่หมุด
var location =ev.latLng;
$('#mapsLat').val(location.lat());//เอาค่าละติจูดไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ mapsLat
$('#mapsLng').val(location.lng());//เอาค่าลองติจูดไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ mapsLng
infowindow.setContent('ละติจูด:'+location.lat()+'ลองติจูด:'+location.lng());
infowindow.open(map, marker);
});
mapsGoo.event.addListener(map,'zoom_changed',function(ev){//ซูมแผนที่
zoomLevel = map.getZoom();//เรียกเมธอด getZoom จะได้ค่าZoomที่เป็นตัวเลข
$('#mapsZoom').val(zoomLevel);//เอาค่า Zoom Level ไปแสดงที่ Tag HTML ที่มีแอตทริบิวต์ id ชื่อ zoom
});
//infowindow.setContent("จุ๊กกรู๊");
//infowindow.open(map, marker);
}
$(document).ready(function(){
myMaps();
});
</script>
</head>
<body>
<div id="map_canvas" style="width:650px; height:450px"></div><br />
<form action="" method="post">
ละติจูด: <input type="text" size="20" id="mapsLat" /><br /><br />
ลองติจูด <input type="text" size="20" id="mapsLng" /><br /><br />
ซูม <input type="text" size="3" id="mapsZoom" value="8" /><br /><br />
<input name="bt_savemaps" type="button" value="บันทึกข้อมูล" />
</form>
</body>
</html>
ผมได้เขียนคำสั่งตรวจจับเหตุการณ์ในแผนที่ไว้ 3 เหตุการณ์ด้วยกันคือ การคลิกลากเคลื่อนย้ายหมุด (dragend) , คลิกที่หมุด (click)และซูมแผนที่( zoom_changed) เมื่อมีเหตุการณ์เกิดขึ้นก็ให้นำค่าไปเก็บไว้ใน Textfield ก็จะได้ค่า 3 ค่า คือ
ละติจูด,ลองติจูด และ ค่า Zoom Level และเราก็สามารถนำค่าที่ได้เหล่านี้ไปใช้ประโยชน์ได้ครับ เช่น บันทึกลงฐานข้อมูล แต่ผมไม่ขอเขียนโค๊ดในส่วนของฐานข้อมูลนะครับ  อยากฝากเอาไว้เป็นการบ้านให้ท่านผู้อ่านดีกว่าครับ และผมเองก็เพิ่งได้ลองศึกษาวันนี้เป็นวันแรกครับ และมีหลายเรื่องของ Google Maps ให้ต้องศึกษากันต่อไป เขียนผิดถูกหรือเข้าใจคลาดเคลื่อนยังไงก็ขออภัยใน ณ ที่นี้ด้วยครับ ^_^

ขอ ปล.นิดนึง : โค๊ดทืใช้ในบทความนี้เป็นโค๊ดสำหรับใช้รันใน Localhost เท่านั้นครับ ถ้าต้องการจะเอาไปใช้กับเว็บไซต์จริงๆ คุณจะต้องขอ KEY กับทาง Google ก่อนครับ โดยระบุ Parameter Request ดังนี้ http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE โดยให้ศึกษาจากที่นี่ ->https://developers.google.com/maps/documentation/javascript/tutorial

ขอบคุณเว็บเหล่านี้จากใจจริงครับ ที่ซึ่งเป็นแหล่งความรู้ให้ผมได้ศึกษา/ค้นคว้า ทำให้เข้าใจวิธีใช้งาน Google Maps API
https://developers.google.com/maps/documentation/javascript/overlays
http://stackoverflow.com/questions/4842493/google-maps-api-v3-problem-drag-and-drop-jquery-with-ie
https://developers.google.com/maps/documentation/javascript/tutorial
https://developers.google.com/maps/documentation/javascript/events

10 ความคิดเห็น :

  1. ขอบพระคุณมากๆครับ

    ขออนุญาติเอาโค้ดไปใช้กับ asp.net นะครับ

    ตอบลบ
  2. ด้วยความยินดีครับ ^___^

    ตอบลบ
    คำตอบ
    1. ก๊อบโค้ดไปวางแล้ว แต่มันไม่ขึ้นไม่แซบแว่ ต้องแก้ตรงไหนหรือป่าวครับ [แผนที่อะครับ]

      ลบ
    2. ปัญหาน่าจะมาจากบรรทัดที่ 13 ครับ

      <script type="text/javascript" src="jquery.js"></script>

      ให้เปลี่ยนเป็น

      <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

      ลบ
  3. นี้ต้อง Save File เป็นดอทอะไรอะคับผมเพิ่งหัดใหม่เลยไม่รู้รบกวนตอบที

    ตอบลบ
  4. โปรเจ็คคบค้นหาเส้นทางรถเมล์ :(21 พฤศจิกายน 2556 เวลา 03:44

    พี่คะ code sample ใน Google Maps API Web Services ของ Google Developers นี่สามารถเอามาใช้ใน php ได้รึปล่าวคะ ถ้าได้ต้องปรับเปลี่ยนตรงไหนอย่างไรบ้าง เพราะ ปกติแล้วมันเป็น oop ที่เริ่มต้นสร้างด้วย html5

    ช่วยชี้แนะด้วยนะคะ ขอบคุณล่วงหน้าค่ะ

    ตอบลบ
    คำตอบ
    1. เอาไปใช้ได้ครับผม ถ้าเป็นเขียนแบบOOPโดยใช้หลักการ MVC มันจะทำงานในของ View ครับ ซึ่งก็คือ Javascript ครับ...ขออภัยที่ตอบช้าครับ

      ลบ
  5. ขอบคุณมากครับ ผมลองศึกษาโค้ดอื่นมาบ้าง ของผมตกหลุ่น บรรทัดที่ 13 เหมือนกัน

    ตอบลบ
  6. ก็อปโค้ดมาแล้วขึ้น
    "อ๊ะ! มีบางอย่างผิดพลาด
    หน้านี้ไม่ได้โหลด Google Maps อย่างถูกต้อง ดูคอนโซล JavaScript สำหรับรายละเอียดทางเทคนิค"
    ต้องแก้ยังไงค่ะ

    ตอบลบ