8325fa6d-71bb-4108-9be2-a46101abfb2e

Committed 28 Aug 2025 09:36AM UTC coverage: 26.699%. Remained the same

Build # 8325fa6d-71bb-4108-9be2-a46101abfb2e

Build Type

Pull #725

circleci

Committed by

snyk-bot

Commit Message

fix: examples/multimap/package.json & examples/multimap/package-lock.json to reduce vulnerabilities

The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-JS-CIPHERBASE-12084814
- https://snyk.io/vuln/SNYK-JS-SHAJS-12089400

Pull Request Pull Request #725: [Snyk] Security upgrade react-scripts from 4.0.3 to 5.0.0

Run Details

15 of 73 branches covered (20.55%)

Branch coverage included in aggregate %.

40 of 133 relevant lines covered (30.08%)

0.58 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

50.63

/src/GoogleMap.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import Script from 'react-load-script';
import cleanProps from 'clean-react-props';

const EXCLUDE_PROPS = [
  'async',
  'defer',
  'onClick',
  'onDoubleClick',
  'onDrag',
  'onDragEnd',
  'onDragStart',
  'onMouseMove',
  'onMouseOut',
  'onMouseOver',
];

const CALLBACK_MAP = {
  'bounds_changed': 'onBoundsChange',
  'center_changed': 'onCenterChange',
  'click': 'onClick',
  'dblclick': 'onDoubleClick',
  'drag': 'onDrag',
  'dragend': 'onDragEnd',
  'dragstart': 'onDragStart',
  'heading_changed': 'onHeadingChange',
  'idle': 'onIdle',
  'maptypeid_change': 'onMapTypeIdChange',
  'mousemove': 'onMouseMove',
  'mouseout': 'onMouseOut',
  'mouseover': 'onMouseOver',
  'projection_changed': 'onProjectionChange',
  'rightclick': 'onRightClick',
  'tilesloaded': 'onTilesLoad',
  'tilt_changed': 'onTiltChange',
  'zoom_changed': 'onZoomChange',
};

if (typeof window !== 'undefined') {
  window['reactMapsGoogleInstances'] = [];
  window['reactMapsGoogleInit'] = () => {
    window['reactMapsGoogleInstances'].forEach(instance => instance());
  };
}

class GoogleMap extends Component {
  constructor(props) {
    super(props);

    const scriptLoaded = typeof window !== 'undefined' && window.google && window.google.maps && window.google.maps.Map
      ? true
      : false;

    this.state = {
      map: null,
      scriptLoaded,
    };

    this.onScriptLoad = this.onScriptLoad.bind(this);
    this.onScriptInit = this.onScriptInit.bind(this);

    if (typeof window !== 'undefined') {
      window['reactMapsGoogleInstances'].push(this.onScriptInit);
    }
  }

  componentDidMount() {
    this.renderMap();
  }

  componentDidUpdate() {
    this.refreshMapSettings(this.props);
  }

  componentWillUnmount() {
    const {
      map,
    } = this.state;

    if (!map) {
      return;
    }

    google.maps.event.clearInstanceListeners(map);
  }

  refreshMapSettings(props) {
    const {
      map,
    } = this.state;

    if (!map) {
      return;
    }

    const {
      options,
    } = props;

    map.setOptions(options);
  }

  onScriptLoad() {
    this.setState({
      scriptLoaded: true,
    });
  }

  onScriptInit() {
    this.renderMap();
  }

  onMapCallback(callback, event) {
    const {
      map,
    } = this.state;

    this.props[callback](map, event);
  }

  renderMap() {
    if (this.state.map) {
      return false;
    }

    if (!window.google || !window.google.maps || !window.google.maps.Map) {
      return false;
    }

    const {
      options,
      onReady,
    } = this.props;

    const mapElement = ReactDOM.findDOMNode(this.mapRef);

    if (!mapElement) {
      return false;
    }

    const map = new google.maps.Map(mapElement, options);

    Object.keys(CALLBACK_MAP).forEach(key => {
      google.maps.event.addListener(
        map,
        key,
        this.onMapCallback.bind(this, CALLBACK_MAP[key])
      );
    });

    this.setState({
      map,
    });

    onReady(map);
    return true;
  }

  render() {
    const {
      apiKey,
      children,
    } = this.props;

    const {
      map,
      scriptLoaded,
    } = this.state;

    const clonedChildren = React.Children.toArray(children).map(child => {
      return React.cloneElement(child, {
        map,
      });
    });

    return (
      <React.Fragment>
        {scriptLoaded === false && (
          <Script
            url={`https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=reactMapsGoogleInit`}
            onLoad={this.onScriptLoad}
            async={this.props.async ? `async` : false}
            defer={this.props.defer ? `defer` : false}
          />
        )}
        <div
          {...cleanProps(this.props, EXCLUDE_PROPS)}
          ref={element => this.mapRef = element}
          style={{height: '100%'}}
        />
        {clonedChildren}
      </React.Fragment>
    );
  }
}

