Google Maps APIs #สำหรับการพัฒนา Web Application

2 min readFeb 19, 2018

Google Maps APIs คือ Library ที่เป็นชุดคำสั่งของทาง Google ที่พัฒนาขึ้นมาเพื่อให้เราสามารถเรียกใช้แผนที่และ Service ต่างๆของทาง Google เพื่อให้เรานำมาใช้พัฒนา Web App และ Mobile App (Android, iOS)

มาเริ่มต้นใช้ Google Maps APIs กันด้วยภาษา Javascript กันจะเป็นตัวอย่างเพื่อเรียกใช้งานฟรีภายในเครื่องเรา แต่ถ้าเราอยากนำไปพัฒนา Web App หรือ Mobile App ของเราอาจจะต้องมีค่าใช้จ่ายให้กับทาง Google อันนี้ต้องลองไปศึกษาข้อมูลกันดูอีกทีครับตามลิงค์ที่ให้ได้เลย Google Maps APIs

<!doctype html>
<html>
    <head>
        <title>Map</title>
        <script async defer
            src="https://maps.googleapis.com/maps/api/js">
            </script>
    </head>
    <body onload ='start()'>
        <div id='main' style='width:100; height:400px; '></div>
        <script>
            var first = null
            function start(){ 
                var main = document.getElementById('main')
                var data = { zoom: 7, center: {lat:14, lng:100}}
                first = new google.maps.Map(main, data)
                new google.maps.Marker({map: first, position:{lat:13.755824,lng:100.567428 }})
            }
        </script>
    </body>
</html>

เราใช้คำสั่งgoogle.maps.Markerเพื่อให้มันไปกำหนดจุดสีแดงตาม Latitude, Longitude ที่เรากำหนดไว้

แต่ถ้าข้อมูลของเรามาในรูปแบบของ Array ละเราต้องทำไงยังไงมาดูกัน

<!doctype html>
<html>
    <head>
        <title>Map</title>
        <script async defer
            src="https://maps.googleapis.com/maps/api/js">
            </script>
    </head>
    <body onload ='start()'>
        <div id='main' style='width:100; height:400px; '></div>
        <script>
            var first = null
            var item = [ { lat:53, lng: -2.2}, {lat: 53, lng: -3},                         { lat:51, lng:-0.3}, {lat:52, lng:-1.2 } ]
            function start(){
                var main = document.getElementById('main')
                var data = { zoom: 6.5, center: {lat:52, lng:0} }
                first = new google.maps.Map(main, data)
                for (var i of item){
                    new google.maps.Marker({map: first, 
                              position: i})
                }
            }
        </script>
    </body>
</html>

บทความนี้ก็เป็นอีกหนึ่งวิธีในการเขียนในการ Google Maps APIs สำหรับใครที่ลองมาหลายวิธีแล้วหรือยังไม่เคยเขียนมาก่อนเลย ก็นำไปศึกษากันได้ครับ

Google Maps APIs #สำหรับการพัฒนา Web Application

Written by James Teerayuth