Leaflet with google maps
HTML
<script src="https://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<body>
<div id="map" ></div>
</body>
CSS
html, body, #map {
margin: 0;
width: 100%;
height: 100%;
}
JavaScript
////////////////////////////
/*
* Google layer using Google Maps API
*/
//(function (google, L) {
L.Google = L.Class.extend({
includes: L.Mixin.Events,
options: {
minZoom: 0,
maxZoom: 18,
tileSize: 256,
subdomains: 'abc',
errorTileUrl: '',
attribution: '',
opacity: 1,
continuousWorld: false,
noWrap: false,
mapOptions: {
backgroundColor: '#dddddd'
}
},
// Possible types: SATELLITE, ROADMAP, HYBRID, TERRAIN
initialize: function(type, options) {
L.Util.setOptions(this, options);
this._ready = google.maps.Map != undefined;
if (!this._ready) L.Google.asyncWait.push(this);
this._type = type || 'SATELLITE';
},
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('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);
//this._container = null;
this._map.off('viewreset', this._resetCallback, this);
this._map.off('move', this._update, this);
this._map.off('zoomanim', this._handleZoomAnim, this);
map._controlCorners['bottomright'].style.marginBottom = "0em";
//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);
}
},
setElementSize: function(e, size) {
e.style.width = size.x + "px";
e.style.height = size.y +...