Table of Contents

TARGET

ตั้งใจว่าเขียนโปรแกรมแล้วอธิบายแต่ละขั้นลงในเว็บ เพื่อที่จะได้เวลามีเด็กทำ senior project แล้วควรจะได้โปรแกรมที่ทำอะไรได้เยอะกว่านี้ จะสร้างโปรแกรมสุ่มร้านข้าว ชื่อโปรแกรมว่า กินอะไรดี(GinarraiD) โดยที่โปรแกรมจะมีการสุ่มโดยการเขย่ามือถือเพื่อเลือกร้านข้าวจากฐานข้อมูลแล้วแสดงบน google maps พร้อมบอกเส้นทางที่จะไป

แผนที่

สนใจว่าจะเรียกใช้แผนที่ของ Google Maps

การสร้าง Key ของ Google Maps API

เราต้องการที่จะนำค่าพิกัดของ GPS มาใช้งานกับ Google Maps เราต้องไปขอใช้งานแผนที่จาก Google ก่อน โดยเราจะไปสร้าง key ของ Google Maps API จากนั้นค่อยนำมาใช้กับโปรแกรมของเรา

  1. เข้าไปที่ https://developers.google.com/?hl=th
  2. จากนั้นเลือก เว็บ
  3. หัวข้อ Develop เลือก Maps
  4. หน้า Google Maps APIs for Web ให้เลือก Get a key
  5. ตรงนี้เขาจะให้เราสร้าง project ก่อน แล้วค่อย Activate the Google Maps Web APIs แล้วถึงจะสร้าง Key เราก็ตอบ continue
  6. เราก็สราง project แล้วเลือกชื่อ project จากนั้น continue
  7. จะเป็นหน้า Create browser API key ตั้งชื่อแล้วก็ create
  8. จะได้ 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>