1
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のです。私はそれをナビゲートすることができますが、それはそれです。
私には何が欠けていますか？
マップAPIキーを共有しないことをお勧めします上記のスクリプトsrcを編集/マスクしてください。 – mentat