phonegap
Table of Contents
TARGET
ตั้งใจว่าเขียนโปรแกรมแล้วอธิบายแต่ละขั้นลงในเว็บ เพื่อที่จะได้เวลามีเด็กทำ senior project แล้วควรจะได้โปรแกรมที่ทำอะไรได้เยอะกว่านี้ จะสร้างโปรแกรมสุ่มร้านข้าว ชื่อโปรแกรมว่า กินอะไรดี(GinarraiD) โดยที่โปรแกรมจะมีการสุ่มโดยการเขย่ามือถือเพื่อเลือกร้านข้าวจากฐานข้อมูลแล้วแสดงบน google maps พร้อมบอกเส้นทางที่จะไป
แผนที่
สนใจว่าจะเรียกใช้แผนที่ของ Google Maps
การสร้าง Key ของ Google Maps API
เราต้องการที่จะนำค่าพิกัดของ GPS มาใช้งานกับ Google Maps เราต้องไปขอใช้งานแผนที่จาก Google ก่อน โดยเราจะไปสร้าง key ของ Google Maps API จากนั้นค่อยนำมาใช้กับโปรแกรมของเรา
- เข้าไปที่ https://developers.google.com/?hl=th
- จากนั้นเลือก เว็บ
- หัวข้อ Develop เลือก Maps
- หน้า Google Maps APIs for Web ให้เลือก Get a key
- ตรงนี้เขาจะให้เราสร้าง project ก่อน แล้วค่อย Activate the Google Maps Web APIs แล้วถึงจะสร้าง Key เราก็ตอบ continue
- เราก็สราง project แล้วเลือกชื่อ project จากนั้น continue
- จะเป็นหน้า Create browser API key ตั้งชื่อแล้วก็ create
- จะได้ API key มาแล้วเอาไปทดสอบกับ code ด้านล่าง แทรกตรง API_KEY ตอนนี้แผนที่ขึ้นใน browser แล้ว
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
phonegap.txt · Last modified: 2015/11/10 13:29 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
