<!-- Q2 ทดลองใช้ map options ต่างๆ เช่น
projection
initial layer
zoom
autoResize
ใช้เครื่องมือสร้างฟอร์มเพื่อปรับเปลี่ยนค่า map options เช่น combo box, check box, slider เป็นต้น  -->
<!-- Q7 ลองเขียนโปรแกรมแสดงแผนที่ โดยให้เลือกว่าจะแสดง layer แผนที่ที่เป็น
ภาพดาวเทียม
เส้นสีจราจร
HYDRO
OSM
-->
<!-- 
Document ของ longdomap API 2.0
http://api.longdo.com/map/doc/content/
ตัวอย่าง code และสอนการใช้งาน
http://api.longdo.com/map/doc/demo/
หน้าเว็บ map API
http://map.longdo.com/longdo-map-api
 -->
 
<html>
<head>
<title>Map 2&7</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css"> /* จัดหน้าเว็บให้เป็นระเบียบด้วย CSS */
	 
#map{ width: 85%; height: 100%; float: left; margin: 0 10 0 0; padding:0;}
body{ margin: 0 0 0 0;}
#options{margin-left: 10;}


</style>

    <script type="text/javascript" src="http://api.longdo.com/map/?key=xxxxxxxxxxxxxx"></script>
	<script type="text/javascript" src="script.js"></script>  <!-- แยกสคริปไว้อีกไฟล์นึงนะครับ-->
	
</head>

<body onload="init();">
<div id = "map"></div>
<div id = "options"> <!-- div options ที่จะแสดงตัวเลือกทั้งหมด -->
<div\>Select map type:</div>

<select name="types" onchange="checkField(this.value)"><!-- drop down box เพื่อเลือก layer -->
  <option value="normal">Normal</option>
  <option value="political">Political</option>
  <option value="google">Google</option>
  <option value="gray">Gray</option>
  <option value="hydro">Hydro</option>
  <option value="sattelite">Sattelite</option>
  <option value="mapquest">Mapquest</option>
  <option value="osm">OSM</option>  
</select><br>
<input type="checkbox" id="box1" value="traffic" onchange="layertrig()">Traffic<br>     <!-- การแสดง overlays ใช้ checkbox ในการเปิด/ปิด -->
<input type="checkbox" id="box2" value="cameras" onchange="layertrig()">Cameras<br>		<!--*ถึงแม้ traffic จะเป็น layer แต่ในทางปฏิบัติการใช้งานแบบ เปิด/ปิด จะเหมาะสมกว่า-->
<input type="checkbox" id="box3" value="events" onchange="layertrig()">Events<br>
<button onclick="curloc()">Crosshair Location</button><br>  <!--Option: วัดพิกัด ณ จุดกากบาทของ map (button & textfield) -->
<div\>lat:</div>											<!--สังเกตว่า button จะใช้ event onclick เรียกฟังค์ชั่นเมื่อคลิกปุ่ม -->
<input type="text" id="latitude"><br>
<div\>lon:</div>
<input type="text" id="longitude"><br>						
<button onclick="jumpto()" >JUMP!</button><br>				<!--Option: JUMP สู่พิกัดใน textfield lat,lon -->
<button onclick="map.location('GEOLOCATION')";>Where am I?</button><br>  <!-- Option: หาตำแหน่งปัจจุบัน ;          เนื่องจากเป็นคำสั่งบรรทัดเดียวจึงไม่จำเป็นต้องเขียน function สั่งเรียกใน onclick ได้เลย-->
<div\>ZoOM:</div>																					<!--Option: zoom โดยใช้ slider-->
<input type="range" name="zoom" id="zoomzoom" min="3" max="20" onchange="zoomtrig()" value="7">		<!--แต่ว่าเมื่อใช้ scroll wheel ในการซูม ตัวเลื่อนของ slider ไม่ได้มีการเปลี่ยนค่าตามไปด้วย
																				แก้ปัญหานี้โดยการเปิดใช้งาน event ของ longdomap API เพื่อเรียกฟังค์ชั่นทุกครั้งที่เกิด event ในกรณีนี้จะใช้ event zoom	
																				สามารถดู event ทั้งหมดได้ที่  http://api.longdo.com/map/doc/content/	-->
</div>
</body>
</html>