Skip to content

Instantly share code, notes, and snippets.

@sunnygleason
Created January 31, 2017 17:59
Show Gist options
  • Save sunnygleason/3a731ecfe135827d0becc01ac38186f4 to your computer and use it in GitHub Desktop.
Save sunnygleason/3a731ecfe135827d0becc01ac38186f4 to your computer and use it in GitHub Desktop.
PubNub Mapping w/ Google Maps
<!doctype html>
<html>
<head>
<title>Google Maps Example</title>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.4.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
</head>
<body>
<div class="container">
<h1>PubNub Google Maps Example</h1>
<div id="map-canvas" style="width:600px;height:400px"></div>
</div>
<script>
window.lat = 37.8199;
window.lng = -122.4783;
var map;
var mark;
var lineCoords = [];
var initialize = function() {
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});
lineCoords.push(new google.maps.LatLng(window.lat, window.lng));
};
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: '#2E10FF'
});
lineCoordinatesPath.setMap(map);
};
var pnChannel = "map-channel";
var pubnub = new PubNub({
publishKey: 'YOUR_PUB_KEY',
subscribeKey: 'YOUR_SUB_KEY'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw});
setInterval(function() {
pubnub.publish({channel:pnChannel, message:{lat:window.lat + 0.001, lng:window.lng + 0.01}});
}, 5000);
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_GOOGLE_MAPS_KEY&callback=initialize"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment