หลังจากเปิดตัวการใช้งาน Openlayers ไปแล้วฟีดแบคกลับมาค่อนข้างดีมีหลายท่านชอบและนำไปใช้ จุดเด่นคือความง่ายและความยืดหยุ่น ผมก็พยายามจะเขียนคู่มือง่ายๆเพื่อให้สามารถนำไปฝึกใช้งานกัน แต่คงจะใช้เวลาสักระยะหนึ่งเนื่องจากช่วงนี้กำลังก้มหน้าก้มตาทำ thesis อยู่
ในหัวข้อนี้ผมจะเขียนถึงการใช้ openlayers กับ google map โดยใน openlayers api ได้มี class สำหรับเชื่อมต่อกับ google map api อยู่แล้ว เพียงแค่ท่านนำ google map key ไปใส่ก็สามารถทำงานได้ทันทีเลย ตัวอย่างต่อไปนี้ผมจะสาธิตการใช้ google map layers โดยท่านสามารถเขียน code ได้ดังต่อไปนี้
<html >
<head>
<title>OpenLayers Google Layer Example</title>
<link rel=”stylesheet” href=”http://openlayers.org/dev/theme/default/style.css” type=”text/css” />
<style type=”text/css”>
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<!– Google Map API Key –>
<script src=‘http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ’></script>
<script src=”http://openlayers.org/api/OpenLayers.js“></script>
<script type=”text/javascript”>
var map;
function init() {
//สร้่าง map object สำหรับ openlayers
map = new OpenLayers.Map(’map’);
// กำหนดประเภทของ map control bar
map.addControl(new OpenLayers.Control.LayerSwitcher());
// กำหนด layer type ของ google layers
var gphy = new OpenLayers.Layer.Google(
“Google Physical”,
{type: G_PHYSICAL_MAP}
);
var gmap = new OpenLayers.Layer.Google(
“Google Streets” // the default layers
);
var ghyb = new OpenLayers.Layer.Google(
“Google Hybrid”,
{type: G_HYBRID_MAP}
);
var gsat = new OpenLayers.Layer.Google(
“Google Satellite”,
{type: G_SATELLITE_MAP}
);
// เพิ่มชั้นข้อมูลประเภท google layers จาก google map ลงใน map object
map.addLayers([gphy, gmap, ghyb, gsat]);
// กำหนดตำแหน่งเริ่มต้นสำหรับแสดงผลแผนที่
map.setCenter(new OpenLayers.LonLat(100.652, 13.737), 7);
}
</script>
</head>
<body onload=”init()”>
<h1 id=”title”>Google Layer Demo</h1>
<div id=”tags”></div>
<p id=”shortdesc”>
ตัวอย่าง Google Map Layers on Openlayers Application
</p>
<div id=”map”></div>
</body>
</html>
