Added google maps support

leaflet-google.js

@@ -0,0 +1,147 @@
+/*
+ * L.TileLayer is used for standard xyz-numbered tile layers.
+ */
+
+L.Google = L.Class.extend({
+	includes: L.Mixin.Events,
+
+	options: {
+		minZoom: 0,
+		maxZoom: 18,
+		tileSize: 256,
+		subdomains: 'abc',
+		errorTileUrl: '',
+		attribution: 'Made with ❤ by <a href="http://zeus.ugent.be">Zeus WPI</a>',
+		opacity: 1,
+		continuousWorld: false,
+		noWrap: false,
+	},
+
+	// Possible types: SATELLITE, ROADMAP, HYBRID
+	initialize: function(type, options) {
+		L.Util.setOptions(this, options);
+
+		this._type = google.maps.MapTypeId[type || 'ROADMAP'];
+	},
+
+	onAdd: function(map, insertAtTheBottom) {
+		this._map = map;
+		this._insertAtTheBottom = insertAtTheBottom;
+
+		// create a container div for tiles
+		this._initContainer();
+		this._initMapObject();
+
+		// set up events
+		map.on('viewreset', this._resetCallback, this);
+
+		this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this);
+		map.on('move', this._update, this);
+		//map.on('moveend', this._update, this);
+
+		this._reset();
+		this._update();
+	},
+
+	onRemove: function(map) {
+		this._map._container.removeChild(this._container);
+		//this._container = null;
+
+		this._map.off('viewreset', this._resetCallback, this);
+
+		this._map.off('move', this._update, this);
+		//this._map.off('moveend', this._update, this);
+	},
+
+	getAttribution: function() {
+		return this.options.attribution;
+	},
+
+	setOpacity: function(opacity) {
+		this.options.opacity = opacity;
+		if (opacity < 1) {
+			L.DomUtil.setOpacity(this._container, opacity);
+		}
+	},
+
+	_initContainer: function() {
+		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";
+		}
+
+		if (true) {
+			tilePane.insertBefore(this._container, first);
+
+			this.setOpacity(this.options.opacity);
+			var size = this._map.getSize();
+			this._container.style.width = size.x + 'px';
+			this._container.style.height = size.y + 'px';
+		}
+	},
+
+	_initMapObject: function() {
+		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,
+		    disableDefaultUI: true,
+		    keyboardShortcuts: false,
+		    draggable: false,
+		    disableDoubleClickZoom: true,
+		    scrollwheel: false,
+		    streetViewControl: false
+		});
+
+		var _this = this;
+		this._reposition = google.maps.event.addListenerOnce(map, "center_changed",
+			function() { _this.onReposition(); });
+
+		map.backgroundColor = '#ff0000';
+		this._google = map;
+	},
+
+	_resetCallback: function(e) {
+		this._reset(e.hard);
+	},
+
+	_reset: function(clearOldContainer) {
+		this._initContainer();
+	},
+
+	_update: function() {
+		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.fitBounds(google_bounds);
+	},
+
+	_resize: function() {
+		var size = this._map.getSize();
+		if (this._container.style.width == size.x &&
+		    this._container.style.height == size.y)
+			return;
+		this._container.style.width = size.x + 'px';
+		this._container.style.height = size.y + 'px';
+		google.maps.event.trigger(this._google, "resize");
+	},
+
+	onReposition: function() {
+		//google.maps.event.trigger(this._google, "resize");
+	}
+});

map.css

@@ -15,6 +15,13 @@ html, body {
   border-radius: 0px;
 }
 
+.leaflet-map-pane {
+    z-index: 2 !important;
+}
+
+.leaflet-google-layer {
+    z-index: 1 !important;
+}
 
 .leaflet-popup-content-wrapper {
   width: 600px;

map.html

@@ -8,6 +8,8 @@
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
   <link rel="stylesheet" href="map.css" />
   <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+  <script src="http://maps.google.com/maps/api/js?key=AIzaSyBAuXgl_O24GqLMl-ylUPLEH7O0wbK3J4A&v=3.2&sensor=false"></script>
+  <script src="leaflet-google.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
 </head>
@@ -87,9 +89,8 @@
 
     $(document).ready(function() {
       var map = L.map('map').setView([51.0475378, 3.7261835], 13);
-      var osm = L.tileLayer('https://{s}.tiles.mapbox.com/v3/feliciaan.keoaj8d5/{z}/{x}/{y}.png', {
+      var googleLayer = new L.Google('TERRAIN');
-        attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Mapbox</a> | Made with ❤ by <a href="http://zeus.ugent.be">Zeus WPI</a>'
+      map.addLayer(googleLayer);
-      }).addTo(map);
 
       $.getJSON('data.json')
        .done(function(data) {