จากบทความก่อนหน้า Google Maps V3 : Hello, World ได้พูดถึงการไปเรียก Maps API ของ Google เพื่อนำ Maps มาแสดงบนหน้า web ของเรา บทความนี้เราจะนำหมุดหรือเรียกว่า Marker มาแสดงบนแผนที่
Marker จะแสดงบนแผนที่ได้ควรจะมี Options อย่างน้อยสองอย่าง คือ ตำแหน่ง และ แผนที่ที่จะให้ปักหมุดลงไป ตำแหน่งและแผนที่ ในที่นี่ก็คือ Properties ใน MarkerOptions ที่ชื่อว่า map และ position โดย position มี Type เป็น LatLng
var marker = new google.maps.Marker({
position: latlng,
map: map
});
แค่นี้ก็สามารถนำ Marker มาอยู่บน Maps เราได้แล้ว ถ้าอยากจะเปลี่ยน Icon ก็เรียก Method setIcon แล้วส่ง Parameter เป็น Path ของรูป Icon ที่อยากเปลี่ยน ส่วน Icon หาได้ที่ http://code.google.com/p/google-maps-icons/
marker.setIcon('http://google-maps-icons.googlecode.com/files/restaurant.png');
อยากใช้ mouse คลิกเพื่อเคลื่อนย้าย Marker ไปไหนมาไหนบน Maps ก็เซ็ตค่า Property draggable เป็น true
marker.draggable = true;
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(13.742762, 100.535631);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setIcon('http://google-maps-icons.googlecode.com/files/restaurant.png');
marker.draggable = true;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น