แสดงตำแหน่งของคุณในแผนที่กับ google map

จากบทความก่อนหน้านี้ "หาตำแหน่งของคุณด้วย geolocation ใน html5" มาแล้ว เราจะได้ค่า latitude, longitude และค่าอื่นๆมา คราวนี้ เราจะเอาค่า lat/long มาใช้ในการแสดงตำแหน่งบนแผนที่กับ google map กันครับ.

เริ่มจากสร้างหน้า html พื้นๆแบบนี้รองรับไว้ก่อน


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>ทดสอบ geolocation + google map</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    </head>
    <body>
        ตำแหน่งของฉัน:
        <div id="geo_data"></div>
        <div id="map_canvas" style="background: #f5f5f5; height:300px; width: 300px;"></div>
    </body>
</html>

ภายใน div id geo_data ก็เอาไว้แสดงข้อมูลพวก lat/lng อะไรต่างๆเหมือนเดิม และภายใน div id map_canvas เอาไว้แสดง google map โดยกำหนดความกว้างและสูงด้วย style ให้เรียบร้อย

แทรก


<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

ภายใน <head>...</head>

ต่อไปจะมาทำภายในส่วนของ <body>...</body>

หลักการทำงานคือมีการตรวจหาก่อนว่าเบราเซอร์รองรับ geolocation หรือไม่ หากรองรับก็ใช้การหา geo ตามปกติไป
หากไม่รองรับ ก็ใช้ค่าเริ่มต้น โดยค่าเริ่มต้นของตำแหน่ง lat/lng เราอาจจะกำหนดให้เป็นกรุงเทพฯ ตามตัวอย่าง
จากนั้นก็เรียก google map มาแสดงโดยกำหนด center ตาม lat/lng และกำหนดให้มันแสดง marker เพื่อให้เห็นง่ายๆว่าคุณ อยู่ตรงไหนในแผนที่ ต่อไปครับ
ก็จะออกมาดังโค้ดต่อไปนี้


<script type="text/javascript">
    var initialLocation;
    var bangkok = new google.maps.LatLng(13.755716, 100.501589);// กำหนดตำแหน่งค่าเริ่มต้นก่อนเลย สมมุติเป็นกรุงเทพฯ
            function initialize() {
                var myOptions = {
                    zoom: 15,// ค่าซูมยิ่งมากยิ่งใกล้
                    mapTypeControl: false,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);
                
                // ตรวจว่ารองรับ geolocation หรือไม่
                if ( navigator.geolocation ) {
                    navigator.geolocation.getCurrentPosition(function(location) {
                        var location = location.coords;
                        $("#geo_data").html('lat: '+location.latitude+'<br />long: '+location.longitude);
                        initialLocation = new google.maps.LatLng(location.latitude, location.longitude);// ระบุตำแหน่งแสดงแผนที่ให้ google map
                        map.setCenter(initialLocation);// ให้ตำแหน่งแสดงแผนที่อยู่ตรงกลางพอดี
                        setMarker(initialLocation);// เรียกฟังก์ชั่นแสดง marker ในตำแหน่ง lat/lng ที่ตรวจได้
                    }, function() {
                        handleNoGeolocation();// ตรวจตำแหน่ง lat/lng ไม่ได้ ให้ใช้ค่าเริ่มต้น
                    });
                } else {
                    handleNoGeolocation();// ตรวจตำแหน่ง lat/lng ไม่ได้ ให้ใช้ค่าเริ่มต้น
                }
                
                // no geolocation ฟังก์ชั่นนี้จะถูกเรียกใช้งานเมื่อตรวจค่า lat/lng ไม่ได้
                function handleNoGeolocation() {
                    map.setCenter(bangkok);
                    setMarker(bangkok);
                    $("#geo_data").html('lat: 13.755716<br />long: 100.501589');
                }
                
                // set marker
                function setMarker(initialName) {
                    var marker = new google.maps.Marker({
                        draggable: true,
                        position: initialName,
                        map: map,
                        title: "คุณอยู่ที่นี่."
                    });
                    // ด้านล่างนี้คือกำหนดให้สามารถลากตำแหน่ง marker ได้
                    google.maps.event.addListener(marker, 'dragend', function(event) {
                        $("#geo_data").html('lat: '+marker.getPosition().lat()+'<br />long: '+marker.getPosition().lng());
                    });
                }
            }
</script>

ในตอนนี้ เมื่อลองเรียกดู แผนที่จะยังไม่แสดงอะไรทั้งนั้น เพราะการทำงานมันอยู่ในฟังก์ชั่น initialize() ดังนั้นเราต้องเรียกฟังก์ชั่นนี้เมื่อหน้าเว็บโหลดเสร็จ.
ขั้นนี้หลายคนอาจใช้ onload ใส่ในแทก <body> แต่เราจะใช้ jquery มาช่วยแทนนะครับ
เพิ่มโค้ดเรียกใช้ initialize() ต่อไปนี้ใน <script>...</script> ต่อจากด้านบนได้เลย


$(document).ready(function() {
    initialize();
});

ตัวอย่างโค้ดโดยรวมจะเป็นแบบนี้...


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>ทดสอบ geolocation + google map</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    </head>
    <body>
            ตำแหน่งของฉัน:
        <div id="geo_data"></div>
        <div id="map_canvas" style="background: #f5f5f5; height:300px; width: 300px;"></div>
        
        <script type="text/javascript">
        var initialLocation;
            var bangkok = new google.maps.LatLng(13.755716, 100.501589);
            function initialize() {
                var myOptions = {
                    zoom: 15,
                    //center: latlng,
                    mapTypeControl: false,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);
                
                // detect geolocation lat/lng
                if ( navigator.geolocation ) {
                    navigator.geolocation.getCurrentPosition(function(location) {
                        var location = location.coords;
                        $("#geo_data").html('lat: '+location.latitude+'<br />long: '+location.longitude);
                        initialLocation = new google.maps.LatLng(location.latitude, location.longitude);
                        map.setCenter(initialLocation);
                        setMarker(initialLocation);
                    }, function() {
                        handleNoGeolocation();
                    });
                } else {
                    handleNoGeolocation();
                }
                
                // no geolocation
                function handleNoGeolocation() {
                    map.setCenter(bangkok);
                    setMarker(bangkok);
                    $("#geo_data").html('lat: 13.755716<br />long: 100.501589');
                }
                
                // set marker
                function setMarker(initialName) {
                    var marker = new google.maps.Marker({
                        draggable: true,
                        position: initialName,
                        map: map,
                        title: "คุณอยู่ที่นี่."
                    });
                    google.maps.event.addListener(marker, 'dragend', function(event) {
                        $("#geo_data").html('lat: '+marker.getPosition().lat()+'<br />long: '+marker.getPosition().lng());
                    });
                }
            }
            
            $(document).ready(function() {
                initialize();
            });
        </script>
    </body>
</html>

ให้ทดลองเรียกดูผ่าน web server (ถ้าทำใน localhost ก็เรียกเป็น https://localhost/geo-ggmap.html เป็นต้น)
หากยังไม่มีการอนุญาต หน้าเว็บจะขอให้ share location ก็กดอนุญาตไปครับ แล้วก็จะสามารถแสดงตำแหน่งของคุณ บนแผนที่ได้สำเร็จ

การแสดงตำแหน่งบนแผนที่นี้นั้น ถ้าหากใช้ internet บ้านธรรมดาๆโดยไม่มีอุปกรณ์ GPS ช่วย อาจจะไม่สามารถหาตำแหน่งที่แท้จริงได้
หากมีอุปกรณ์ GPS ช่วยทำงาน หรือเรียกดูผ่านโทรศัพท์มือถือ/internet โดยใช้โทรศัพท์มือถือ ก็จะสามารถแสดงตำแหน่งที่แท้จริงของคุณได้ครับ

ใส่ความเห็น ยกเลิกการตอบ