title: Using socket io to add a marker to a google map when a new user logs in
body: <p>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.</p>
  
  <p>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.</p>
  
  <p><strong>REPO AT <a href="https://github.com/Stacca/geo-socket" rel="nofollow">https://github.com/Stacca/geo-socket</a></strong></p>
  
  <p>Any suggestion appreciated thank you!.</p>
  
  <p><strong>My Node Server looks like this..</strong></p>
  
  <pre><code>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; 
  </code></pre>
  
  <p><strong>My JS file</strong></p>
  
  <pre><code>"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);
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;link rel="stylesheet"   
  href="bower_components/bootstrap/dist/css/bootstrap.css" /&gt;
  &lt;link rel="stylesheet" href="app/styles/main.css"&gt;
  &lt;!--    Internal map style (cant remove)--&gt;
    &lt;style type="text/css"&gt;
    html, body, #map-canvas { height: 90%; margin: 0; padding: 0;}
  &lt;/style&gt;
  &lt;!--   Public API  --&gt;
   &lt;script src="https://maps.googleapis.com/maps/api/js? 
  v=3.exp&amp;signed_in=false"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;div id="map-canvas"&gt;&lt;/div&gt;  
  &lt;!-- build:js(.) scripts/vendor.js --&gt;
  &lt;!-- bower:js --&gt;
  &lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-animate/angular-animate.js"&gt;  
  &lt;/script&gt;
  &lt;script src="bower_components/angular-cookies/angular-cookies.js"&gt;
  &lt;/script&gt;
  &lt;script src="bower_components/angular-resource/angular-resource.js"&gt;
  &lt;/script&gt;
  &lt;script src="bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-sanitize/angular-sanitize.js"&gt;
  &lt;/script&gt;
  &lt;script src="bower_components/angular-touch/angular-touch.js"&gt;&lt;/script&gt;
  
  
      &lt;!-- build:js({.tmp,app}) scripts/scripts.js --&gt;
      &lt;script src="app/scripts/app.js"&gt;&lt;/script&gt;
      &lt;script src="app/scripts/controllers/main.js"&gt;&lt;/script&gt;
      &lt;script src="app/scripts/map.js"&gt;&lt;/script&gt;
      &lt;script src="app/scripts/controllers/about.js"&gt;&lt;/script&gt;
      &lt;!-- socket scripts --&gt;
      &lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;
      &lt;script&gt; var socket = io();&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>