จากบล็อคก่อนหน้านี้ที่แนะนำการใช้งาน Google Maps V3 ให้ลองไปใช้ดูกันแล้วนั้น อย่างหนึ่งที่ไม่ชอบก็คือตำแหน่งเริ่มต้นนั้นมันตายตัวไปหน่อย คือกำหนดแล้วฝังเข้าไปในโค้ด JavaScript เลย แล้วถ้าเราต้องการทำเว็บแอพพลิเคชั่น (เพื่อให้มันสั้นลงต่อไปจะเรียก ‘แอพ’ หรือ ‘app’) ที่คำนึงถึงตำแหน่งผู้ใช้เป็นสำคัญ เช่น ตำแหน่งร้านอาหารที่น่าสนใจใกล้เคียงนั้นๆ หรือ ร้านค้าลดราคาใกล้ๆ เป็นต้น ดังนั้นอย่างแรกที่จำเป็นก็คือตำแหน่งที่เราอยู่ปัจจุบัน เพื่อนำมาข้อมูลที่เกี่ยวข้องมาแสดงผล
ซึ่งในตัวอย่างที่จะทำนี้เป็นการพัฒนาต่อจากบล็อคก่อนหน้านี้ดังนั้นก็ให้ดาวน์โหลดไฟล์ maps-demo.html.zip มาไว้ที่เครื่องก่อนเพื่อเตรียมตัวแก้ไข ซึ่งด้านในมีโค้ดด้านล่างนี้ (ดูตัวอย่างการแสดงผล)
<!DOCTYPE html>
<html>
<head>
<title>Google Maps V3 Demostrate</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
function initWithMapStart() {
var latlng = new google.maps.LatLng(13.75, 100.517);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var maps = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions
);
var marker = new google.maps.Marker({
position: latlng,
map: maps,
animation: google.maps.Animation.DROP,
title: "Welcome to Thailand"
});
var info = new google.maps.InfoWindow({
content: '<h1>Hello</h1>'
});
google.maps.event.addListener(marker, 'click', function(){
info.open(maps, marker);
});
}
</script>
<style>
header,
footer {
text-align: center;
}
#map-canvas {
display: block;
margin: 20px auto;
height: 400px;
width: 640px;
background-color: #ccc;
}
</style>
</head>
<body onload="initWithMapStart()">
<header>
<h1>Google Maps Demo</h1>
<header>
<article>
<div id="map-canvas"></div>
</article>
<footer>
<small><a href="http://we.in.th/">we.in.th</a></small>
</footer>
</body>
</html>
fig.1: โค้ดเดิมสำหรับแสดงผลแผนที่
จากที่บอกในข้างต้นว่าจะพัฒนาต่อจากของเดิมที่มีอยู่แล้ว โดยสิ่งที่เพิ่มขึ้นมากก็คือคุณสมบัติที่เรียกว่า Geolocation ซึ่งอยู่ใน HTML5 ทำสามารถดึงข้อมูลตำแหน่ง เช่น พิกัด (Latitude, Longitude) หรือ ที่อยู่ปัจจุบัน ของผู้ใช้ขณะนั้นมาแสดง แต่ก่อนที่จะแสดงนั้นเบราเซอร์จะขออนุญาตจากผู้ใช้ก่อนเสมอ หากไม่ต้องการให้เว็บไซต์นำตำแหน่งไปใช้งานก็ปฏิเสธได้ ใช้งานได้กับ IE9+, Firefox 3.5+, Safari5+ และ Google Chrome 4+ โดยที่ ดังนั้นให้เพิ่มโค้ดด้านล่างถัดจากบรรทัดที่ 32 ลงไป ดังนี้
if ( (typeof( window.navigator) != 'undefined') && !!navigator.geolocation ) {
navigator.geolocation.getCurrentPosition(
function(position) {
panToCurrentLocation(position, maps, marker);
},
errorOccur
);
}
fig.2: โค้ดสำหรับพิกัดที่ได้จากเบราเซอร์มาแสดงผล
โดยที่
- บรรทัดที่ 1 คือ การตรวจสอบว่าเบราเซอร์นี้รองรับ Geolocation หรือไม่
- บรรทัดที่ 2-7 คือ การเรียกใช้งาน Geolocation ผ่านตัวแปร navigator ซึ่งก่อนจะดึงข้อมูลตำแหน่งของผู้ใช้เบราเซอร์จะขออนุญาตผู้ใช้ก่อนเสมอ เมื่อได้รับอนุญาตและได้ตำแหน่งผู้ใช้เรียบร้อยแล้วจะส่งไปยัง
function(position)(บรรทัดที่ 3-5) โดยจะส่งไปให้ฟังก์ชั่นpanToCurrentLocationต่อไปพร้อมกับตัวแปรposition,mapsและmarkerแต่ถ้าไม่สามารถอ่านพิกัดได้จะไปทำที่ฟังก์ชั่นerrorOccurแทน
ถัดไปคือการสร้างฟังก์ชัน panToCurrentLocation และ errorOccur ขึ้นใหม่ ตามที่ได้ระบุไว้ใน fig.2 ดังนี้
function panToCurrentLocation(position, maps, marker) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
maps.setCenter( latlng );
maps.panTo( latlng );
marker.setPosition( latlng );
marker.setAnimation( google.maps.Animation.DROP );
}
function errorOccur( error ) {
console.log( error );
}
fig.3: JavaScript สำหรับเปลี่ยนตำแหน่งในแผนที่
โดยที่
- บรรทัดที่ 2: สร้างพิกัดจากแผนที่ใหม่
- บรรทัดที่ 3: กำหนดจุดศูนย์กลางให้แผ่นที่ใหม่
- บรรทัดที่ 4: เลื่อนตำแหน่งของแผนที่ไปยังตำแหน่งใหม่ที่ได้
- บรรทัดที่ 6: เปลี่ยนตำแหน่งของ marker ให้แสดงที่ตำแหน่งปัจจุบัน
- บรรทัดที่ 7: กำหนดแอนนิเมชั่นที่จะใช้แสดงผล marker
จากที่ทดลองใช้งานการค้นหาตำแหน่งนั้นอาจคลาดเคลื่อนได้ไม่ถูกต้องทุกครั้ง ดูตัวอย่างได้ที่ไฟล์ maps-demo-navigation หรือดาวน์โหลดไฟล์ maps-demo-navigation.html
ข้อมูลเพิ่มเติม: