2 * Google layer using Google Maps API
5 /* global google: true */
7 L
.Google
= L
.Class
.extend({
8 includes
: L
.Mixin
.Events
,
18 continuousWorld
: false,
21 backgroundColor
: '#dddddd'
25 // Possible types: SATELLITE, ROADMAP, HYBRID, TERRAIN
26 initialize: function(type
, options
) {
27 L
.Util
.setOptions(this, options
);
29 this._ready
= google
.maps
.Map
!== undefined;
30 if (!this._ready
) L
.Google
.asyncWait
.push(this);
32 this._type
= type
|| 'SATELLITE';
35 onAdd: function(map
, insertAtTheBottom
) {
37 this._insertAtTheBottom
= insertAtTheBottom
;
39 // create a container div for tiles
40 this._initContainer();
41 this._initMapObject();
44 map
.on('viewreset', this._resetCallback
, this);
46 this._limitedUpdate
= L
.Util
.limitExecByInterval(this._update
, 150, this);
47 map
.on('move', this._update
, this);
49 map
.on('zoomanim', this._handleZoomAnim
, this);
51 //20px instead of 1em to avoid a slight overlap with google's attribution
52 map
._controlCorners
.bottomright
.style
.marginBottom
= '20px';
58 onRemove: function(map
) {
59 map
._container
.removeChild(this._container
);
61 map
.off('viewreset', this._resetCallback
, this);
63 map
.off('move', this._update
, this);
65 map
.off('zoomanim', this._handleZoomAnim
, this);
67 map
._controlCorners
.bottomright
.style
.marginBottom
= '0em';
70 getAttribution: function() {
71 return this.options
.attribution
;
74 setOpacity: function(opacity
) {
75 this.options
.opacity
= opacity
;
77 L
.DomUtil
.setOpacity(this._container
, opacity
);
81 setElementSize: function(e
, size
) {
82 e
.style
.width
= size
.x
+ 'px';
83 e
.style
.height
= size
.y
+ 'px';
86 _initContainer: function() {
87 var tilePane
= this._map
._container
,
88 first
= tilePane
.firstChild
;
90 if (!this._container
) {
91 this._container
= L
.DomUtil
.create('div', 'leaflet-google-layer leaflet-top leaflet-left');
92 this._container
.id
= '_GMapContainer_' + L
.Util
.stamp(this);
93 this._container
.style
.zIndex
= 'auto';
96 tilePane
.insertBefore(this._container
, first
);
98 this.setOpacity(this.options
.opacity
);
99 this.setElementSize(this._container
, this._map
.getSize());
102 _initMapObject: function() {
103 if (!this._ready
) return;
104 this._google_center
= new google
.maps
.LatLng(0, 0);
105 var map
= new google
.maps
.Map(this._container
, {
106 center
: this._google_center
,
109 mapTypeId
: google
.maps
.MapTypeId
[this._type
],
110 disableDefaultUI
: true,
111 keyboardShortcuts
: false,
113 disableDoubleClickZoom
: true,
115 streetViewControl
: false,
116 styles
: this.options
.mapOptions
.styles
,
117 backgroundColor
: this.options
.mapOptions
.backgroundColor
121 this._reposition
= google
.maps
.event
.addListenerOnce(map
, 'center_changed',
122 function() { _this
.onReposition(); });
125 google
.maps
.event
.addListenerOnce(map
, 'idle',
126 function() { _this
._checkZoomLevels(); });
127 google
.maps
.event
.addListenerOnce(map
, 'tilesloaded',
128 function() { _this
.fire('load'); });
129 //Reporting that map-object was initialized.
130 this.fire('MapObjectInitialized', { mapObject
: map
});
133 _checkZoomLevels: function() {
134 //setting the zoom level on the Google map may result in a different zoom level than the one requested
135 //(it won't go beyond the level for which they have data).
136 // verify and make sure the zoom levels on both Leaflet and Google maps are consistent
137 if (this._google
.getZoom() !== this._map
.getZoom()) {
138 //zoom levels are out of sync. Set the leaflet zoom level to match the google one
139 this._map
.setZoom( this._google
.getZoom() );
143 _resetCallback: function(e
) {
147 _reset: function(clearOldContainer
) {
148 this._initContainer();
151 _update: function(e
) {
152 if (!this._google
) return;
155 var center
= this._map
.getCenter();
156 var _center
= new google
.maps
.LatLng(center
.lat
, center
.lng
);
158 this._google
.setCenter(_center
);
159 this._google
.setZoom(Math
.round(this._map
.getZoom()));
161 this._checkZoomLevels();
164 _resize: function() {
165 var size
= this._map
.getSize();
166 if (this._container
.style
.width
=== size
.x
&&
167 this._container
.style
.height
=== size
.y
)
169 this.setElementSize(this._container
, size
);
174 _handleZoomAnim: function (e
) {
175 var center
= e
.center
;
176 var _center
= new google
.maps
.LatLng(center
.lat
, center
.lng
);
178 this._google
.setCenter(_center
);
179 this._google
.setZoom(Math
.round(e
.zoom
));
183 onReposition: function() {
184 if (!this._google
) return;
185 google
.maps
.event
.trigger(this._google
, 'resize');
189 L
.Google
.asyncWait
= [];
190 L
.Google
.asyncInitialize = function() {
192 for (i
= 0; i
< L
.Google
.asyncWait
.length
; i
++) {
193 var o
= L
.Google
.asyncWait
[i
];
200 L
.Google
.asyncWait
= [];