Firebaseを使用した共同リアルタイムマッピングが機能しない

JSとGoogle Maps APIはかなり新しいです。私は、Googleがhereをリアルタイムでマップするための基本的なチュートリアルを進めようとしています。私は崇高なテキストを使用して、私のサーバー上にhtmlと.jsファイルを保存しています。 Firebaseアカウントを設定して参照しました。 Firebaseデータベースに緯度と経度を正しく入力するためのjavascriptを取得できません。Firebaseを使用した共同リアルタイムマッピングが機能しない

は、ここに私のhtml & CSSです：

var firebase = new Firebase(
    "https://spatialform.firebaseio.com/# KDyLsffRQiYNSsPGBVW|77ec456e3f094217dc4cbe36f45256f4" 
); 

function initMap() { 
var map = new google.maps.Map(document.getElementById('map'), { 
    center: { 
     lat: 39.6017, 
     lng: -110.7970 
    }, 
    zoom: 14, 
    styles: [{ 
     featureType: 'poi', 
     stylers: [{ 
       visibility: 'off' 
      }] // Turn off points of interest. 
    }, { 
     featureType: 'transit.station', 
     stylers: [{ 
       visibility: 'off' 
      }] // Turn off bus stations, train stations, etc. 
    }], 
    disableDoubleClickZoom: false 
}); 
map.addListener('click', function(e) { 
    var marker = new google.maps.Marker({ 
     position: { 
      lat: e.latLng.lat(), 
      lng: e.latLng.lng() 
     }, 
     firebase.push({ 
      lat: e.latLng.lat(), 
      lng: e.latLng.lng() 
     }); 
     map: map 
    }); 
}); 

firebase.on("child_added", function(snapshot, prevChildKey) { 
    var newPosition = snapshot.val(); 
    var latLng = new google.maps.LatLng(newPosition.lat, 
     newPosition.lng); 
    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map 
    }); 
}); 
}

私が得るすべての基本的なマップは次のとおりです。

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     html, body { height: 100%; margin: 0; padding: 0; } 
     #map { height: 100%; } 
    </style> 
    <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script> 
    </head> 
    <body> 
    <div id="map"></div> 

    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByiF_oXuIND_HKTnWb2EYjuHazdhi8F_k 
     &libraries=visualization&callback=initMap"> 
    </script> 
    <script src="map.js"> </script> 
    </body> 
</html>

はここに私のjavascriptのです。私はそれをナビゲートすることができますが、それはそれです。

私には何が欠けていますか？

出典

2016-03-28 jbGIS

マップAPIキーを共有しないことをお勧めします上記のスクリプトsrcを編集/マスクしてください。 – mentat

私はあなたのコードでJavaScriptのエラーが出ます：Uncaught SyntaxError: Unexpected token .

は、これは有効ではありません。

var marker = new google.maps.Marker({ 
    position: { 
     lat: e.latLng.lat(), 
     lng: e.latLng.lng() 
    }, 
    firebase.push({ // <---- error 
     lat: e.latLng.lat(), 
     lng: e.latLng.lng() 
    }); 
    map: map 
});

マーカーコンストラクタからfirebaseへのアクセスを分離：

map.addListener('click', function(e) { 
    firebase.push({ 
    lat: e.latLng.lat(), 
    lng: e.latLng.lng() 
    }); 
    var marker = new google.maps.Marker({ 
    position: { 
     lat: e.latLng.lat(), 
     lng: e.latLng.lng() 
    }, 
    map: map 
    }); 
});

proof of concept fiddle

出典

2016-03-30 02:22:29 geocodezip

firebase.pushへの電話番号が間違っていると思います。私はを作成した後にそれを入れます。

正確に何が起きているのかを理解するために、console.logを書きます。 Chromeの開発ツール、ネットワークタブは、実際にFirebase Serverにアクセスしているかどうかを理解するのにも役立ちます。

出典

2016-03-30 02:22:15 mentat

Firebaseを使用した共同リアルタイムマッピングが機能しない

答えて

関連する問題