GoogleMap.propTypes = {
  apiKey: PropTypes.string.isRequired,
  async: PropTypes.bool,
  options: PropTypes.object,
  onBoundsChange: PropTypes.func,
  onCenterChange: PropTypes.func,
  onClick: PropTypes.func,
  onDoubleClick: PropTypes.func,
  onDrag: PropTypes.func,
  onDragEnd: PropTypes.func,
  onDragStart: PropTypes.func,
  onHeadingChange: PropTypes.func,
  onIdle: PropTypes.func,
  onMapTypeIdChange: PropTypes.func,
  onMouseMove: PropTypes.func,
  onMouseOut: PropTypes.func,
  onMouseOver: PropTypes.func,
  onProjectionChange: PropTypes.func,
  onRightClick: PropTypes.func,
  onTilesLoad: PropTypes.func,
  onTiltChange: PropTypes.func,
  onZoomChange: PropTypes.func,
  onReady: PropTypes.func,
};

GoogleMap.defaultProps = {
  options: {
    center: {
      lat: 40.730610,
      lng: -73.935242,
    },
    zoom: 12,
  },
  async: true,
  onBoundsChange: () => {},
  onCenterChange: () => {},
  onClick: () => {},
  onDoubleClick: () => {},
  onDrag: () => {},
  onDragEnd: () => {},
  onDragStart: () => {},
  onHeadingChange: () => {},
  onIdle: () => {},
  onMapTypeIdChange: () => {},
  onMouseMove: () => {},
  onMouseOut: () => {},
  onMouseOver: () => {},
  onProjectionChange: () => {},
  onRightClick: () => {},
  onTilesLoad: () => {},
  onTiltChange: () => {},
  onZoomChange: () => {},
  onReady: () => {},
};

export default GoogleMap;

