Simple layer over Google Maps API to create expandable baloons(infoboxes) on the map. [See example](https://coderiver.github.io/EasyGoogleMaps/example/index.html). We are tired of google maps syntax, infobox and whatever. Simple and straightforward syntax to do common job like this:
9 | >
10 | > 
11 |
12 | ## Installation
13 |
14 | ```
15 | $ npm install --save easygooglemaps
16 | ```
17 |
18 | ## Usage
19 | ### Webpack
20 | ```js
21 | var EasyGoogleMaps = require('easygooglemaps');
22 | // run module here
23 | ```
24 | ### Old school files way ([example.html](https://coderiver.github.io/EasyGoogleMaps/example/index.html)):
25 | ```html
26 |
27 |
28 | ```
29 | ## Running
30 | ```js
31 | var MyMap = new EasyGoogleMaps(_options_);
32 | // options reference in next section
33 |
34 | MyMap.init();
35 | ```
36 |
37 |
38 | #### Parameters (_options_)
39 | ```js
40 | {
41 | // map options
42 | map: {
43 | APIKEY: 'YOUR_GOOGLEMAPS_API_KEY',
44 | container: '.js-map', // DOM element, where to put map
45 | options: {
46 | center: {lat: -34.097, lng: 150.644},
47 | zoom: 8
48 | }
49 | },
50 |
51 | // baloon specific options
52 | infobox: {
53 | class: 'awesome-infobox',
54 | template: '#infobox', // html template for baloon
55 | closeButton: '.js-infobox-close',
56 | onlyOneBox: true, // single baloon visible
57 | // baloon relative to marker position
58 | position: {
59 | x: "left",
60 | y: "center"
61 | }
62 | },
63 |
64 | // Array of data (markers,baloons,infoboxes,whatever) to put on the map
65 | // Might be added at any time by .add method described below
66 | markers: {
67 | items: [
68 | {
69 | "content": {
70 | // this is {{=baloon.title}} in html template
71 | "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur."
72 | },
73 | "marker": {
74 | "position": {
75 | "lat": -34.397,
76 | "lng": 150.644
77 | },
78 | "icon": {
79 | "default": "img/markerDefault.png",
80 | "active": "img/markerActive.png",
81 | // for retina icon should be 40x60 pixels
82 | "size": {
83 | "x": 20,
84 | "y": 30
85 | },
86 | "centering": {
87 | "x": 10,
88 | "y": 30
89 | }
90 | }
91 | }
92 | }
93 | ]
94 | }
95 | }
96 | ```
97 | And also HTML template ([doT template engine](http://olado.github.io/doT/index.html)) for infobox should be specified:
98 | ```html
99 |
107 | ```
108 |
109 | ## Methods
110 | ### Load (callback)
111 | ```js
112 | MyMap.onload(function() {
113 | // show map with animation, once it is loaded
114 | });
115 | ```
116 | ### Add marker
117 | ```js
118 | // this method also accepts array of markers
119 | MyMap.add({
120 | "content": {
121 | "title": "Lorem ipsum"
122 | },
123 | "marker": {
124 | "id": 5, // optional, only if you need to show-hide it later
125 | "position": {
126 | "lat": -34.397,
127 | "lng": 152.244
128 | },
129 | "icon": {
130 | "default": "img/markerDefault.png",
131 | "active": "img/markerActive.png", // optional
132 | "size": {
133 | "x": 41,
134 | "y": 58
135 | },
136 | "centering": {
137 | "x": 20,
138 | "y": 58
139 | }
140 | }
141 | }
142 | });
143 | ```
144 | ### Show-Hide by id
145 | ```js
146 | MyMap.show(2); // shows all markers (one or many) with id equal 2
147 | MyMap.hide(2); // same, but hides
148 | ```
149 | ### Google Map Object
150 | Though our script wraps most of the use cases with map and infoboxes. You can still do whatever you want, because you have access to original Google Maps API:
151 | ```js
152 | MyMap.realmap; // returns Google Maps map object
153 | ```
154 | ## Development
155 | - `npm run build` - Build task that generates both minified and non-minified scripts,
156 | - `npm run watch` - watch changes, build only minified version;
157 |
158 |
159 | ## Authors:
160 | Valentin ‘Whats0n’ Dorosh
161 |
162 | Yuri [akella](http://cssing.org.ua) Artiukh
163 |
164 | ## License
165 | MIT © [Coderiver](http://riverco.de)
166 |
167 | [depstat-url]: https://david-dm.org/coderiver/easygooglemaps
168 | [depstat-image]: https://david-dm.org/coderiver/easygooglemaps.svg
--------------------------------------------------------------------------------
/example/example.js:
--------------------------------------------------------------------------------
1 | // =======================================
2 | // ====BASIC SETTINGS=====================
3 | // =======================================
4 | let map = new EasyGoogleMaps({
5 | map: {
6 | APIKEY: 'AIzaSyDMWIxCN9ijYRfiH7bmQN-LNRDtoboLZqY',
7 | container: '.js-map',
8 | options: {
9 | center: {lat: -34.097, lng: 150.644},
10 | zoom: 8
11 | }
12 | },
13 |
14 | infobox: {
15 | template: '#infobox',
16 | class: 'awesome-infobox',
17 | onlyOneBox: true,
18 | style: {
19 | width: '300px'
20 | },
21 | position: {
22 | x: "left",
23 | y: "center"
24 | },
25 | closeButton: '.js-infobox-close'
26 | },
27 |
28 | markers: {
29 | items: [
30 | {
31 | "content": {
32 | "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur."
33 | },
34 | "marker": {
35 | "id": 0,
36 | "position": {
37 | "lat": -34.397,
38 | "lng": 150.644
39 | },
40 | "icon": {
41 | "default": "img/markerDefault.png",
42 | "active": "img/markerActive.png",
43 | "size": {
44 | "x": 41,
45 | "y": 58
46 | },
47 | "centering": {
48 | "x": 20,
49 | "y": 58
50 | }
51 | }
52 | }
53 | },
54 | {
55 | "content": {
56 | "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur."
57 | },
58 | "marker": {
59 | "id": 1,
60 | "position": {
61 | "lat": -34.397,
62 | "lng": 150.244
63 | },
64 | "icon": {
65 | "default": "img/markerDefault.png",
66 | "active": "img/markerActive.png",
67 | "size": {
68 | "x": 41,
69 | "y": 58
70 | },
71 | "centering": {
72 | "x": 20,
73 | "y": 58
74 | }
75 | }
76 | }
77 | }
78 | ]
79 | }
80 | });
81 | // =======================================
82 | // ========INITIATING MAP=================
83 | // =======================================
84 | map.init();
85 |
86 | // =======================================
87 | // ========ADDING ARRAY OF POINTS=========
88 | // =======================================
89 | map.add([
90 | {
91 | "content": {
92 | "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur."
93 | },
94 | "marker": {
95 | "id": 2,
96 | "position": {
97 | "lat": -34.397,
98 | "lng": 151.044
99 | },
100 | "icon": {
101 | "default": "img/markerDefault.png",
102 | "active": "img/markerActive.png",
103 | "size": {
104 | "x": 41,
105 | "y": 58
106 | },
107 | "centering": {
108 | "x": 20,
109 | "y": 58
110 | }
111 | }
112 | }
113 | },
114 | {
115 | "content": {
116 | "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur."
117 | },
118 | "marker": {
119 | "id": 3,
120 | "position": {
121 | "lat": -34.397,
122 | "lng": 151.444
123 | },
124 | "icon": {
125 | "default": "img/markerDefault.png",
126 | "active": "img/markerActive.png",
127 | "size": {
128 | "x": 41,
129 | "y": 58
130 | },
131 | "centering": {
132 | "x": 20,
133 | "y": 58
134 | }
135 | }
136 | }
137 | }
138 | ]);
139 |
140 | // =======================================
141 | // ========ADDING ONE POINT===============
142 | // =======================================
143 | map.add({
144 | "content": {
145 | "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur."
146 | },
147 | "marker": {
148 | "id": 4,
149 | "position": {
150 | "lat": -34.397,
151 | "lng": 151.844
152 | },
153 | "icon": {
154 | "default": "img/markerDefault.png",
155 | "active": "img/markerActive.png",
156 | "size": {
157 | "x": 41,
158 | "y": 58
159 | },
160 | "centering": {
161 | "x": 20,
162 | "y": 58
163 | }
164 | }
165 | }
166 | });
167 |
168 | let addOneMarker = document.querySelector('.js-add-one');
169 | let addSeveralMarker = document.querySelector('.js-add-several');
170 |
171 | let showMarker = document.querySelector('.js-show');
172 | let hideMarker = document.querySelector('.js-hide');
173 |
174 | addOneMarker.addEventListener('click', () => {
175 | // =======================================
176 | // ====ADDING ONE POINT WITH CLICK========
177 | // =======================================
178 | map.add({
179 | "content": {
180 | "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur."
181 | },
182 | "marker": {
183 | "id": 5,
184 | "position": {
185 | "lat": -34.397,
186 | "lng": 152.244
187 | },
188 | "icon": {
189 | "default": "img/markerDefault.png",
190 | "active": "img/markerActive.png",
191 | "size": {
192 | "x": 41,
193 | "y": 58
194 | },
195 | "centering": {
196 | "x": 20,
197 | "y": 58
198 | }
199 | }
200 | }
201 | });
202 | }, false);
203 |
204 | addSeveralMarker.addEventListener('click', function() {
205 | // =======================================
206 | // ====ADDING MANY POINTS WITH CLICK======
207 | // =======================================
208 | map.add([
209 | {
210 | "content": {
211 | "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur."
212 | },
213 | "marker": {
214 | "id": 6,
215 | "position": {
216 | "lat": -34.397,
217 | "lng": 152.644
218 | },
219 | "icon": {
220 | "default": "img/markerDefault.png",
221 | "active": "img/markerActive.png",
222 | "size": {
223 | "x": 41,
224 | "y": 58
225 | },
226 | "centering": {
227 | "x": 20,
228 | "y": 58
229 | }
230 | }
231 | }
232 | },
233 | {
234 | "content": {
235 | "title": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, consequatur."
236 | },
237 | "marker": {
238 | "id": 7,
239 | "position": {
240 | "lat": -34.397,
241 | "lng": 153.044
242 | },
243 | "icon": {
244 | "default": "img/markerDefault.png",
245 | "active": "img/markerActive.png",
246 | "size": {
247 | "x": 41,
248 | "y": 58
249 | },
250 | "centering": {
251 | "x": 20,
252 | "y": 58
253 | }
254 | }
255 | }
256 | }
257 | ]);
258 | }, false);
259 |
260 |
261 | // =======================================
262 | // ====SHOW HIDE MARKER===================
263 | // =======================================
264 | showMarker.addEventListener('click', function() {
265 | map.show(2);
266 | }, false);
267 |
268 | hideMarker.addEventListener('click', function() {
269 | map.hide(2);
270 | }, false);
271 |
272 |
273 | // =======================================
274 | // ====ONLOAD EVENT=======================
275 | // =======================================
276 |
277 | // map.onload(() => {
278 | // alert('loaded');
279 | // });
280 | // alert('not loaded');
281 |
--------------------------------------------------------------------------------
/src/easygooglemaps.js:
--------------------------------------------------------------------------------
1 | /**
2 | * EasyGoogleMaps
3 | * Description
4 | * Creates map with expandable markers
5 | * @name EasyGoogleMaps
6 | */
7 | import GoogleMapsLoader from 'google-maps';
8 | import dot from 'dot';
9 |
10 |
11 | export default (function() {
12 |
13 | let INFOBOX = null;
14 | let template = null;
15 |
16 | const utils = {
17 | isString(props) {
18 | return (typeof props == 'string' && props.length);
19 | },
20 | isObj(props) {
21 | return (props != null && !Array.isArray(props) && typeof props == 'object');
22 | },
23 | isArr(props) {
24 | return Array.isArray(props);
25 | },
26 | isFunc(fn) {
27 | return typeof fn == 'function';
28 | }
29 | };
30 |
31 | class Map {
32 |
33 | constructor(props) {
34 | this._props = props || {};
35 | this._markers = [];
36 | this._infoboxes = [];
37 | this._onLoad = [];
38 | this._isLoaded = false;
39 | this._temporaryStorage = [];
40 | this._defaultWidth = '300px';
41 | }
42 |
43 | //*******************************************
44 | //******************PUBLIC*******************
45 | //*******************************************
46 |
47 | init() {
48 | let props = this._props;
49 |
50 | GoogleMapsLoader.KEY = props.map.APIKEY;
51 | GoogleMapsLoader.load((google) => {
52 |
53 | require(["google-maps-infobox"], (InfoBox) => {
54 | //set value to the global infobox variable
55 | INFOBOX = InfoBox;
56 | this._initMap();
57 |
58 | //flag to know when the map and the infobox are loaded
59 | this._isLoaded = true;
60 |
61 | template = utils.isString(props.infobox.template)
62 | ? this._getTemplate()
63 | : null;
64 |
65 | //call onLoadCallbacks
66 | if (this._onLoad.length) this._onLoad.forEach(callback => callback());
67 | //add markers by method if method was called when map is not loaded
68 | this._addItems(this._temporaryStorage);
69 | this._temporaryStorage = [];
70 | this._closeOnMapClick();
71 |
72 | //check for morons...
73 | if (!!!props.markers) return;
74 | if (!utils.isObj(props.markers)) return console.error('Data must be an object!!!');
75 | if (!Object.keys(props.markers).length) return console.error('Data must be a non-empty object!!!');
76 |
77 | //If you want to get info from some another file using ajax,
78 | //you need set path to the file to property 'url'.
79 | if (props.markers && props.markers.url) {
80 | if (!utils.isString(props.markers) && utils.isString(props.markers.url)) {
81 | this._loadData((items) => {
82 | this._addItems(items);
83 | });
84 | }
85 | } else if (props.markers && !props.markers.url) {
86 | this._addItems(props.markers.items);
87 | }
88 | });
89 |
90 | });
91 | }
92 |
93 | onload(callback) {
94 | if (!utils.isFunc(callback)) return;
95 | this._onLoad.push(callback);
96 | }
97 |
98 | //ADD MARKERS
99 | add(props) {
100 | if (utils.isObj(props)) {
101 | if (!this._isLoaded) {
102 | this._temporaryStorage.push(props);
103 | return;
104 | };
105 |
106 | this._addItem(props);
107 | return;
108 | }
109 |
110 | if (utils.isArr(props)) {
111 | if (!this._isLoaded) {
112 | this._temporaryStorage = this._temporaryStorage.concat(props);
113 | return;
114 | };
115 |
116 | this._addItems(props);
117 | return;
118 | }
119 | }
120 | //SHOW MARKER BY ID
121 | show(id) {
122 | let currentID = id;
123 | this._markers.forEach(marker => {
124 | if (!currentID || currentID && marker.id == currentID) return marker.setMap(this._map);
125 | });
126 | }
127 | //HIDE MARKER BY ID
128 | hide(id) {
129 | let currentID = id;
130 | this._markers.forEach(marker => {
131 | if (!currentID || currentID && marker.id == currentID) return marker.setMap(null);
132 | });
133 | }
134 |
135 | //*******************************************
136 | //******************PRIVAT*******************
137 | //*******************************************
138 |
139 | _initMap() {
140 | let props = this._props;
141 | this._container = document.querySelector(props.map.container);
142 | this._map = new google.maps.Map(this._container, props.map.options);
143 | this.realmap = this._map;
144 | }
145 |
146 | _loadData(callback) {
147 | let props = this._props;
148 |
149 | let path = this._container.getAttribute(props.markers.url);
150 | let xhr = new XMLHttpRequest();
151 |
152 | xhr.open('GET', path, true);
153 | xhr.onload = () => {
154 | if (xhr.status != 200) return console.error('ошибочка, data not found');
155 | callback(JSON.parse(xhr.responseText));
156 | };
157 | xhr.send();
158 | }
159 |
160 | _getTemplate() {
161 | let HTML = document.querySelector(this._props.infobox.template).innerHTML;
162 | dot.templateSettings.varname = 'baloon';
163 | return dot.template(HTML);
164 | }
165 |
166 | //*******************************************
167 | //*****************ALL ITEMS*****************
168 | //*******************************************
169 |
170 | _addItems(items) {
171 | for (let i = 0; i < items.length; i++) {
172 | this._addItem(items[i]);
173 | }
174 | }
175 |
176 | _addItem(item) {
177 | let markerOptions = item.marker;
178 | let marker = this._createMarker(markerOptions);
179 |
180 | this._markers.push(marker);
181 |
182 | if (template && this._props.infobox) {
183 | let content = item.content;
184 | let compiled = template(content);
185 | let ib = this._createInfoBox(compiled, marker);
186 |
187 | this._infoboxes.push(ib);
188 | //toggle content on click
189 | google.maps.event.addListener(marker, 'click', e => this._toggleInfobox(ib, marker));
190 | google.maps.event.addListener(ib, 'domready', e => this._addEventOnCloseButton(ib, marker));
191 | }
192 | }
193 |
194 | _closeOnMapClick() {
195 | if (!this._props.infobox.onlyOneBox) return;
196 | google.maps.event.addListener(this._map, 'click', e => {
197 | this._closeAllInfobox();
198 | });
199 | }
200 |
201 | _addEventOnCloseButton(ib, marker) {
202 | let props = this._props;
203 | let infobox = ib.div_;
204 | let buttons = infobox.querySelectorAll(props.infobox.closeButton);
205 |
206 | this._setInfoBoxPosition(ib, infobox);
207 |
208 | Array.prototype.forEach.call(buttons, button => {
209 | button.addEventListener('click', e => {
210 | e.preventDefault();
211 | this._closeInfobox(ib);
212 | this._closeMarker(marker);
213 | }, false);
214 | });
215 | }
216 |
217 | //*******************************************
218 | //*************SHOW/CLOSE METHODS************
219 | //*******************************************
220 |
221 | _closeAllInfobox() {
222 | this._infoboxes.forEach(infobox => this._closeInfobox(infobox));
223 | this._closeMarkers();
224 | }
225 |
226 | _closeInfobox(item) {
227 | item.close();
228 | item.isOpen = false;
229 | }
230 |
231 | _openInfobox(item, marker) {
232 | item.open(this._map, marker);
233 | item.isOpen = true;
234 | }
235 |
236 | _toggleInfobox(item, marker) {
237 | let activeIcon = marker.activeIcon;
238 | let defaultIcon = marker.defaultIcon;
239 | if (!item.isOpen) {
240 | if (this._props.infobox.onlyOneBox) {
241 | this._closeAllInfobox();
242 | this._closeMarkers();
243 | }
244 | this._openInfobox(item, marker);
245 | if (!!activeIcon && activeIcon.length) this._toggleMarker(marker, 'activeIcon');
246 | } else {
247 | this._closeInfobox(item);
248 | if (!!activeIcon && activeIcon.length) this._toggleMarker(marker, 'defaultIcon');
249 | }
250 | }
251 |
252 | //*******************************************
253 | //******************MARKERS******************
254 | //*******************************************
255 |
256 | _createMarker(data) {
257 | let icon = data.icon;
258 | let size = icon.size;
259 | let centering = icon.centering || {
260 | x: 0,
261 | y: 0
262 | };
263 | let iconStyles = {
264 | url: icon.default || '',
265 | scaledSize: new google.maps.Size(size.x, size.y),
266 | anchor: new google.maps.Point(centering.x, centering.y)
267 | };
268 |
269 | let marker = new google.maps.Marker({
270 | map: this._map,
271 | position: data.position,
272 | defaultIcon: data.icon.default || '',
273 | activeIcon: data.icon.active || '',
274 | iconSize: size,
275 | iconStyles: iconStyles,
276 | id: data.id
277 | });
278 |
279 | if (icon.default) marker.setIcon(iconStyles);
280 |
281 | return marker;
282 | }
283 |
284 | _closeMarkers() {
285 | this._markers.forEach(marker => this._closeMarker(marker));
286 | }
287 |
288 | _closeMarker(marker) {
289 | marker.setIcon(marker.iconStyles);
290 | }
291 |
292 | _toggleMarker(marker, img) {
293 | let icon = JSON.parse(JSON.stringify(marker.iconStyles));
294 | icon.url = marker[img];
295 | marker.setIcon(icon)
296 | }
297 |
298 | //*******************************************
299 | //******************INFOBOX******************
300 | //*******************************************
301 |
302 | _createInfoBox(content, marker) {
303 | let props = this._props.infobox;
304 |
305 | let style = props.style || {};
306 | let width = style.width || this._defaultWidth;
307 | style.width = width;
308 |
309 | let markerSize = marker.iconSize;
310 |
311 | this._offsetX = markerSize.x;
312 | this._offsetY = markerSize.y;
313 |
314 | return new INFOBOX({
315 | content: content,
316 |
317 | enableEventPropagation: false,
318 |
319 | //move map to the current box
320 | disableAutoPan: false,
321 | //margins from map borders
322 | infoBoxClearance: new google.maps.Size(10, 10),
323 |
324 | boxClass: props.class || 'infobox',
325 | zIndex: props.zIndex || null,
326 | maxWidth: props.maxWidth || 0,
327 | boxStyle: style,
328 |
329 | //The URL of the image representing the close box.
330 | //Note: The default is the URL for Google's standard close box.
331 | //Set this property to "" if no close box is required.
332 | closeBoxURL: '',
333 |
334 | pane: "floatPane",
335 |
336 | //flag opened or closed
337 | isOpen: false
338 | });
339 | }
340 |
341 | //POPUP POSITION
342 | _setInfoBoxPosition(infobox, div) {
343 |
344 | //get map popup options
345 | let props = this._props.infobox;
346 |
347 | let width = div.offsetWidth;
348 | let height = div.offsetHeight;
349 |
350 | let position = props.position || {};
351 | let x = position.x || 'top';
352 | let y = position.y || 'center';
353 |
354 | this._positionX = this._getInfoBoxPositionX(x, width, this._offsetX);
355 | this._positionY = this._getInfoBoxPositionY(y, height, this._offsetY);
356 |
357 | infobox.setOptions({
358 | pixelOffset: new google.maps.Size(this._positionX, this._positionY.offset),
359 | alignBottom: this._positionY.align
360 | });
361 | }
362 |
363 | _getInfoBoxPositionY(y, height, offset) {
364 | switch (y) {
365 | case "top":
366 | return {
367 | offset: -offset,
368 | align: true
369 | };
370 | case "center":
371 | return {
372 | offset: -height/2 -offset/2,
373 | align: false
374 | }
375 | }
376 |
377 | return {
378 | offset: 0,
379 | align: false
380 | };
381 | }
382 |
383 | _getInfoBoxPositionX(x, width, offset) {
384 | switch (x) {
385 | case "left":
386 | return -width - offset/2;
387 | case "right":
388 | return offset/2;
389 |
390 | }
391 |
392 | return -width/2 - offset/2;
393 | }
394 |
395 | //*******************************************
396 | //******************INFOBOX******************
397 | //*******************************************
398 |
399 | }
400 |
401 | return Map;
402 |
403 | })();
--------------------------------------------------------------------------------
/dist/easygooglemaps.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.EasyGoogleMaps=t():e.EasyGoogleMaps=t()}(this,function(){return function(e){function t(n){if(i[n])return i[n].exports;var o=i[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){(function(n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var i=0;i1088 | * An InfoBox behaves like a google.maps.InfoWindow, but it supports several 1089 | * additional properties for advanced styling. An InfoBox can also be used as a map label. 1090 | *
1091 | * An InfoBox also fires the same events as a google.maps.InfoWindow.
1092 | */
1093 |
1094 | /*!
1095 | *
1096 | * Licensed under the Apache License, Version 2.0 (the "License");
1097 | * you may not use this file except in compliance with the License.
1098 | * You may obtain a copy of the License at
1099 | *
1100 | * http://www.apache.org/licenses/LICENSE-2.0
1101 | *
1102 | * Unless required by applicable law or agreed to in writing, software
1103 | * distributed under the License is distributed on an "AS IS" BASIS,
1104 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1105 | * See the License for the specific language governing permissions and
1106 | * limitations under the License.
1107 | */
1108 |
1109 | /*jslint browser:true */
1110 | /*global google */
1111 |
1112 | /**
1113 | * @name InfoBoxOptions
1114 | * @class This class represents the optional parameter passed to the {@link InfoBox} constructor.
1115 | * @property {string|Node} content The content of the InfoBox (plain text or an HTML DOM node).
1116 | * @property {boolean} [disableAutoPan=false] Disable auto-pan on open.
1117 | * @property {number} maxWidth The maximum width (in pixels) of the InfoBox. Set to 0 if no maximum.
1118 | * @property {Size} pixelOffset The offset (in pixels) from the top left corner of the InfoBox
1119 | * (or the bottom left corner if the alignBottom property is true)
1120 | * to the map pixel corresponding to position.
1121 | * @property {LatLng} position The geographic location at which to display the InfoBox.
1122 | * @property {number} zIndex The CSS z-index style value for the InfoBox.
1123 | * Note: This value overrides a zIndex setting specified in the boxStyle property.
1124 | * @property {string} [boxClass="infoBox"] The name of the CSS class defining the styles for the InfoBox container.
1125 | * @property {Object} [boxStyle] An object literal whose properties define specific CSS
1126 | * style values to be applied to the InfoBox. Style values defined here override those that may
1127 | * be defined in the boxClass style sheet. If this property is changed after the
1128 | * InfoBox has been created, all previously set styles (except those defined in the style sheet)
1129 | * are removed from the InfoBox before the new style values are applied.
1130 | * @property {string} closeBoxMargin The CSS margin style value for the close box.
1131 | * The default is "2px" (a 2-pixel margin on all sides).
1132 | * @property {string} closeBoxURL The URL of the image representing the close box.
1133 | * Note: The default is the URL for Google's standard close box.
1134 | * Set this property to "" if no close box is required.
1135 | * @property {Size} infoBoxClearance Minimum offset (in pixels) from the InfoBox to the
1136 | * map edge after an auto-pan.
1137 | * @property {boolean} [isHidden=false] Hide the InfoBox on open.
1138 | * [Deprecated in favor of the visible property.]
1139 | * @property {boolean} [visible=true] Show the InfoBox on open.
1140 | * @property {boolean} alignBottom Align the bottom left corner of the InfoBox to the position
1141 | * location (default is false which means that the top left corner of the InfoBox is aligned).
1142 | * @property {string} pane The pane where the InfoBox is to appear (default is "floatPane").
1143 | * Set the pane to "mapPane" if the InfoBox is being used as a map label.
1144 | * Valid pane names are the property names for the google.maps.MapPanes object.
1145 | * @property {boolean} enableEventPropagation Propagate mousedown, mousemove, mouseover, mouseout,
1146 | * mouseup, click, dblclick, touchstart, touchend, touchmove, and contextmenu events in the InfoBox
1147 | * (default is false to mimic the behavior of a google.maps.InfoWindow). Set
1148 | * this property to true if the InfoBox is being used as a map label.
1149 | */
1150 |
1151 | /**
1152 | * Creates an InfoBox with the options specified in {@link InfoBoxOptions}.
1153 | * Call InfoBox.open to add the box to the map.
1154 | * @constructor
1155 | * @param {InfoBoxOptions} [opt_opts]
1156 | */
1157 | function InfoBox(opt_opts) {
1158 |
1159 | opt_opts = opt_opts || {};
1160 |
1161 | google.maps.OverlayView.apply(this, arguments);
1162 |
1163 | // Standard options (in common with google.maps.InfoWindow):
1164 | //
1165 | this.content_ = opt_opts.content || "";
1166 | this.disableAutoPan_ = opt_opts.disableAutoPan || false;
1167 | this.maxWidth_ = opt_opts.maxWidth || 0;
1168 | this.pixelOffset_ = opt_opts.pixelOffset || new google.maps.Size(0, 0);
1169 | this.position_ = opt_opts.position || new google.maps.LatLng(0, 0);
1170 | this.zIndex_ = opt_opts.zIndex || null;
1171 |
1172 | // Additional options (unique to InfoBox):
1173 | //
1174 | this.boxClass_ = opt_opts.boxClass || "infoBox";
1175 | this.boxStyle_ = opt_opts.boxStyle || {};
1176 | this.closeBoxMargin_ = opt_opts.closeBoxMargin || "2px";
1177 | this.closeBoxURL_ = opt_opts.closeBoxURL || "http://www.google.com/intl/en_us/mapfiles/close.gif";
1178 | if (opt_opts.closeBoxURL === "") {
1179 | this.closeBoxURL_ = "";
1180 | }
1181 | this.infoBoxClearance_ = opt_opts.infoBoxClearance || new google.maps.Size(1, 1);
1182 |
1183 | if (typeof opt_opts.visible === "undefined") {
1184 | if (typeof opt_opts.isHidden === "undefined") {
1185 | opt_opts.visible = true;
1186 | } else {
1187 | opt_opts.visible = !opt_opts.isHidden;
1188 | }
1189 | }
1190 | this.isHidden_ = !opt_opts.visible;
1191 |
1192 | this.alignBottom_ = opt_opts.alignBottom || false;
1193 | this.pane_ = opt_opts.pane || "floatPane";
1194 | this.enableEventPropagation_ = opt_opts.enableEventPropagation || false;
1195 |
1196 | this.div_ = null;
1197 | this.closeListener_ = null;
1198 | this.moveListener_ = null;
1199 | this.mapListener_ = null;
1200 | this.contextListener_ = null;
1201 | this.eventListeners_ = null;
1202 | this.fixedWidthSet_ = null;
1203 | }
1204 |
1205 | /* InfoBox extends OverlayView in the Google Maps API v3.
1206 | */
1207 | InfoBox.prototype = new google.maps.OverlayView();
1208 |
1209 | /**
1210 | * Creates the DIV representing the InfoBox.
1211 | * @private
1212 | */
1213 | InfoBox.prototype.createInfoBoxDiv_ = function () {
1214 |
1215 | var i;
1216 | var events;
1217 | var bw;
1218 | var me = this;
1219 |
1220 | // This handler prevents an event in the InfoBox from being passed on to the map.
1221 | //
1222 | var cancelHandler = function (e) {
1223 | e.cancelBubble = true;
1224 | if (e.stopPropagation) {
1225 | e.stopPropagation();
1226 | }
1227 | };
1228 |
1229 | // This handler ignores the current event in the InfoBox and conditionally prevents
1230 | // the event from being passed on to the map. It is used for the contextmenu event.
1231 | //
1232 | var ignoreHandler = function (e) {
1233 |
1234 | e.returnValue = false;
1235 |
1236 | if (e.preventDefault) {
1237 |
1238 | e.preventDefault();
1239 | }
1240 |
1241 | if (!me.enableEventPropagation_) {
1242 |
1243 | cancelHandler(e);
1244 | }
1245 | };
1246 |
1247 | if (!this.div_) {
1248 |
1249 | this.div_ = document.createElement("div");
1250 |
1251 | this.setBoxStyle_();
1252 |
1253 | if (typeof this.content_.nodeType === "undefined") {
1254 | this.div_.innerHTML = this.getCloseBoxImg_() + this.content_;
1255 | } else {
1256 | this.div_.innerHTML = this.getCloseBoxImg_();
1257 | this.div_.appendChild(this.content_);
1258 | }
1259 |
1260 | // Add the InfoBox DIV to the DOM
1261 | this.getPanes()[this.pane_].appendChild(this.div_);
1262 |
1263 | this.addClickHandler_();
1264 |
1265 | if (this.div_.style.width) {
1266 |
1267 | this.fixedWidthSet_ = true;
1268 |
1269 | } else {
1270 |
1271 | if (this.maxWidth_ !== 0 && this.div_.offsetWidth > this.maxWidth_) {
1272 |
1273 | this.div_.style.width = this.maxWidth_;
1274 | this.fixedWidthSet_ = true;
1275 |
1276 | } else { // The following code is needed to overcome problems with MSIE
1277 |
1278 | bw = this.getBoxWidths_();
1279 |
1280 | this.div_.style.width = (this.div_.offsetWidth - bw.left - bw.right) + "px";
1281 | this.fixedWidthSet_ = false;
1282 | }
1283 | }
1284 |
1285 | this.panBox_(this.disableAutoPan_);
1286 |
1287 | if (!this.enableEventPropagation_) {
1288 |
1289 | this.eventListeners_ = [];
1290 |
1291 | // Cancel event propagation.
1292 | //
1293 | // Note: mousemove not included (to resolve Issue 152)
1294 | events = ["mousedown", "mouseover", "mouseout", "mouseup",
1295 | "click", "dblclick", "touchstart", "touchend", "touchmove"];
1296 |
1297 | for (i = 0; i < events.length; i++) {
1298 |
1299 | this.eventListeners_.push(google.maps.event.addDomListener(this.div_, events[i], cancelHandler));
1300 | }
1301 |
1302 | // Workaround for Google bug that causes the cursor to change to a pointer
1303 | // when the mouse moves over a marker underneath InfoBox.
1304 | this.eventListeners_.push(google.maps.event.addDomListener(this.div_, "mouseover", function (e) {
1305 | this.style.cursor = "default";
1306 | }));
1307 | }
1308 |
1309 | this.contextListener_ = google.maps.event.addDomListener(this.div_, "contextmenu", ignoreHandler);
1310 |
1311 | /**
1312 | * This event is fired when the DIV containing the InfoBox's content is attached to the DOM.
1313 | * @name InfoBox#domready
1314 | * @event
1315 | */
1316 | google.maps.event.trigger(this, "domready");
1317 | }
1318 | };
1319 |
1320 | /**
1321 | * Returns the HTML tag for the close box.
1322 | * @private
1323 | */
1324 | InfoBox.prototype.getCloseBoxImg_ = function () {
1325 |
1326 | var img = "";
1327 |
1328 | if (this.closeBoxURL_ !== "") {
1329 |
1330 | img = "