HTML5 Geolocation API

by anandhinava

HTML

<script src="https://dev-open.jaystack.net/a11d6738-0e23-4e04-957b-f14e149a9de8/1162e5ee-49ca-4afd-87be-4e17c491140b/socket.io/socket.io.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    height: 500px;
}

JavaScript

var map = new google.maps.Map(document.getElementById("map-canvas"), {
    zoom: 16,
    center: new google.maps.LatLng(38.957807, -77.451135),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var socket = io.connect('https://dev-open.jaystack.net:443/HelloWorld', {
    resource: 'a11d6738-0e23-4e04-957b-f14e149a9de8/1162e5ee-49ca-4afd-87be-4e17c491140b/socket.io'
});

socket.on("newPoint", function (data) {
    var pos = JSON.parse(data);
    var latLng = new google.maps.LatLng(pos.lat, pos.lng);
    new google.maps.Marker({
        position: latLng,
        map: map
    });
    map.panTo(latLng);
});

google.maps.event.addListener(map, 'click', function (event) {
    new google.maps.Marker({
        position: event.latLng,
        map: map
    });
    socket.emit("newPoint", JSON.stringify({
        lat: event.latLng.lat(),
        lng: event.latLng.lng()
    }));
});