Прозрачность: я работаю в PubNub и не очень хорошо знаю Google Maps. Я хотел задать несколько вопросов в комментариях, но обнаружил некоторые потенциальные ошибки в вашем коде, поэтому добавил сюда потенциальный ответ с новым кодом, чтобы попробовать. В этом коде есть комментарии, касающиеся потенциальных ошибок. Прокомментируйте, если у вас есть вопросы или если это решит вашу проблему.
Я также добавил дополнительную разметку HTML, например <head> и <body>, и переместил все скрипты / код под тегом <body>. Это может быть или не быть тем, что вам нужно сделать, но все равно должно работать.
<html>
<head>
<title>PubNub & Google Maps</title>
</head>
<body>
<div class="container">
<h1>PubNub Google Maps - Live Device Location</h1>
<!-- You used "map" as your id here:
<div id="map" style="width:100%;height:600px"></div>
... but down in your code you getElementById('map-canvas')
Shouldn't this id be "map-canvas"? That might be why it doesn't display.
-->
<div id="map-canvas" style="width:100%;height:600px"></div>
</div>
</body>
<!-- I don't have the index.js file so I couldn't properly test your code -->
<script src="./assests/js/index.js"></script>
<!-- PubNub JS SDK v4.19.0 is pretty old. You should use the latest version of PubNub JS SDK - v4.27.6 -->
<!-- script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"></script> -->
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.27.6.min.js"></script>
<!-- added this script tag and the closing script tag at the end of this code -->
<script type="text/javascript">
window.lat = 28.7041;
window.lng = 77.1025;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(updatePosition);
}
return null;
};
function updatePosition(position) {
if (position) {
window.lat = position.coords.latitude;
window.lng = position.coords.longitude;
}
}
setInterval(function(){updatePosition(getLocation());}, 20000);
function currentLocation() {
return {lat:window.lat, lng:window.lng};
};
var map;
var mark;
var lineCoords = [];
var initialize = function() {
var icon = {
url: "assests/images/download.png", // url
scaledSize: new google.maps.Size(30, 30), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
// this is where you do getElementById('map-canvas')
// but the id in the `<body>` was `map`
// I suspect the variable here should be `map` but the id above should
// be `map-canvas` and that is probably why you get that
// error when you call `map.setCenter`
map = new google.maps.Map(document.getElementById('map-canvas'), {center: {lat:lat,lng:lng},zoom:12});
mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map,
icon: icon
});
};
window.initialize = initialize;
var redraw = function(payload) {
lat = payload.message.lat;
lng = payload.message.lng;
map.setCenter({lat:lat, lng:lng, alt:0});
mark.setPosition({lat:lat, lng:lng, alt:0});
lineCoords.push(new google.maps.LatLng(lat, lng));
var lineCoordinatesPath = new google.maps.Polyline({
path: lineCoords,
geodesic: true,
strokeColor: '#FF0000'
});
lineCoordinatesPath.setMap(map);
};
var pnChannel = "map-channel";
// redacted your keys - do not share with public
var pubnub = new PubNub({
publishKey: 'pub-c-redacted',
subscribeKey: 'sub-c-redacted'
});
// switched the order of these two lines of code
// you should addListener first, then subscribe
pubnub.addListener({message:redraw});
pubnub.subscribe({channels: [pnChannel]});
setInterval(function() {
pubnub.publish({channel:pnChannel, message:{lat:window.lat + 0.001, lng:window.lng + 0.01}});
}, 10000);
// here's the ending script tag I added that I mentioned above
</script>
</html>
Я знаю, что исправления / рекомендации кода PubNub правильные. Сообщите мне, правильно ли я сказал о проблемах с html / javascript / google maps. Я не смог полностью протестировать ваш код, потому что у меня нет вашего файла кода assests/js/index.js.