matbor · January 6, 2017 17:15
diff --git a/mqttitude-gmaps.html b/mqttitude-gmaps.html
 <!DOCTYPE html>
 <html>
 <head>
 <script src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&sensor=false"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
 <script src="mqttws31.js" type="text/javascript"></script>

 <TITLE>MQTTitude - find my family & friends</title>

 <style type="text/css">
  body { font: normal 10pt Helvetica, Arial; }
 	#map { width: 1200px; height: 800px; border: 0px; padding: 0px; }
 </style>
 <script>
 // To be used with websockets, mqtt and http://mqttitude.org/ project for ios/android. 
 // You will also need to setup a google maps api key.https://code.google.com/apis/console
 // http://git.eclipse.org/c/paho/org.eclipse.paho.mqtt.javascript.git/plain/src/mqttws31.js
 // by Matthew Bordignon @bordignon September 2013
 //
 // to do list;
 // - fix zoom on marker
 // - fix icons so multiple topics are easily identified, ie. different color for each topic
 // - need to add smarts to catch invalid (ie. non mqttitude json) payload message, atm it just disconnects
 // -

 var client = new Messaging.Client("locahost", 1883,
 				"myclientid_" + parseInt(Math.random() * 100, 10));
 				

 	client.onConnectionLost = function (responseObject) {
 		alert("connection lost: " + responseObject.errorMessage);
 		console.log("connection lost");
 	};

 	client.onMessageArrived = function (message) {
 		// mqttitude mesaage recieved is in JSON format. See http://mqttitude.org/api.html	
 		//console.log(message.payloadString);	
 		var recievedmsg = message.payloadString;
 		var myObj = jQuery.parseJSON(recievedmsg); //parse payload
 		var myDate = new Date(myObj.tst *1000); //convert epoch time to readible local datetime
 		//console.log('ParsedJSON -- Time: ', myObj.tst,' Lat: ', myObj.lat,' Lon: ',myObj.lon);
 		var markerinfo = myDate+'<br />'+message.destinationName+'<br />'+message.payloadString;
 		addMarker(myObj.lat,myObj.lon,markerinfo); //add marker based on lattitude and longittude, using timestamp for description for now
 		center = bounds.getCenter(); //center on marker, zooms in to far atm, needs to be fixed!
 		map.fitBounds(bounds); 
 	};
 	
 	var options = {
 		timeout: 3,
 		onSuccess: function () {
 			// alert("Connected");
 			console.log("mqtt connected");
 			// Connection succeeded; subscribe to our topic
 			client.subscribe('/mqttitude/location/#', {qos: 0});
 		},
 		onFailure: function (message) {
 			alert("Connection failed: " + message.errorMessage);
 			console.log("connection failed");
 		}
 	};

 var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
 		   new google.maps.Size(32, 32), new google.maps.Point(0, 0),
 		   new google.maps.Point(16, 32));
 var center = null;
 var map = null;
 var currentPopup;
 var bounds = new google.maps.LatLngBounds();
 function addMarker(lat, lng, info) {
 	//console.log(lat, lng, info);
 	var pt = new google.maps.LatLng(lat, lng);
 	bounds.extend(pt);
 	var marker = new google.maps.Marker({
 		position: pt,
 		icon: icon,
 		map: map
 	});
 	var popup = new google.maps.InfoWindow({
 		content: info,
 		maxWidth: 400
 	});
 	google.maps.event.addListener(marker, "click", function() {
 		if (currentPopup != null) {
 			currentPopup.close();
 			currentPopup = null;
 		}
 		popup.open(map, marker);
 		currentPopup = popup;
 	});
 	google.maps.event.addListener(popup, "closeclick", function() {
 		map.panTo(center);
 		currentPopup = null;
 	});
 };

 function initMap() {
 	map = new google.maps.Map(document.getElementById("map"), {
 		center: new google.maps.LatLng(0,0),
 		zoom: 10,
 		mapTypeId: google.maps.MapTypeId.ROADMAP,
 		mapTypeControl: true,
 		mapTypeControlOptions: {
 			style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
 		},
 		navigationControl: true,
 		navigationControlOptions: {
 			style: google.maps.NavigationControlStyle.ZOOM_PAN
 		}
 	});
 	
 	center = bounds.getCenter();
    map.fitBounds(bounds);
 	
 	/* Connect to MQTT broker */
 	client.connect(options);
 };



 </script>

 </head>

 <body>
 <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
 <div id="map"></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&sensor=false"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
	<script src="mqttws31.js" type="text/javascript"></script>

	<TITLE>MQTTitude - find my family & friends</title>

	<style type="text/css">
	body { font: normal 10pt Helvetica, Arial; }
	#map { width: 1200px; height: 800px; border: 0px; padding: 0px; }
	</style>
	<script>
	// To be used with websockets, mqtt and http://mqttitude.org/ project for ios/android.
	// You will also need to setup a google maps api key.https://code.google.com/apis/console
	// http://git.eclipse.org/c/paho/org.eclipse.paho.mqtt.javascript.git/plain/src/mqttws31.js
	// by Matthew Bordignon @bordignon September 2013
	//
	// to do list;
	// - fix zoom on marker
	// - fix icons so multiple topics are easily identified, ie. different color for each topic
	// - need to add smarts to catch invalid (ie. non mqttitude json) payload message, atm it just disconnects
	// -

	var client = new Messaging.Client("locahost", 1883,
	"myclientid_" + parseInt(Math.random() * 100, 10));


	client.onConnectionLost = function (responseObject) {
	alert("connection lost: " + responseObject.errorMessage);
	console.log("connection lost");
	};

	client.onMessageArrived = function (message) {
	// mqttitude mesaage recieved is in JSON format. See http://mqttitude.org/api.html
	//console.log(message.payloadString);
	var recievedmsg = message.payloadString;
	var myObj = jQuery.parseJSON(recievedmsg); //parse payload
	var myDate = new Date(myObj.tst *1000); //convert epoch time to readible local datetime
	//console.log('ParsedJSON -- Time: ', myObj.tst,' Lat: ', myObj.lat,' Lon: ',myObj.lon);
	var markerinfo = myDate+'<br />'+message.destinationName+'<br />'+message.payloadString;
	addMarker(myObj.lat,myObj.lon,markerinfo); //add marker based on lattitude and longittude, using timestamp for description for now
	center = bounds.getCenter(); //center on marker, zooms in to far atm, needs to be fixed!
	map.fitBounds(bounds);
	};

	var options = {
	timeout: 3,
	onSuccess: function () {
	// alert("Connected");
	console.log("mqtt connected");
	// Connection succeeded; subscribe to our topic
	client.subscribe('/mqttitude/location/#', {qos: 0});
	},
	onFailure: function (message) {
	alert("Connection failed: " + message.errorMessage);
	console.log("connection failed");
	}
	};

	var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
	new google.maps.Size(32, 32), new google.maps.Point(0, 0),
	new google.maps.Point(16, 32));
	var center = null;
	var map = null;
	var currentPopup;
	var bounds = new google.maps.LatLngBounds();
	function addMarker(lat, lng, info) {
	//console.log(lat, lng, info);
	var pt = new google.maps.LatLng(lat, lng);
	bounds.extend(pt);
	var marker = new google.maps.Marker({
	position: pt,
	icon: icon,
	map: map
	});
	var popup = new google.maps.InfoWindow({
	content: info,
	maxWidth: 400
	});
	google.maps.event.addListener(marker, "click", function() {
	if (currentPopup != null) {
	currentPopup.close();
	currentPopup = null;
	}
	popup.open(map, marker);
	currentPopup = popup;
	});
	google.maps.event.addListener(popup, "closeclick", function() {
	map.panTo(center);
	currentPopup = null;
	});
	};

	function initMap() {
	map = new google.maps.Map(document.getElementById("map"), {
	center: new google.maps.LatLng(0,0),
	zoom: 10,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	mapTypeControl: true,
	mapTypeControlOptions: {
	style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
	},
	navigationControl: true,
	navigationControlOptions: {
	style: google.maps.NavigationControlStyle.ZOOM_PAN
	}
	});

	center = bounds.getCenter();
	map.fitBounds(bounds);

	/* Connect to MQTT broker */
	client.connect(options);
	};



	</script>

	</head>

	<body>
	<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
	<div id="map"></div>
	</body>
	</html>