Menu
I have a google map that is geolocating the user and placing a marker on the map. I am wanting A new marker to be added when a new user loads the map. To do this I am using socket io.
However the desired result is not happening! Users and not seeing each other and markers seem to be continuing to generate the longer the browser stays open.
REPO AT https://github.com/Stacca/geo-socket
Any suggestion appreciated thank you!.
My Node Server looks like this..
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var path = require("path")
var port = process.env.PORT || 3000
var http = require('http').Server(app);
app.use(express.static(__dirname + '/'));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname + '/app/index.html'));
});
var io = require('socket.io')(http);
io.on('connection', function(socket){
console.log('a user connected');
socket.on('marker', function(data) {
console.log('marker latitude: ' + data.lat + ', marker longitude:' +
data.lng);
socket.broadcast.emit('show-marker', data);
});
});
http.listen(3000, function(){
console.log('five minute catch up is on port 3000');
});
module.exports = server;
My JS file
"use strict";
var map;
var markers = []
function initialize() {
var mapOptions = {
zoom: 16
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
if(navigator.geolocation) {
navigator.geolocation.watchPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'You are here'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
// listen for Marker event
google.maps.event.addListener(map, 'load', function(event) {
var marker = addMarker(event.latLng);
socket.emit('marker', {
'lat': marker.position.k,
'lng': marker.position.D
});
});
// Add a marker to the map
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
console.log(location);
console.log("marker: " + marker.position.k + " " + marker.position.D);
return marker;
}
//Listens for other users markers
socket.on('show-marker', addMarker);
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet"
href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app/styles/main.css">
<!-- Internal map style (cant remove)-->
<style type="text/css">
html, body, #map-canvas { height: 90%; margin: 0; padding: 0;}
</style>
<!-- Public API -->
<script src="https://maps.googleapis.com/maps/api/js?
v=3.exp&signed_in=false"></script>
<div id="map-canvas"></div>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js">
</script>
<script src="bower_components/angular-cookies/angular-cookies.js">
</script>
<script src="bower_components/angular-resource/angular-resource.js">
</script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js">
</script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="app/scripts/app.js"></script>
<script src="app/scripts/controllers/main.js"></script>
<script src="app/scripts/map.js"></script>
<script src="app/scripts/controllers/about.js"></script>
<!-- socket scripts -->
<script src="/socket.io/socket.io.js"></script>
<script> var socket = io();</script>
</body>
</html>
329
I believe the problem runs deeper than the code.
Correct me if I am wrong but I would need a session so the browser knows there are two users?
Or some way of giving the users a unique identifier.
have added a listen to HTMl
socket.on('show-marker', function(data) {
console.log(data);
var loc = new google.maps.LatLng(data.lat,
data.lng);
addMarker(loc, data.socketId);
and this has helped
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With