Realtime map with Firebase

กระทู้คำถาม

การพัฒนา Web Application JavaScript วิศวกรรมคอมพิวเตอร์ HTML

พอดี ผมทำ realtime map กับ firebase อยู่ อ่ะครับ แต่ โค้ดที่ผมทำยุ ก็หาๆ เอาตาม เน็ต อ่ะครับ ไม่ค่อยมีความรู้เรื่องเขียนโปรแกรมอ่ะครับ จุดที่ออกมาบน map เลยเป็นจุด ของ เครื่องคอมเราอ่ะครับ ไม่ใช่จุดของ lat lon ที่อยู่ใน firebase  อ่ะครับ อยากรู้ ว่าจะต้องแก้ โค้ด หรืออะไร ยังไงดี อ่ะครับ

นี่ไฟล์ .js ครับ

function getdata(){

    // Initialize Firebase
    var config = {
    apiKey: "AIzaSyBXtHjiGr2ds3DCzt5uuelIe8EX54FHSWg",
    authDomain: "nolbro-ae3d2.firebaseapp.com",
    databaseURL: "https://nolbro-ae3d2.firebaseio.com",
    storageBucket: "nolbro-ae3d2.appspot.com",
    };
  firebase.initializeApp(config);

  //var pre0bject = document.getElementById('nolbro-ae3d2');

  var dbRef0bject = firebase.database().ref().child('lat');
  dbRef0bject.on('value', snap => document.getElementById('lat').innerHTML = (snap.val()));


  var dbRef0bject = firebase.database().ref().child('lon');
  dbRef0bject.on('value', snap => document.getElementById('lon').innerHTML = (snap.val()));


  var dbRef0bject = firebase.database().ref().child('speed');
  dbRef0bject.on('value', snap => document.getElementById('speed').innerHTML = (snap.val()));

ต่อไป ไฟล์ .html ครับ

<html>
    <head>
    <meta charset="utf-8">
    <title>Firebase nolbro-ae3d2</title>
    <script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"></script>
    </head>
    <body>


    <button onclick="getdata()">TEST</button>
        <p>Lat</p><p id="lat"/>
        <p>Lon</p><p id="lon"/>
        <p>Speed</p><p id="speed"/>

        <div id="googleMap" style="display:inline-block;width:100%;height:100%;
    border-width:1px;border-style:inset;border-color: #FE9A2E;"></div>

        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDKgilsChXDFyaQpPalgjhaMMEWWWBT1ak&callback=initMap"
    async defer></script>
        <script src="app.js"></script>
        <script>

            initMap()
            function initMap() {
                var map = new google.maps.Map(document.getElementById('googleMap'), {
                    center: { lat: 13.754225319377445, lng: 100.50275802612305 },
                    zoom: 16
                });

                var infoWindow = new google.maps.InfoWindow({map: map});

                // Try HTML5 geolocation.
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function (position) {

                        var pos = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };
                        // infoWindow.setPosition(pos);
                        // infoWindow.setContent('คุณอยู่ที่นี่...');
                        map.setCenter(pos);

                        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
                        var marker = new google.maps.Marker({
                              position: pos,
                              map: map,
                              icon: iconBase + 'info-i_maps.png',
                              title: 'Hello World!',
                              label: { color: '#FE9A2E', fontWeight: 'bold', fontSize: '14px', text: 'นี่ไง Marker' }
                        });

                    }, function() {
                        handleLocationError(true, infoWindow, map.getCenter());
                    });
                } else {
                    // Browser doesn't support Geolocation
                    handleLocationError(false, infoWindow, map.getCenter());
                }
            }

            function handleLocationError(browserHasGeolocation, infoWindow, pos) {
                infoWindow.setPosition(pos);
                infoWindow.setContent(browserHasGeolocation ?
                                      'Error: The Geolocation service failed.' :
                                      'Error: Your browser doesn\'t support geolocation.');
            }
        </script>

    </body>
    </html>

โค้ดที่ผมใช้ มีประมาณนี้ครับ หาตาม google เอา อ่ะครับ ตามประสาคนไม่เก่งโปรแกรม ครับ อาจจะมีมั่ว บ้าง แต่ขอคำแนะนำ หรือตัวอย่างที่ เอาพิกัด ใน firebase มาพล็อตเป็นจดลงบน google map บ้างไหมครับ ขอบคุณครับ