มาเริ่มต้นกันกับ Google Maps JavaScript API V3 อย่างแรกเลย ใน Version นี้ไม่ต้องใช้ API Key เหมือนกับ Version 2
ขั้นแรก ต้อง import API จาก server google กันก่อน โดยเพิ่ม script ในส่วน <head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
ต่อมาก็จะต้องสร้างพื้นที่ไว้สำหรับแสดงแผนที่ ซึ่ง API Google Maps ใช้ div element เป็นพื้นที่สำหรับแสดงแผนที่
<div id="map_canvas" style="width:100%; height:100%"></div>
หลังจากมีพื้นที่สำหรับแสดงแผนที่แล้ว เราก็จะเริ่มสร้าง Map
var myLatlng = new google.maps.LatLng(13.742762, 100.535631);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
แต่ก่อนจะเริ่มสร้าง Map เราต้องการให้ Map แสดงตำแหน่งที่เราต้องการ ซึ่งเราจะต้องสร้าง Map Options Object ขึ้นมาก่อน และจะต้องสร้างค่า latlng เพื่อส่งเข้าไปย้ัง map's options พร้อมกับให้ Map เราเิ่ริ่มต้นเป็นแบบแผนที่ 2D และซูมแผนที่ด้วย
หลังจากนั้นก็จะเริ่มสร้าง Map Object โดยส่งค่า element สำหรับวาดแผนที่ลงไป ซึ่งวิธีอ้างถึง element เราจะใช้คำสั่ง document.getElementById() พร้อมกับส่ง options ต่างๆ ที่ำเรากำหนดให้
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Map Object จะสร้างขึ้นได้ จะต้องรอให้ element ที่เป็นพื้นที่แสดงแผนที่ถูกสร้างขึ้นมาก่อน เราจึงวางฟังก์ชั่นการสร้าง Map ไว้หลังจากที่หน้าจอถูกโหลดเสร็จแล้ว
<body onload="initialize()">
<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);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Blog ที่ไว้ตามข่าวคราวสำหรับ Developers ตามลิ้งนี้ครับ
Google Geo Developers Blog
อยากจะลองเล่นเกี่ยวกับ Google Maps ไปที่นี้เลย
Code Playground
บริษัท ที่รับพัฒนา Google Maps ในประเทศไทย
Computerlogy ตามลิ้งค์นี้ครับ Google Maps Developer
ไม่มีความคิดเห็น:
แสดงความคิดเห็น