remove dependence on gmap3

inc/spot.php

@@ -262,7 +262,7 @@ class Spot extends Main
 		$asExif = @exif_read_data($sPicPath, 0, true);
 		
 		//Timestamp
-		if(array_key_exists('DateTimeOriginal', $asExif['EXIF'])) $iPicTimeStamp = strtotime($asExif['EXIF']['DateTimeOriginal']);
+		if(!empty($asExif) && array_key_exists('DateTimeOriginal', $asExif['EXIF'])) $iPicTimeStamp = strtotime($asExif['EXIF']['DateTimeOriginal']);
 		else $iPicTimeStamp = $asExif['FILE']['FileDateTime'];
 	
 		//Time Zone

masks/messages.html

@@ -2,6 +2,7 @@
 	<div id="map">
 		<div class="loader fa fa-map"></div>
 	</div>
+	<div id="legend"></div>
 	<div id="feed">
 		<div id="poster">
 			<input id="post" name="post" type="text" />
@@ -24,22 +25,6 @@ oSpot.pageInit = function(asHash)
 		updateFeed(true);
 		//setInterval(updateFeed, 60 * 1000); //refresh every minute
 		
-		//Building messages
-		aoMessages = [];
-		$.each(oMessages, function(iKey, oMsg)
-		{
-			var sInfoWindow = $('<div>', {'class':'info-window'})
-								.append($('<h1>').append('Message '+oMsg.type+' #'+oMsg.id_message))
-								.append($('<p>', {'class':'time'}).addIcon('fa-clock-o').append(oMsg.formatted_time+' ('+oMsg.relative_time+')'))
-								.append($('<p>', {'class':'coordinates'}).addIcon('fa-compass').append(oMsg.latitude+' | '+oMsg.longitude))
-								.append($('<p>', {'class':'battery'}).addIcon('fa-battery-three-quarters').append(oMsg.battery_state))
-								.prop('outerHTML');
-			var sLatLng = [oMsg.latitude, oMsg.longitude];
-			var asData = {title:oMsg.timestamp, details:sInfoWindow};
-			var asOptions = {icon:(iKey%2==0)?'images/footprint_alt.png':'images/footprint.png'};
-			aoMessages.push({id:oMsg.id_message, latLng:sLatLng, data:asData, options:asOptions});
-		});
-		
 		//Centering map on last message
 		var agCenter = {lat:0, lng:0};
 		var iZoom = 0;
@@ -56,64 +41,64 @@ oSpot.pageInit = function(asHash)
 			agCenter.lng = 171;
 			iZoom = 7;
 		}
-		var $Map = $("#map").gmap3(
-		{
-			map:
-			{
-				options:
-				{
+		
+		var oMap = new google.maps.Map(document.getElementById('map'), {
 			center: agCenter,
 			zoom: iZoom,
-					mapTypeId:google.maps.MapTypeId.HYBRID,
+			mapTypeId: google.maps.MapTypeId.SATELLITE,
 			scaleControl: true
-				}
-			},
-			kmllayer:
-			{
-				options:
-				{
-					url:'http://spot.lutran.fr/kml/TeAraroaTrail_simplified.kmz?v3',
-					opts:{preserveViewport: true}
-				}
-			},
-			marker:
-			{
-				values:aoMessages,
-				options:{draggable:false},
-				events:
-				{
-					mouseover: function(marker, event, context)
-					{
-						var map = $(this).gmap3("get"), infowindow = $(this).gmap3({get:{name:"infowindow"}});
-						if(infowindow)
-						{
-							infowindow.open(map, marker);
-							infowindow.setContent(context.data.details);
-						}
-						else $(this).gmap3({infowindow:{anchor:marker, options:{content: context.data.details}}});
-					},
-					mouseout: function()
-					{
-						var infowindow = $(this).gmap3({get:{name:"infowindow"}});
-						if(infowindow) infowindow.close();
-					}
-				}
-			},
-			panel:
-			{
-				options:
-				{
-					content:'<div id="legend">'+
-								'<div class="line green">Te Araroa</div>'+
-								'<div class="line blue">Routeburn Track</div>'+
-								'<div class="line red">Hors rando</div>'+
-							'</div>',
-					top: '10px',
-					left: '116px'
-				}
-			}
 		});
-		self.tmp('map', $Map.gmap3("get"));
+
+		var oKmlLayer = new google.maps.KmlLayer({
+			url: 'http://spot.lutran.fr/kml/TeAraroaTrail_simplified.kmz?v3',
+			preserveViewport: true,
+			map: oMap
+		});
+
+		//Building messages
+		$.each(oMessages, function(iKey, oMsg){
+			var oMarker = new google.maps.Marker({
+				id: oMsg.id_message,
+				position: {lat:Number(oMsg.latitude), lng:Number(oMsg.longitude)},
+				//animation: google.maps.Animation.DROP,
+				icon: (iKey%2==0)?'images/footprint_alt.png':'images/footprint.png',
+			    map: oMap,
+			   	draggable: false
+			});
+			
+			var oInfoWindow = new google.maps.InfoWindow({
+				content: $('<div>', {'class':'info-window'})
+					.append($('<h1>').append('Message '+oMsg.type+' #'+oMsg.id_message))
+					.append($('<p>', {'class':'time'}).addIcon('fa-clock-o').append(oMsg.formatted_time+' ('+oMsg.relative_time+')'))
+					.append($('<p>', {'class':'coordinates'}).addIcon('fa-compass').append(oMsg.latitude+' | '+oMsg.longitude))
+					.append($('<p>', {'class':'battery'}).addIcon('fa-battery-three-quarters').append(oMsg.battery_state))
+					.prop('outerHTML')
+			});
+
+			oMarker.addListener('mouseover', function(){
+				oInfoWindow.open(oMap, oMarker);
+			});
+			oMarker.addListener('mouseout', function(){
+				oInfoWindow.close(oMap, oMarker);
+			});
+		});
+		
+		//Legend
+		var oLegend = document.getElementById('legend');
+		var asRoutes = {
+			teararoa: {'class': 'green', title: 'Te Araroa'},
+			routeburn: {'class': 'blue', title: 'Routeburn Track'},
+			offtrack: {'class': 'red', title: 'Hors rando'}
+		};
+		for(var sKey in asRoutes) {
+			var oDiv = document.createElement('div');
+			oDiv.className = 'line '+asRoutes[sKey]['class'];
+			oDiv.innerHTML = asRoutes[sKey].title;
+			oLegend.appendChild(oDiv);
+		}
+		oMap.controls[google.maps.ControlPosition.TOP_CENTER].push(oLegend);
+		
+		self.tmp('map', oMap);
 	});
 	
 	//Post

style/spot.scss

@@ -29,6 +29,7 @@
 		background: rgba(255, 255, 255, 0.5);
 		border-radius:3px;
 		padding: 1px 0 0 0;
+		margin-top: 10px;
 		
 		.line {
 			display: inline-block;
@@ -36,7 +37,7 @@
 			line-height: 2px;
 			padding-left: 0.5em;
 			margin: 1em;
-			font-size: 0.8em;
+			font-size: 1em;
 			color: #222;
 			
 			&.green {