1	import React, { Component } from 'react';
2	import ReactDOM from 'react-dom';
3	import PropTypes from 'prop-types';
4	import Script from 'react-load-script';
5	import cleanProps from 'clean-react-props';
6
7	const EXCLUDE_PROPS = [	2✔
8	'async',
9	'defer',
10	'onClick',
11	'onDoubleClick',
12	'onDrag',
13	'onDragEnd',
14	'onDragStart',
15	'onMouseMove',
16	'onMouseOut',
17	'onMouseOver',
18	];
19
20	const CALLBACK_MAP = {	2✔
21	'bounds_changed': 'onBoundsChange',
22	'center_changed': 'onCenterChange',
23	'click': 'onClick',
24	'dblclick': 'onDoubleClick',
25	'drag': 'onDrag',
26	'dragend': 'onDragEnd',
27	'dragstart': 'onDragStart',
28	'heading_changed': 'onHeadingChange',
29	'idle': 'onIdle',
30	'maptypeid_change': 'onMapTypeIdChange',
31	'mousemove': 'onMouseMove',
32	'mouseout': 'onMouseOut',
33	'mouseover': 'onMouseOver',
34	'projection_changed': 'onProjectionChange',
35	'rightclick': 'onRightClick',
36	'tilesloaded': 'onTilesLoad',
37	'tilt_changed': 'onTiltChange',
38	'zoom_changed': 'onZoomChange',
39	};
40
41	if (typeof window !== 'undefined') {	2!
42	window['reactMapsGoogleInstances'] = [];	2✔
43	window['reactMapsGoogleInit'] = () => {	2✔
44	window['reactMapsGoogleInstances'].forEach(instance => instance());	×
45	};
46	}
47
48	class GoogleMap extends Component {
49	constructor(props) {
50	super(props);	2✔
51
52	const scriptLoaded = typeof window !== 'undefined' && window.google && window.google.maps && window.google.maps.Map	2!
53	? true
54	: false;
55
56	this.state = {	2✔
57	map: null,
58	scriptLoaded,
59	};
60
61	this.onScriptLoad = this.onScriptLoad.bind(this);	2✔
62	this.onScriptInit = this.onScriptInit.bind(this);	2✔
63
64	if (typeof window !== 'undefined') {	2!
65	window['reactMapsGoogleInstances'].push(this.onScriptInit);	2✔
66	}
67	}
68
69	componentDidMount() {
70	this.renderMap();	2✔
71	}
72
73	componentDidUpdate() {
74	this.refreshMapSettings(this.props);	×
75	}
76
77	componentWillUnmount() {
78	const {
79	map,
80	} = this.state;	2✔
81
82	if (!map) {	2!
83	return;	2✔
84	}
85
86	google.maps.event.clearInstanceListeners(map);	×
87	}
88
89	refreshMapSettings(props) {
90	const {
91	map,
92	} = this.state;	×
93
94	if (!map) {	×
95	return;	×
96	}
97
98	const {
99	options,
100	} = props;	×
101
102	map.setOptions(options);	×
103	}
104
105	onScriptLoad() {
106	this.setState({	×
107	scriptLoaded: true,
108	});
109	}
110
111	onScriptInit() {
112	this.renderMap();	×
113	}
114
115	onMapCallback(callback, event) {
116	const {
117	map,
118	} = this.state;	×
119
120	this.props[callback](map, event);	×
121	}
122
123	renderMap() {
124	if (this.state.map) {	2!
125	return false;	×
126	}
127
128	if (!window.google \|\| !window.google.maps \|\| !window.google.maps.Map) {	2!
129	return false;	2✔
130	}
131
132	const {
133	options,
134	onReady,
135	} = this.props;	×
136
137	const mapElement = ReactDOM.findDOMNode(this.mapRef);	×
138
139	if (!mapElement) {	×
140	return false;	×
141	}
142
143	const map = new google.maps.Map(mapElement, options);	×
144
145	Object.keys(CALLBACK_MAP).forEach(key => {	×
146	google.maps.event.addListener(	×
147	map,
148	key,
149	this.onMapCallback.bind(this, CALLBACK_MAP[key])
150	);
151	});
152
153	this.setState({	×
154	map,
155	});
156
157	onReady(map);	×
158	return true;	×
159	}
160
161	render() {
162	const {
163	apiKey,
164	children,
165	} = this.props;	2✔
166
167	const {
168	map,
169	scriptLoaded,
170	} = this.state;	2✔
171
172	const clonedChildren = React.Children.toArray(children).map(child => {	2✔
173	return React.cloneElement(child, {	1✔
174	map,
175	});
176	});
177
178	return (	2✔
179	<React.Fragment>
180	{scriptLoaded === false && (	4✔
181	<Script
182	url={`https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=reactMapsGoogleInit`}
183	onLoad={this.onScriptLoad}
184	async={this.props.async ? `async` : false}	2!
185	defer={this.props.defer ? `defer` : false}	2!
186	/>
187	)}
188	<div
189	{...cleanProps(this.props, EXCLUDE_PROPS)}
190	ref={element => this.mapRef = element}	4✔
191	style={{height: '100%'}}
192	/>
193	{clonedChildren}
194	</React.Fragment>
195	);
196	}
197	}
198
199	GoogleMap.propTypes = {	2✔
200	apiKey: PropTypes.string.isRequired,
201	async: PropTypes.bool,
202	options: PropTypes.object,
203	onBoundsChange: PropTypes.func,
204	onCenterChange: PropTypes.func,
205	onClick: PropTypes.func,
206	onDoubleClick: PropTypes.func,
207	onDrag: PropTypes.func,
208	onDragEnd: PropTypes.func,
209	onDragStart: PropTypes.func,
210	onHeadingChange: PropTypes.func,
211	onIdle: PropTypes.func,
212	onMapTypeIdChange: PropTypes.func,
213	onMouseMove: PropTypes.func,
214	onMouseOut: PropTypes.func,
215	onMouseOver: PropTypes.func,
216	onProjectionChange: PropTypes.func,
217	onRightClick: PropTypes.func,
218	onTilesLoad: PropTypes.func,
219	onTiltChange: PropTypes.func,
220	onZoomChange: PropTypes.func,
221	onReady: PropTypes.func,
222	};
223
224	GoogleMap.defaultProps = {	2✔
225	options: {
226	center: {
227	lat: 40.730610,
228	lng: -73.935242,
229	},
230	zoom: 12,
231	},
232	async: true,
233	onBoundsChange: () => {},
234	onCenterChange: () => {},
235	onClick: () => {},
236	onDoubleClick: () => {},
237	onDrag: () => {},
238	onDragEnd: () => {},
239	onDragStart: () => {},
240	onHeadingChange: () => {},
241	onIdle: () => {},
242	onMapTypeIdChange: () => {},
243	onMouseMove: () => {},
244	onMouseOut: () => {},
245	onMouseOver: () => {},
246	onProjectionChange: () => {},
247	onRightClick: () => {},
248	onTilesLoad: () => {},
249	onTiltChange: () => {},
250	onZoomChange: () => {},
251	onReady: () => {},
252	};
253
254	export default GoogleMap;

ryanhefner / react-maps-google / 8325fa6d-71bb-4108-9be2-a46101abfb2e

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous