mirror of
https://github.com/google-map-react/google-map-react.git
synced 2025-12-08 18:26:32 +00:00
1173 lines
36 KiB
JavaScript
1173 lines
36 KiB
JavaScript
/* eslint-disable import/no-extraneous-dependencies, react/forbid-prop-types, react/no-find-dom-node, no-console, no-undef */
|
|
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import ReactDOM from 'react-dom';
|
|
|
|
// helpers
|
|
import GoogleMapMap from './google_map_map';
|
|
import MarkerDispatcher from './marker_dispatcher';
|
|
import GoogleMapMarkers from './google_map_markers';
|
|
import GoogleMapMarkersPrerender from './google_map_markers_prerender';
|
|
import { generateHeatmap, optionsHeatmap } from './google_heatmap';
|
|
|
|
// loaders
|
|
import googleMapLoader from './loaders/google_map_loader';
|
|
|
|
// lib
|
|
import Geo from './lib/geo';
|
|
|
|
// tools
|
|
import raf from './utils/raf';
|
|
import log2 from './utils/log2';
|
|
import omit from './utils/omit';
|
|
import pick from './utils/pick';
|
|
import isEmpty from './utils/isEmpty';
|
|
import isNumber from './utils/isNumber';
|
|
import detectBrowser from './utils/detect';
|
|
import shallowEqual from './utils/shallowEqual';
|
|
import isPlainObject from './utils/isPlainObject';
|
|
import isArraysEqualEps from './utils/isArraysEqualEps';
|
|
import {
|
|
addResizeListener,
|
|
removeResizeListener,
|
|
} from './utils/detectElementResize';
|
|
import addPassiveEventListener from './utils/passiveEvents';
|
|
|
|
// consts
|
|
const kEPS = 0.00001;
|
|
const K_GOOGLE_TILE_SIZE = 256;
|
|
// real minZoom calculated here _getMinZoom
|
|
const K_IDLE_TIMEOUT = 100;
|
|
const K_IDLE_CLICK_TIMEOUT = 300;
|
|
const DEFAULT_MIN_ZOOM = 3;
|
|
// Starting with version 3.32, the maps API calls `draw()` each frame during
|
|
// a zoom animation.
|
|
const DRAW_CALLED_DURING_ANIMATION_VERSION = 32;
|
|
const IS_REACT_16 = ReactDOM.createPortal !== undefined;
|
|
|
|
const createPortal = IS_REACT_16
|
|
? ReactDOM.createPortal
|
|
: ReactDOM.unstable_renderSubtreeIntoContainer;
|
|
|
|
function defaultOptions_(/* maps */) {
|
|
return {
|
|
overviewMapControl: false,
|
|
streetViewControl: false,
|
|
rotateControl: true,
|
|
mapTypeControl: false,
|
|
// disable poi
|
|
styles: [
|
|
{
|
|
featureType: 'poi',
|
|
elementType: 'labels',
|
|
stylers: [{ visibility: 'off' }],
|
|
},
|
|
],
|
|
minZoom: DEFAULT_MIN_ZOOM, // dynamically recalculted if possible during init
|
|
};
|
|
}
|
|
|
|
const latLng2Obj = (latLng) =>
|
|
isPlainObject(latLng) ? latLng : { lat: latLng[0], lng: latLng[1] };
|
|
|
|
const _checkMinZoom = (zoom, minZoom) => {
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
if (zoom < minZoom) {
|
|
console.warn(
|
|
'GoogleMap: ' + // eslint-disable-line
|
|
'minZoom option is less than recommended ' +
|
|
'minZoom option for your map sizes.\n' +
|
|
'overrided to value ' +
|
|
minZoom
|
|
);
|
|
}
|
|
}
|
|
|
|
if (minZoom < zoom) {
|
|
return zoom;
|
|
}
|
|
return minZoom;
|
|
};
|
|
|
|
const isFullScreen = () =>
|
|
document.fullscreen ||
|
|
document.webkitIsFullScreen ||
|
|
document.mozFullScreen ||
|
|
document.msFullscreenElement;
|
|
|
|
class GoogleMap extends Component {
|
|
static propTypes = {
|
|
apiKey: PropTypes.string,
|
|
bootstrapURLKeys: PropTypes.any,
|
|
|
|
defaultCenter: PropTypes.oneOfType([
|
|
PropTypes.array,
|
|
PropTypes.shape({
|
|
lat: PropTypes.number,
|
|
lng: PropTypes.number,
|
|
}),
|
|
]),
|
|
center: PropTypes.oneOfType([
|
|
PropTypes.array,
|
|
PropTypes.shape({
|
|
lat: PropTypes.number,
|
|
lng: PropTypes.number,
|
|
}),
|
|
]),
|
|
defaultZoom: PropTypes.number,
|
|
zoom: PropTypes.number,
|
|
onBoundsChange: PropTypes.func,
|
|
onChange: PropTypes.func,
|
|
onClick: PropTypes.func,
|
|
onChildClick: PropTypes.func,
|
|
onChildMouseDown: PropTypes.func,
|
|
onChildMouseUp: PropTypes.func,
|
|
onChildMouseMove: PropTypes.func,
|
|
onChildMouseEnter: PropTypes.func,
|
|
onChildMouseLeave: PropTypes.func,
|
|
onZoomAnimationStart: PropTypes.func,
|
|
onZoomAnimationEnd: PropTypes.func,
|
|
onDrag: PropTypes.func,
|
|
onDragEnd: PropTypes.func,
|
|
onMapTypeIdChange: PropTypes.func,
|
|
onTilesLoaded: PropTypes.func,
|
|
options: PropTypes.any,
|
|
distanceToMouse: PropTypes.func,
|
|
hoverDistance: PropTypes.number,
|
|
debounced: PropTypes.bool,
|
|
margin: PropTypes.array,
|
|
googleMapLoader: PropTypes.any,
|
|
onGoogleApiLoaded: PropTypes.func,
|
|
yesIWantToUseGoogleMapApiInternals: PropTypes.bool,
|
|
draggable: PropTypes.bool,
|
|
style: PropTypes.any,
|
|
resetBoundsOnResize: PropTypes.bool,
|
|
layerTypes: PropTypes.arrayOf(PropTypes.string), // ['TransitLayer', 'TrafficLayer']
|
|
shouldUnregisterMapOnUnmount: PropTypes.bool,
|
|
};
|
|
|
|
static defaultProps = {
|
|
distanceToMouse(pt, mousePos /* , markerProps */) {
|
|
return Math.sqrt(
|
|
(pt.x - mousePos.x) * (pt.x - mousePos.x) +
|
|
(pt.y - mousePos.y) * (pt.y - mousePos.y)
|
|
);
|
|
},
|
|
hoverDistance: 30,
|
|
debounced: true,
|
|
options: defaultOptions_,
|
|
googleMapLoader,
|
|
yesIWantToUseGoogleMapApiInternals: false,
|
|
style: {
|
|
width: '100%',
|
|
height: '100%',
|
|
margin: 0,
|
|
padding: 0,
|
|
position: 'relative',
|
|
},
|
|
layerTypes: [],
|
|
heatmap: {},
|
|
heatmapLibrary: false,
|
|
shouldUnregisterMapOnUnmount: true,
|
|
};
|
|
|
|
static googleMapLoader = googleMapLoader; // eslint-disable-line
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.mounted_ = false;
|
|
this.initialized_ = false;
|
|
this.googleApiLoadedCalled_ = false;
|
|
|
|
this.map_ = null;
|
|
this.maps_ = null;
|
|
this.prevBounds_ = null;
|
|
this.heatmap = null;
|
|
|
|
this.layers_ = {};
|
|
|
|
this.mouse_ = null;
|
|
this.mouseMoveTime_ = 0;
|
|
this.boundingRect_ = null;
|
|
this.mouseInMap_ = true;
|
|
|
|
this.dragTime_ = 0;
|
|
this.fireMouseEventOnIdle_ = false;
|
|
this.updateCounter_ = 0;
|
|
|
|
this.markersDispatcher_ = new MarkerDispatcher(this);
|
|
this.geoService_ = new Geo(K_GOOGLE_TILE_SIZE);
|
|
this.centerIsObject_ = isPlainObject(this.props.center);
|
|
|
|
this.minZoom_ = DEFAULT_MIN_ZOOM;
|
|
this.defaultDraggableOption_ = true;
|
|
|
|
this.zoomControlClickTime_ = 0;
|
|
|
|
this.childMouseDownArgs_ = null;
|
|
this.childMouseUpTime_ = 0;
|
|
|
|
this.googleMapDom_ = null;
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
if (this.props.apiKey) {
|
|
console.warn(
|
|
'GoogleMap: ' + // eslint-disable-line no-console
|
|
'apiKey is deprecated, use ' +
|
|
'bootstrapURLKeys={{key: YOUR_API_KEY}} instead.'
|
|
);
|
|
}
|
|
|
|
if (this.props.onBoundsChange) {
|
|
console.warn(
|
|
'GoogleMap: ' + // eslint-disable-line no-console
|
|
'onBoundsChange is deprecated, use ' +
|
|
'onChange({center, zoom, bounds, ...other}) instead.'
|
|
);
|
|
}
|
|
|
|
if (isEmpty(this.props.center) && isEmpty(this.props.defaultCenter)) {
|
|
console.warn(
|
|
'GoogleMap: center or defaultCenter property must be defined' // eslint-disable-line no-console
|
|
);
|
|
}
|
|
|
|
if (isEmpty(this.props.zoom) && isEmpty(this.props.defaultZoom)) {
|
|
console.warn(
|
|
'GoogleMap: zoom or defaultZoom property must be defined' // eslint-disable-line no-console
|
|
);
|
|
}
|
|
}
|
|
|
|
if (this._isCenterDefined(this.props.center || this.props.defaultCenter)) {
|
|
const propsCenter = latLng2Obj(
|
|
this.props.center || this.props.defaultCenter
|
|
);
|
|
this.geoService_.setView(
|
|
propsCenter,
|
|
this.props.zoom || this.props.defaultZoom,
|
|
0
|
|
);
|
|
}
|
|
|
|
this.zoomAnimationInProgress_ = false;
|
|
|
|
this.state = {
|
|
overlay: null,
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.mounted_ = true;
|
|
addPassiveEventListener(window, 'resize', this._onWindowResize, false);
|
|
addPassiveEventListener(window, 'keydown', this._onKeyDownCapture, true);
|
|
const mapDom = ReactDOM.findDOMNode(this.googleMapDom_);
|
|
// gmap can't prevent map drag if mousedown event already occured
|
|
// the only workaround I find is prevent mousedown native browser event
|
|
|
|
if (mapDom) {
|
|
addPassiveEventListener(
|
|
mapDom,
|
|
'mousedown',
|
|
this._onMapMouseDownNative,
|
|
true
|
|
);
|
|
}
|
|
|
|
addPassiveEventListener(window, 'mouseup', this._onChildMouseUp, false);
|
|
const bootstrapURLKeys = {
|
|
...(this.props.apiKey && { key: this.props.apiKey }),
|
|
...this.props.bootstrapURLKeys,
|
|
};
|
|
|
|
this.props.googleMapLoader(bootstrapURLKeys, this.props.heatmapLibrary); // we can start load immediatly
|
|
|
|
setTimeout(
|
|
() => {
|
|
// to detect size
|
|
this._setViewSize();
|
|
if (
|
|
this._isCenterDefined(this.props.center || this.props.defaultCenter)
|
|
) {
|
|
this._initMap();
|
|
}
|
|
},
|
|
0,
|
|
this
|
|
);
|
|
if (this.props.resetBoundsOnResize) {
|
|
const that = this;
|
|
addResizeListener(mapDom, that._mapDomResizeCallback);
|
|
}
|
|
}
|
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
|
// draggable does not affect inner components
|
|
return (
|
|
!shallowEqual(
|
|
omit(this.props, ['draggable']),
|
|
omit(nextProps, ['draggable'])
|
|
) || !shallowEqual(this.state, nextState)
|
|
);
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
if (!shallowEqual(prevProps.defaultCenter, this.props.defaultCenter)) {
|
|
console.warn(
|
|
"GoogleMap: defaultCenter prop changed. You can't change default props."
|
|
);
|
|
}
|
|
|
|
if (!shallowEqual(prevProps.defaultZoom, this.props.defaultZoom)) {
|
|
console.warn(
|
|
"GoogleMap: defaultZoom prop changed. You can't change default props."
|
|
);
|
|
}
|
|
}
|
|
|
|
if (
|
|
!this._isCenterDefined(prevProps.center) &&
|
|
this._isCenterDefined(this.props.center)
|
|
) {
|
|
setTimeout(() => this._initMap(), 0);
|
|
}
|
|
|
|
if (this.map_) {
|
|
const centerLatLng = this.geoService_.getCenter();
|
|
if (this._isCenterDefined(this.props.center)) {
|
|
const currentCenter = latLng2Obj(this.props.center);
|
|
const prevCenter = this._isCenterDefined(prevProps.center)
|
|
? latLng2Obj(prevProps.center)
|
|
: null;
|
|
|
|
if (
|
|
!prevCenter ||
|
|
Math.abs(currentCenter.lat - prevCenter.lat) +
|
|
Math.abs(currentCenter.lng - prevCenter.lng) >
|
|
kEPS
|
|
) {
|
|
if (
|
|
Math.abs(currentCenter.lat - centerLatLng.lat) +
|
|
Math.abs(currentCenter.lng - centerLatLng.lng) >
|
|
kEPS
|
|
) {
|
|
this.map_.panTo({
|
|
lat: currentCenter.lat,
|
|
lng: currentCenter.lng,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!isEmpty(this.props.zoom)) {
|
|
// if zoom chaged by user
|
|
if (Math.abs(this.props.zoom - prevProps.zoom) > 0) {
|
|
this.map_.setZoom(this.props.zoom);
|
|
}
|
|
}
|
|
|
|
if (!isEmpty(prevProps.draggable) && isEmpty(this.props.draggable)) {
|
|
// reset to default
|
|
this.map_.setOptions({ draggable: this.defaultDraggableOption_ });
|
|
} else if (!shallowEqual(prevProps.draggable, this.props.draggable)) {
|
|
// also prevent this on window 'mousedown' event to prevent map move
|
|
this.map_.setOptions({ draggable: this.props.draggable });
|
|
}
|
|
|
|
// use shallowEqual to try avoid calling map._setOptions if only the ref changes
|
|
if (
|
|
!isEmpty(this.props.options) &&
|
|
!shallowEqual(prevProps.options, this.props.options)
|
|
) {
|
|
const mapPlainObjects = pick(this.maps_, isPlainObject);
|
|
let options =
|
|
typeof this.props.options === 'function'
|
|
? this.props.options(mapPlainObjects)
|
|
: this.props.options;
|
|
// remove zoom, center and draggable options as these are managed by google-maps-react
|
|
options = omit(options, ['zoom', 'center', 'draggable']);
|
|
|
|
if ('minZoom' in options) {
|
|
const minZoom = this._computeMinZoom(options.minZoom);
|
|
options.minZoom = _checkMinZoom(options.minZoom, minZoom);
|
|
}
|
|
|
|
this.map_.setOptions(options);
|
|
}
|
|
|
|
if (!shallowEqual(this.props.layerTypes, prevProps.layerTypes)) {
|
|
Object.keys(this.layers_).forEach((layerKey) => {
|
|
this.layers_[layerKey].setMap(null);
|
|
delete this.layers_[layerKey];
|
|
});
|
|
this._setLayers(this.props.layerTypes);
|
|
}
|
|
|
|
if (
|
|
this.heatmap &&
|
|
!shallowEqual(this.props.heatmap.positions, prevProps.heatmap.positions)
|
|
) {
|
|
this.heatmap.setData(
|
|
this.props.heatmap.positions.map((p) => ({
|
|
location: new this.maps_.LatLng(p.lat, p.lng),
|
|
weight: p.weight,
|
|
}))
|
|
);
|
|
}
|
|
if (
|
|
this.heatmap &&
|
|
!shallowEqual(this.props.heatmap.options, prevProps.heatmap.options)
|
|
) {
|
|
Object.keys(this.props.heatmap.options).forEach((option) => {
|
|
this.heatmap.set(option, this.props.heatmap.options[option]);
|
|
});
|
|
}
|
|
}
|
|
// emit actions
|
|
this.markersDispatcher_.emit('kON_CHANGE');
|
|
|
|
if (!shallowEqual(this.props.hoverDistance, prevProps.hoverDistance)) {
|
|
this.markersDispatcher_.emit('kON_MOUSE_POSITION_CHANGE');
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.mounted_ = false;
|
|
const mapDom = ReactDOM.findDOMNode(this.googleMapDom_);
|
|
if (mapDom) {
|
|
mapDom.removeEventListener('mousedown', this._onMapMouseDownNative, true);
|
|
}
|
|
window.removeEventListener('resize', this._onWindowResize);
|
|
window.removeEventListener('keydown', this._onKeyDownCapture);
|
|
window.removeEventListener('mouseup', this._onChildMouseUp, false);
|
|
if (this.props.resetBoundsOnResize) {
|
|
removeResizeListener(mapDom, this._mapDomResizeCallback);
|
|
}
|
|
|
|
if (this.overlay_) {
|
|
// this triggers overlay_.onRemove(), which will unmount the <GoogleMapMarkers/>
|
|
this.overlay_.setMap(null);
|
|
}
|
|
|
|
if (this.maps_ && this.map_ && this.props.shouldUnregisterMapOnUnmount) {
|
|
// fix google, as otherwise listeners works even without map
|
|
this.map_.setOptions({ scrollwheel: false });
|
|
this.maps_.event.clearInstanceListeners(this.map_);
|
|
}
|
|
|
|
if (this.props.shouldUnregisterMapOnUnmount) {
|
|
this.map_ = null;
|
|
this.maps_ = null;
|
|
}
|
|
this.markersDispatcher_.dispose();
|
|
|
|
this.resetSizeOnIdle_ = false;
|
|
|
|
if (this.props.shouldUnregisterMapOnUnmount) {
|
|
delete this.map_;
|
|
delete this.markersDispatcher_;
|
|
}
|
|
}
|
|
|
|
// calc minZoom if map size available
|
|
// it's better to not set minZoom less than this calculation gives
|
|
// otherwise there is no homeomorphism between screen coordinates and map
|
|
// (one map coordinate can have different screen coordinates)
|
|
_getMinZoom = () => {
|
|
if (this.geoService_.getWidth() > 0 || this.geoService_.getHeight() > 0) {
|
|
const tilesPerWidth =
|
|
Math.ceil(this.geoService_.getWidth() / K_GOOGLE_TILE_SIZE) + 2;
|
|
const tilesPerHeight =
|
|
Math.ceil(this.geoService_.getHeight() / K_GOOGLE_TILE_SIZE) + 2;
|
|
const maxTilesPerDim = Math.max(tilesPerWidth, tilesPerHeight);
|
|
return Math.ceil(log2(maxTilesPerDim));
|
|
}
|
|
return DEFAULT_MIN_ZOOM;
|
|
};
|
|
|
|
_computeMinZoom = (minZoom) => {
|
|
if (!isEmpty(minZoom)) {
|
|
return minZoom;
|
|
}
|
|
return this._getMinZoom();
|
|
};
|
|
|
|
_mapDomResizeCallback = () => {
|
|
this.resetSizeOnIdle_ = true;
|
|
if (this.maps_) {
|
|
const originalCenter = this.props.center || this.props.defaultCenter;
|
|
const currentCenter = this.map_.getCenter();
|
|
this.maps_.event.trigger(this.map_, 'resize');
|
|
this.map_.setCenter(
|
|
this.props.resetBoundsOnResize ? originalCenter : currentCenter
|
|
);
|
|
}
|
|
};
|
|
|
|
_setLayers = (layerTypes) => {
|
|
layerTypes.forEach((layerType) => {
|
|
this.layers_[layerType] = new this.maps_[layerType]();
|
|
this.layers_[layerType].setMap(this.map_);
|
|
});
|
|
};
|
|
|
|
_renderPortal = () => (
|
|
<GoogleMapMarkers
|
|
experimental={this.props.experimental}
|
|
onChildClick={this._onChildClick}
|
|
onChildMouseDown={this._onChildMouseDown}
|
|
onChildMouseEnter={this._onChildMouseEnter}
|
|
onChildMouseLeave={this._onChildMouseLeave}
|
|
geoService={this.geoService_}
|
|
insideMapPanes
|
|
distanceToMouse={this.props.distanceToMouse}
|
|
getHoverDistance={this._getHoverDistance}
|
|
dispatcher={this.markersDispatcher_}
|
|
/>
|
|
);
|
|
|
|
_initMap = () => {
|
|
// only initialize the map once
|
|
if (this.initialized_) {
|
|
return;
|
|
}
|
|
this.initialized_ = true;
|
|
|
|
const propsCenter = latLng2Obj(
|
|
this.props.center || this.props.defaultCenter
|
|
);
|
|
this.geoService_.setView(
|
|
propsCenter,
|
|
this.props.zoom || this.props.defaultZoom,
|
|
0
|
|
);
|
|
|
|
this._onBoundsChanged(); // now we can calculate map bounds center etc...
|
|
|
|
const bootstrapURLKeys = {
|
|
...(this.props.apiKey && { key: this.props.apiKey }),
|
|
...this.props.bootstrapURLKeys,
|
|
};
|
|
|
|
this.props
|
|
.googleMapLoader(bootstrapURLKeys, this.props.heatmapLibrary)
|
|
.then((maps) => {
|
|
if (!this.mounted_) {
|
|
return;
|
|
}
|
|
|
|
const centerLatLng = this.geoService_.getCenter();
|
|
|
|
const propsOptions = {
|
|
zoom: this.props.zoom || this.props.defaultZoom,
|
|
center: new maps.LatLng(centerLatLng.lat, centerLatLng.lng),
|
|
};
|
|
|
|
// Start Heatmap
|
|
if (this.props.heatmap.positions) {
|
|
Object.assign(this, {
|
|
heatmap: generateHeatmap(maps, this.props.heatmap),
|
|
});
|
|
optionsHeatmap(this.heatmap, this.props.heatmap);
|
|
}
|
|
// End Heatmap
|
|
|
|
// prevent to exapose full api
|
|
// next props must be exposed (console.log(Object.keys(pick(maps, isPlainObject))))
|
|
// "Animation", "ControlPosition", "MapTypeControlStyle", "MapTypeId",
|
|
// "NavigationControlStyle", "ScaleControlStyle", "StrokePosition",
|
|
// "SymbolPath", "ZoomControlStyle",
|
|
// "event", "DirectionsStatus", "DirectionsTravelMode", "DirectionsUnitSystem",
|
|
// "DistanceMatrixStatus",
|
|
// "DistanceMatrixElementStatus", "ElevationStatus", "GeocoderLocationType",
|
|
// "GeocoderStatus", "KmlLayerStatus",
|
|
// "MaxZoomStatus", "StreetViewStatus", "TransitMode", "TransitRoutePreference",
|
|
// "TravelMode", "UnitSystem"
|
|
const mapPlainObjects = pick(maps, isPlainObject);
|
|
const options =
|
|
typeof this.props.options === 'function'
|
|
? this.props.options(mapPlainObjects)
|
|
: this.props.options;
|
|
const defaultOptions = defaultOptions_(mapPlainObjects);
|
|
|
|
const draggableOptions = !isEmpty(this.props.draggable) && {
|
|
draggable: this.props.draggable,
|
|
};
|
|
|
|
const minZoom = this._computeMinZoom(options.minZoom);
|
|
this.minZoom_ = minZoom;
|
|
|
|
const preMapOptions = {
|
|
...defaultOptions,
|
|
minZoom,
|
|
...options,
|
|
...propsOptions,
|
|
};
|
|
|
|
this.defaultDraggableOption_ = !isEmpty(preMapOptions.draggable)
|
|
? preMapOptions.draggable
|
|
: this.defaultDraggableOption_;
|
|
|
|
const mapOptions = {
|
|
...preMapOptions,
|
|
...draggableOptions,
|
|
};
|
|
|
|
mapOptions.minZoom = _checkMinZoom(mapOptions.minZoom, minZoom);
|
|
|
|
const map = new maps.Map(
|
|
ReactDOM.findDOMNode(this.googleMapDom_),
|
|
mapOptions
|
|
);
|
|
|
|
this.map_ = map;
|
|
this.maps_ = maps;
|
|
|
|
this._setLayers(this.props.layerTypes);
|
|
|
|
// Parse `google.maps.version` to capture the major version number.
|
|
const versionMatch = maps.version.match(/^3\.(\d+)\./);
|
|
// The major version is the first (and only) captured group.
|
|
const mapsVersion = versionMatch && Number(versionMatch[1]);
|
|
|
|
// render in overlay
|
|
const this_ = this;
|
|
const overlay = Object.assign(new maps.OverlayView(), {
|
|
onAdd() {
|
|
const K_MAX_WIDTH =
|
|
typeof screen !== 'undefined' ? `${screen.width}px` : '2000px';
|
|
const K_MAX_HEIGHT =
|
|
typeof screen !== 'undefined' ? `${screen.height}px` : '2000px';
|
|
|
|
const div = document.createElement('div');
|
|
div.style.backgroundColor = 'transparent';
|
|
div.style.position = 'absolute';
|
|
div.style.left = '0px';
|
|
div.style.top = '0px';
|
|
div.style.width = K_MAX_WIDTH; // prevents some chrome draw defects
|
|
div.style.height = K_MAX_HEIGHT;
|
|
|
|
if (this_.props.overlayViewDivStyle) {
|
|
const { overlayViewDivStyle } = this_.props;
|
|
if (typeof overlayViewDivStyle === 'object') {
|
|
Object.keys(overlayViewDivStyle).forEach((property) => {
|
|
div.style[property] = overlayViewDivStyle[property];
|
|
});
|
|
}
|
|
}
|
|
|
|
const panes = this.getPanes();
|
|
panes.overlayMouseTarget.appendChild(div);
|
|
this_.geoService_.setMapCanvasProjection(
|
|
maps,
|
|
overlay.getProjection()
|
|
);
|
|
|
|
if (!IS_REACT_16) {
|
|
createPortal(
|
|
this_,
|
|
this_._renderPortal(),
|
|
div,
|
|
// remove prerendered markers
|
|
() => this_.setState({ overlay: div })
|
|
);
|
|
} else {
|
|
this_.setState({ overlay: div });
|
|
}
|
|
},
|
|
|
|
onRemove() {
|
|
const renderedOverlay = this_.state.overlay;
|
|
if (renderedOverlay && !IS_REACT_16) {
|
|
ReactDOM.unmountComponentAtNode(renderedOverlay);
|
|
}
|
|
this_.setState({ overlay: null });
|
|
},
|
|
|
|
draw() {
|
|
this_.updateCounter_++;
|
|
this_._onBoundsChanged(map, maps, !this_.props.debounced);
|
|
|
|
if (!this_.googleApiLoadedCalled_) {
|
|
this_._onGoogleApiLoaded({ map, maps, ref: this_.googleMapDom_ });
|
|
this_.googleApiLoadedCalled_ = true;
|
|
}
|
|
|
|
if (this_.mouse_) {
|
|
const latLng = this_.geoService_.fromContainerPixelToLatLng(
|
|
this_.mouse_
|
|
);
|
|
this_.mouse_.lat = latLng.lat;
|
|
this_.mouse_.lng = latLng.lng;
|
|
}
|
|
|
|
this_._onChildMouseMove();
|
|
|
|
if (this_.markersDispatcher_) {
|
|
this_.markersDispatcher_.emit('kON_CHANGE');
|
|
if (this_.fireMouseEventOnIdle_) {
|
|
this_.markersDispatcher_.emit('kON_MOUSE_POSITION_CHANGE');
|
|
}
|
|
}
|
|
},
|
|
});
|
|
|
|
this.overlay_ = overlay;
|
|
|
|
overlay.setMap(map);
|
|
if (this.props.heatmap.positions) {
|
|
this.heatmap.setMap(map);
|
|
}
|
|
|
|
if (this.props.onTilesLoaded) {
|
|
maps.event.addListener(map, 'tilesloaded', () => {
|
|
this_._onTilesLoaded();
|
|
});
|
|
}
|
|
|
|
maps.event.addListener(map, 'zoom_changed', () => {
|
|
// recalc position at zoom start
|
|
if (this_.geoService_.getZoom() !== map.getZoom()) {
|
|
if (!this_.zoomAnimationInProgress_) {
|
|
this_.zoomAnimationInProgress_ = true;
|
|
this_._onZoomAnimationStart(map.zoom);
|
|
}
|
|
|
|
// If draw() is not called each frame during a zoom animation,
|
|
// simulate it.
|
|
if (mapsVersion < DRAW_CALLED_DURING_ANIMATION_VERSION) {
|
|
const TIMEOUT_ZOOM = 300;
|
|
|
|
if (
|
|
new Date().getTime() - this.zoomControlClickTime_ <
|
|
TIMEOUT_ZOOM
|
|
) {
|
|
// there is strange Google Map Api behavior in chrome when zoom animation of map
|
|
// is started only on second raf call, if was click on zoom control
|
|
// or +- keys pressed, so i wait for two rafs before change state
|
|
|
|
// this does not fully prevent animation jump
|
|
// but reduce it's occurence probability
|
|
raf(() =>
|
|
raf(() => {
|
|
this_.updateCounter_++;
|
|
this_._onBoundsChanged(map, maps);
|
|
})
|
|
);
|
|
} else {
|
|
this_.updateCounter_++;
|
|
this_._onBoundsChanged(map, maps);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
maps.event.addListener(map, 'idle', () => {
|
|
if (this.resetSizeOnIdle_) {
|
|
this._setViewSize();
|
|
const currMinZoom = this._computeMinZoom(options.minZoom);
|
|
|
|
if (currMinZoom !== this.minZoom_) {
|
|
this.minZoom_ = currMinZoom;
|
|
map.setOptions({ minZoom: currMinZoom });
|
|
}
|
|
|
|
this.resetSizeOnIdle_ = false;
|
|
}
|
|
|
|
if (this_.zoomAnimationInProgress_) {
|
|
this_.zoomAnimationInProgress_ = false;
|
|
this_._onZoomAnimationEnd(map.zoom);
|
|
}
|
|
|
|
this_.updateCounter_++;
|
|
this_._onBoundsChanged(map, maps);
|
|
|
|
this_.dragTime_ = 0;
|
|
|
|
if (this_.markersDispatcher_) {
|
|
this_.markersDispatcher_.emit('kON_CHANGE');
|
|
}
|
|
});
|
|
|
|
maps.event.addListener(map, 'mouseover', () => {
|
|
// has advantage over div MouseLeave
|
|
this_.mouseInMap_ = true;
|
|
});
|
|
|
|
// an alternative way to know the mouse is back within the map
|
|
// This would not fire when clicking/interacting with google maps
|
|
// own on-map countrols+markers. This handles an edge case for touch devices
|
|
// + 'draggable:false' custom option. See #332 for more details.
|
|
maps.event.addListener(map, 'click', () => {
|
|
this_.mouseInMap_ = true;
|
|
});
|
|
|
|
maps.event.addListener(map, 'mouseout', () => {
|
|
// has advantage over div MouseLeave
|
|
this_.mouseInMap_ = false;
|
|
this_.mouse_ = null;
|
|
this_.markersDispatcher_.emit('kON_MOUSE_POSITION_CHANGE');
|
|
});
|
|
|
|
maps.event.addListener(map, 'drag', () => {
|
|
this_.dragTime_ = new Date().getTime();
|
|
this_._onDrag(map);
|
|
});
|
|
|
|
maps.event.addListener(map, 'dragend', () => {
|
|
// 'dragend' fires on mouse release.
|
|
// 'idle' listener waits until drag inertia ends before firing `onDragEnd`
|
|
const idleListener = maps.event.addListener(map, 'idle', () => {
|
|
maps.event.removeListener(idleListener);
|
|
this_._onDragEnd(map);
|
|
});
|
|
});
|
|
// user choosing satellite vs roads, etc
|
|
maps.event.addListener(map, 'maptypeid_changed', () => {
|
|
this_._onMapTypeIdChange(map.getMapTypeId());
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
// notify callback of load failure
|
|
this._onGoogleApiLoaded({
|
|
map: null,
|
|
maps: null,
|
|
ref: this.googleMapDom_,
|
|
});
|
|
console.error(e); // eslint-disable-line no-console
|
|
throw e;
|
|
});
|
|
};
|
|
|
|
_onGoogleApiLoaded = (...args) => {
|
|
if (this.props.onGoogleApiLoaded) {
|
|
if (
|
|
process.env.NODE_ENV !== 'production' &&
|
|
this.props.yesIWantToUseGoogleMapApiInternals !== true
|
|
) {
|
|
console.warn(
|
|
'GoogleMap: ' + // eslint-disable-line
|
|
'Usage of internal api objects is dangerous ' +
|
|
'and can cause a lot of issues.\n' +
|
|
'To hide this warning add yesIWantToUseGoogleMapApiInternals={true} ' +
|
|
'to <GoogleMap instance'
|
|
);
|
|
}
|
|
|
|
this.props.onGoogleApiLoaded(...args);
|
|
}
|
|
};
|
|
|
|
_getHoverDistance = () => this.props.hoverDistance;
|
|
|
|
_onDrag = (...args) => this.props.onDrag && this.props.onDrag(...args);
|
|
|
|
_onDragEnd = (...args) =>
|
|
this.props.onDragEnd && this.props.onDragEnd(...args);
|
|
|
|
_onMapTypeIdChange = (...args) =>
|
|
this.props.onMapTypeIdChange && this.props.onMapTypeIdChange(...args);
|
|
|
|
_onZoomAnimationStart = (...args) =>
|
|
this.props.onZoomAnimationStart && this.props.onZoomAnimationStart(...args);
|
|
|
|
_onZoomAnimationEnd = (...args) =>
|
|
this.props.onZoomAnimationEnd && this.props.onZoomAnimationEnd(...args);
|
|
|
|
_onTilesLoaded = () => this.props.onTilesLoaded && this.props.onTilesLoaded();
|
|
|
|
_onChildClick = (...args) => {
|
|
if (this.props.onChildClick) {
|
|
return this.props.onChildClick(...args);
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
_onChildMouseDown = (hoverKey, childProps) => {
|
|
this.childMouseDownArgs_ = [hoverKey, childProps];
|
|
if (this.props.onChildMouseDown) {
|
|
this.props.onChildMouseDown(hoverKey, childProps, { ...this.mouse_ });
|
|
}
|
|
};
|
|
|
|
// this method works only if this.props.onChildMouseDown was called
|
|
_onChildMouseUp = () => {
|
|
if (this.childMouseDownArgs_) {
|
|
if (this.props.onChildMouseUp) {
|
|
this.props.onChildMouseUp(...this.childMouseDownArgs_, {
|
|
...this.mouse_,
|
|
});
|
|
}
|
|
this.childMouseDownArgs_ = null;
|
|
this.childMouseUpTime_ = new Date().getTime();
|
|
}
|
|
};
|
|
|
|
// this method works only if this.props.onChildMouseDown was called
|
|
_onChildMouseMove = () => {
|
|
if (this.childMouseDownArgs_) {
|
|
if (this.props.onChildMouseMove) {
|
|
this.props.onChildMouseMove(...this.childMouseDownArgs_, {
|
|
...this.mouse_,
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
_onChildMouseEnter = (...args) => {
|
|
if (this.props.onChildMouseEnter) {
|
|
return this.props.onChildMouseEnter(...args);
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
_onChildMouseLeave = (...args) => {
|
|
if (this.props.onChildMouseLeave) {
|
|
return this.props.onChildMouseLeave(...args);
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
_setViewSize = () => {
|
|
if (!this.mounted_) return;
|
|
if (isFullScreen()) {
|
|
this.geoService_.setViewSize(window.innerWidth, window.innerHeight);
|
|
} else {
|
|
const mapDom = ReactDOM.findDOMNode(this.googleMapDom_);
|
|
this.geoService_.setViewSize(mapDom.clientWidth, mapDom.clientHeight);
|
|
}
|
|
this._onBoundsChanged();
|
|
};
|
|
|
|
_onWindowResize = () => {
|
|
this.resetSizeOnIdle_ = true;
|
|
};
|
|
|
|
_onMapMouseMove = (e) => {
|
|
if (!this.mouseInMap_) return;
|
|
|
|
const currTime = new Date().getTime();
|
|
const K_RECALC_CLIENT_RECT_MS = 50;
|
|
|
|
if (currTime - this.mouseMoveTime_ > K_RECALC_CLIENT_RECT_MS) {
|
|
this.boundingRect_ = e.currentTarget.getBoundingClientRect();
|
|
}
|
|
this.mouseMoveTime_ = currTime;
|
|
|
|
const mousePosX = e.clientX - this.boundingRect_.left;
|
|
const mousePosY = e.clientY - this.boundingRect_.top;
|
|
|
|
if (!this.mouse_) {
|
|
this.mouse_ = { x: 0, y: 0, lat: 0, lng: 0 };
|
|
}
|
|
|
|
this.mouse_.x = mousePosX;
|
|
this.mouse_.y = mousePosY;
|
|
|
|
const latLng = this.geoService_.fromContainerPixelToLatLng(this.mouse_);
|
|
this.mouse_.lat = latLng.lat;
|
|
this.mouse_.lng = latLng.lng;
|
|
|
|
this._onChildMouseMove();
|
|
|
|
if (currTime - this.dragTime_ < K_IDLE_TIMEOUT) {
|
|
this.fireMouseEventOnIdle_ = true;
|
|
} else {
|
|
this.markersDispatcher_.emit('kON_MOUSE_POSITION_CHANGE');
|
|
this.fireMouseEventOnIdle_ = false;
|
|
}
|
|
};
|
|
|
|
// K_IDLE_CLICK_TIMEOUT - looks like 300 is enough
|
|
_onClick = (...args) =>
|
|
this.props.onClick &&
|
|
!this.childMouseDownArgs_ &&
|
|
new Date().getTime() - this.childMouseUpTime_ > K_IDLE_CLICK_TIMEOUT &&
|
|
this.dragTime_ === 0 &&
|
|
this.props.onClick(...args);
|
|
|
|
_onMapClick = (event) => {
|
|
if (this.markersDispatcher_) {
|
|
// support touch events and recalculate mouse position on click
|
|
this._onMapMouseMove(event);
|
|
const currTime = new Date().getTime();
|
|
if (currTime - this.dragTime_ > K_IDLE_TIMEOUT) {
|
|
if (this.mouse_) {
|
|
this._onClick({
|
|
...this.mouse_,
|
|
event,
|
|
});
|
|
}
|
|
|
|
this.markersDispatcher_.emit('kON_CLICK', event);
|
|
}
|
|
}
|
|
};
|
|
|
|
// gmap can't prevent map drag if mousedown event already occured
|
|
// the only workaround I find is prevent mousedown native browser event
|
|
_onMapMouseDownNative = (event) => {
|
|
if (!this.mouseInMap_) return;
|
|
|
|
this._onMapMouseDown(event);
|
|
};
|
|
|
|
_onMapMouseDown = (event) => {
|
|
if (this.markersDispatcher_) {
|
|
const currTime = new Date().getTime();
|
|
if (currTime - this.dragTime_ > K_IDLE_TIMEOUT) {
|
|
// Hovered marker detected at mouse move could be deleted at mouse down time
|
|
// so it will be good to force hovered marker recalculation
|
|
this._onMapMouseMove(event);
|
|
this.markersDispatcher_.emit('kON_MDOWN', event);
|
|
}
|
|
}
|
|
};
|
|
|
|
_onMapMouseDownCapture = () => {
|
|
if (detectBrowser().isChrome) {
|
|
// to fix strange zoom in chrome
|
|
this.zoomControlClickTime_ = new Date().getTime();
|
|
}
|
|
};
|
|
|
|
_onKeyDownCapture = () => {
|
|
if (detectBrowser().isChrome) {
|
|
this.zoomControlClickTime_ = new Date().getTime();
|
|
}
|
|
};
|
|
|
|
_isCenterDefined = (center) =>
|
|
center &&
|
|
((isPlainObject(center) && isNumber(center.lat) && isNumber(center.lng)) ||
|
|
(center.length === 2 && isNumber(center[0]) && isNumber(center[1])));
|
|
|
|
_onBoundsChanged = (map, maps, callExtBoundsChange) => {
|
|
if (map) {
|
|
const gmC = map.getCenter();
|
|
this.geoService_.setView([gmC.lat(), gmC.lng()], map.getZoom(), 0);
|
|
}
|
|
|
|
if (
|
|
(this.props.onChange || this.props.onBoundsChange) &&
|
|
this.geoService_.canProject()
|
|
) {
|
|
const zoom = this.geoService_.getZoom();
|
|
const bounds = this.geoService_.getBounds();
|
|
const centerLatLng = this.geoService_.getCenter();
|
|
|
|
if (!isArraysEqualEps(bounds, this.prevBounds_, kEPS)) {
|
|
if (callExtBoundsChange !== false) {
|
|
const marginBounds = this.geoService_.getBounds(this.props.margin);
|
|
if (this.props.onBoundsChange) {
|
|
this.props.onBoundsChange(
|
|
this.centerIsObject_
|
|
? { ...centerLatLng }
|
|
: [centerLatLng.lat, centerLatLng.lng],
|
|
zoom,
|
|
bounds,
|
|
marginBounds
|
|
);
|
|
}
|
|
|
|
if (this.props.onChange) {
|
|
this.props.onChange({
|
|
center: { ...centerLatLng },
|
|
zoom,
|
|
bounds: {
|
|
nw: {
|
|
lat: bounds[0],
|
|
lng: bounds[1],
|
|
},
|
|
se: {
|
|
lat: bounds[2],
|
|
lng: bounds[3],
|
|
},
|
|
sw: {
|
|
lat: bounds[4],
|
|
lng: bounds[5],
|
|
},
|
|
ne: {
|
|
lat: bounds[6],
|
|
lng: bounds[7],
|
|
},
|
|
},
|
|
marginBounds: {
|
|
nw: {
|
|
lat: marginBounds[0],
|
|
lng: marginBounds[1],
|
|
},
|
|
se: {
|
|
lat: marginBounds[2],
|
|
lng: marginBounds[3],
|
|
},
|
|
sw: {
|
|
lat: marginBounds[4],
|
|
lng: marginBounds[5],
|
|
},
|
|
ne: {
|
|
lat: marginBounds[6],
|
|
lng: marginBounds[7],
|
|
},
|
|
},
|
|
|
|
size: this.geoService_.hasSize()
|
|
? {
|
|
width: this.geoService_.getWidth(),
|
|
height: this.geoService_.getHeight(),
|
|
}
|
|
: {
|
|
width: 0,
|
|
height: 0,
|
|
},
|
|
});
|
|
}
|
|
|
|
this.prevBounds_ = bounds;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
_registerChild = (ref) => {
|
|
this.googleMapDom_ = ref;
|
|
};
|
|
|
|
render() {
|
|
const overlay = this.state.overlay;
|
|
const mapMarkerPrerender = !overlay ? (
|
|
<GoogleMapMarkersPrerender
|
|
experimental={this.props.experimental}
|
|
onChildClick={this._onChildClick}
|
|
onChildMouseDown={this._onChildMouseDown}
|
|
onChildMouseEnter={this._onChildMouseEnter}
|
|
onChildMouseLeave={this._onChildMouseLeave}
|
|
geoService={this.geoService_}
|
|
insideMapPanes={false}
|
|
distanceToMouse={this.props.distanceToMouse}
|
|
getHoverDistance={this._getHoverDistance}
|
|
dispatcher={this.markersDispatcher_}
|
|
/>
|
|
) : null;
|
|
|
|
return (
|
|
<div
|
|
style={this.props.style}
|
|
onMouseMove={this._onMapMouseMove}
|
|
onMouseDownCapture={this._onMapMouseDownCapture}
|
|
onClick={this._onMapClick}
|
|
>
|
|
<GoogleMapMap registerChild={this._registerChild} />
|
|
{IS_REACT_16 && overlay && createPortal(this._renderPortal(), overlay)}
|
|
|
|
{/* render markers before map load done */}
|
|
{mapMarkerPrerender}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default GoogleMap;
|