Updated google maps library

leaflet-google.js

@@ -1,6 +1,8 @@
 /*
- * L.TileLayer is used for standard xyz-numbered tile layers.
+* Google layer using Google Maps API
- */
+*/
+
+/* global google: true */
 
 L.Google = L.Class.extend({
 	includes: L.Mixin.Events,
@@ -15,13 +17,19 @@ L.Google = L.Class.extend({
 		opacity: 1,
 		continuousWorld: false,
 		noWrap: false,
+		mapOptions: {
+			backgroundColor: '#dddddd'
+		}
 	},
 
-	// Possible types: SATELLITE, ROADMAP, HYBRID
+	// Possible types: SATELLITE, ROADMAP, HYBRID, TERRAIN
 	initialize: function(type, options) {
 		L.Util.setOptions(this, options);
 
-		this._type = google.maps.MapTypeId[type || 'ROADMAP'];
+		this._ready = google.maps.Map !== undefined;
+		if (!this._ready) L.Google.asyncWait.push(this);
+
+		this._type = type || 'SATELLITE';
 	},
 
 	onAdd: function(map, insertAtTheBottom) {
@@ -37,20 +45,26 @@ L.Google = L.Class.extend({
 
 		this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this);
 		map.on('move', this._update, this);
-		//map.on('moveend', this._update, this);
+
+		map.on('zoomanim', this._handleZoomAnim, this);
+
+		//20px instead of 1em to avoid a slight overlap with google's attribution
+		map._controlCorners.bottomright.style.marginBottom = '20px';
 
 		this._reset();
 		this._update();
 	},
 
 	onRemove: function(map) {
-		this._map._container.removeChild(this._container);
+		map._container.removeChild(this._container);
-		//this._container = null;
 
-		this._map.off('viewreset', this._resetCallback, this);
+		map.off('viewreset', this._resetCallback, this);
 
-		this._map.off('move', this._update, this);
+		map.off('move', this._update, this);
-		//this._map.off('moveend', this._update, this);
+
+		map.off('zoomanim', this._handleZoomAnim, this);
+
+		map._controlCorners.bottomright.style.marginBottom = '0em';
 	},
 
 	getAttribution: function() {
@@ -64,45 +78,64 @@ L.Google = L.Class.extend({
 		}
 	},
 
+	setElementSize: function(e, size) {
+		e.style.width = size.x + 'px';
+		e.style.height = size.y + 'px';
+	},
+
 	_initContainer: function() {
-		var tilePane = this._map._container
+		var tilePane = this._map._container,
 		first = tilePane.firstChild;
 
 		if (!this._container) {
 			this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left');
-			this._container.id = "_GMapContainer";
+			this._container.id = '_GMapContainer_' + L.Util.stamp(this);
+			this._container.style.zIndex = 'auto';
 		}
 
-		if (true) {
 		tilePane.insertBefore(this._container, first);
 
 		this.setOpacity(this.options.opacity);
-			var size = this._map.getSize();
+		this.setElementSize(this._container, this._map.getSize());
-			this._container.style.width = size.x + 'px';
-			this._container.style.height = size.y + 'px';
-		}
 	},
 
 	_initMapObject: function() {
+		if (!this._ready) return;
 		this._google_center = new google.maps.LatLng(0, 0);
 		var map = new google.maps.Map(this._container, {
 			center: this._google_center,
 			zoom: 0,
-		    mapTypeId: this._type,
+			tilt: 0,
+			mapTypeId: google.maps.MapTypeId[this._type],
 			disableDefaultUI: true,
 			keyboardShortcuts: false,
 			draggable: false,
 			disableDoubleClickZoom: true,
 			scrollwheel: false,
-		    streetViewControl: false
+			streetViewControl: false,
+			styles: this.options.mapOptions.styles,
+			backgroundColor: this.options.mapOptions.backgroundColor
 		});
 
 		var _this = this;
-		this._reposition = google.maps.event.addListenerOnce(map, "center_changed",
+		this._reposition = google.maps.event.addListenerOnce(map, 'center_changed',
 		function() { _this.onReposition(); });
-
-		map.backgroundColor = '#ff0000';
 		this._google = map;
+
+		google.maps.event.addListenerOnce(map, 'idle',
+		function() { _this._checkZoomLevels(); });
+		//Reporting that map-object was initialized.
+		this.fire('MapObjectInitialized', { mapObject: map });
+	},
+
+	_checkZoomLevels: function() {
+		//setting the zoom level on the Google map may result in a different zoom level than the one requested
+		//(it won't go beyond the level for which they have data).
+		// verify and make sure the zoom levels on both Leaflet and Google maps are consistent
+		if (this._google.getZoom() !== this._map.getZoom()) {
+			//zoom levels are out of sync. Set the leaflet zoom level to match the google one
+			this._map.setZoom( this._google.getZoom() );
+		}
 	},
 
 	_resetCallback: function(e) {
@@ -113,35 +146,54 @@ L.Google = L.Class.extend({
 		this._initContainer();
 	},
 
-	_update: function() {
+	_update: function(e) {
+		if (!this._google) return;
 		this._resize();
 
-		var bounds = this._map.getBounds();
-		var ne = bounds.getNorthEast();
-		var sw = bounds.getSouthWest();
-		var google_bounds = new google.maps.LatLngBounds(
-			new google.maps.LatLng(sw.lat, sw.lng),
-			new google.maps.LatLng(ne.lat, ne.lng)
-		);
 		var center = this._map.getCenter();
 		var _center = new google.maps.LatLng(center.lat, center.lng);
 
 		this._google.setCenter(_center);
-		this._google.setZoom(this._map.getZoom());
+		this._google.setZoom(Math.round(this._map.getZoom()));
-		//this._google.fitBounds(google_bounds);
+
+		this._checkZoomLevels();
 	},
 
 	_resize: function() {
 		var size = this._map.getSize();
-		if (this._container.style.width == size.x &&
+		if (this._container.style.width === size.x &&
-		    this._container.style.height == size.y)
+			this._container.style.height === size.y)
 			return;
-		this._container.style.width = size.x + 'px';
+			this.setElementSize(this._container, size);
-		this._container.style.height = size.y + 'px';
+			this.onReposition();
-		google.maps.event.trigger(this._google, "resize");
 		},
 
+
+		_handleZoomAnim: function (e) {
+			var center = e.center;
+			var _center = new google.maps.LatLng(center.lat, center.lng);
+
+			this._google.setCenter(_center);
+			this._google.setZoom(Math.round(e.zoom));
+		},
+
+
 		onReposition: function() {
-		//google.maps.event.trigger(this._google, "resize");
+			if (!this._google) return;
+			google.maps.event.trigger(this._google, 'resize');
 		}
-});
+	});
+
+	L.Google.asyncWait = [];
+	L.Google.asyncInitialize = function() {
+		var i;
+		for (i = 0; i < L.Google.asyncWait.length; i++) {
+			var o = L.Google.asyncWait[i];
+			o._ready = true;
+			if (o._container) {
+				o._initMapObject();
+				o._update();
+			}
+		}
+		L.Google.asyncWait = [];
+	};

map.html

@@ -3,6 +3,8 @@
 <head>
   <meta charset="utf-8">
   <title>Blokken in Gent</title>
+  <meta name="apple-itunes-app" content="app-id=602640924">
+  <meta name="google-play-app" content="app-id=be.ugent.zeus.hydra">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />