diff --git a/API.md b/API.md index 48755e5..86a6dc8 100644 --- a/API.md +++ b/API.md @@ -81,7 +81,6 @@ createMapOptions: function (maps) { ``` - See "Custom map options example" in Examples below for a further example. See full options at [Google Maps Javascript API docs](https://developers.google.com/maps/documentation/javascript/controls#ControlOptions) @@ -95,20 +94,19 @@ The `event` prop in args is the outer div onClick event, not the gmap-api 'click Example: -```javascript -_onClick = ({x, y, lat, lng, event}) => console.log(x, y, lat, lng, event) -// ES5 users -function _onClick(obj){ console.log(obj.x, obj.y, obj.lat, obj.lng, obj.event);} + ```javascript + _onClick = ({x, y, lat, lng, event}) => console.log(x, y, lat, lng, event) + // ES5 users + function _onClick(obj){ console.log(obj.x, obj.y, obj.lat, obj.lng, obj.event);} - -``` + + ``` #### onBoundsChange (func) (_Deprecated use onChange_) ``` ({ center, zoom, bounds, marginBounds }) ``` - ``` [lat, lng] = center; [topLat, leftLng, bottomLat, rightLng] = bounds; @@ -133,7 +131,6 @@ Default: false #### onZoomAnimationEnd (func) #### onMapTypeIdChange (func) - When the user changes the map type (HYBRID, ROADMAP, SATELLITE, TERRAIN) this fires #### distanceToMouse (func) @@ -141,21 +138,22 @@ When the user changes the map type (HYBRID, ROADMAP, SATELLITE, TERRAIN) this fi #### googleMapLoader (func) #### onGoogleApiLoaded (func) - -Directly access the maps API - _use at your own risk!_ +Directly access the maps API - *use at your own risk!* #### onTilesLoaded (func) This function is called when the visible tiles have finished loading. ```javascript - console.log(map, maps)} /> + console.log(map, maps)} /> ``` To prevent warning message add _yesIWantToUseGoogleMapApiInternals_ property to GoogleMap ```javascript - console.log(map, maps)} yesIWantToUseGoogleMapApiInternals /> -``` + console.log(map, maps)} + yesIWantToUseGoogleMapApiInternals + /> + ``` #### overlayViewDivStyle (object) @@ -166,19 +164,15 @@ Add custom style to `div` (marker container element) created by OverlayView, for ### parameters #### lat (number) - Latitude to place the marker component #### lng (number) - Longitude to place the marker component #### $hover (bool) [automatic] - GoogleMap passes a $hover prop to hovered components. To detect hover it an uses internal mechanism, explained in x_distance_hover example Example: - ```javascript render() { const style = this.props.$hover ? greatPlaceStyleHover : greatPlaceStyle; @@ -189,13 +183,13 @@ render() { ); } -``` + ``` + ## Utility functions #### fitBounds (func) - -Use fitBounds to get zoom and center. + Use fitBounds to get zoom and center. Example: @@ -228,10 +222,10 @@ const bounds = { const size = { width: 640, // Map width in pixels - height: 380 // Map height in pixels + height: 380, // Map height in pixels }; -const { center, zoom } = fitBounds(bounds, size); +const {center, zoom} = fitBounds(bounds, size); ``` #### tile2LatLng (func) @@ -291,15 +285,15 @@ export default class SearchBox extends React.Component { static propTypes = { placeholder: React.PropTypes.string, onPlacesChanged: React.PropTypes.func - }; + } render() { - return ; + return ; } onPlacesChanged = () => { if (this.props.onPlacesChanged) { this.props.onPlacesChanged(this.searchBox.getPlaces()); } - }; + } componentDidMount() { var input = ReactDOM.findDOMNode(this.refs.input); this.searchBox = new google.maps.places.SearchBox(input); @@ -321,14 +315,14 @@ and if so, uses it, so it won't load a second copy of the library. ### Override the default minimum zoom -_WARNING_: Setting this option can break markers calculation, causing no homeomorphism between screen coordinates and map. +*WARNING*: Setting this option can break markers calculation, causing no homeomorphism between screen coordinates and map. You can use the `minZoom` custom option to prevent our minimum-zoom calculation: ```javascript function createMapOptions() { return { - minZoom: 2 + minZoom: 2, }; } ``` @@ -343,7 +337,7 @@ To resolve this ambigiuity, you can use the custom map option `gestureHandling` function createMapOptions() { return { gestureHandling: 'greedy' // Will capture all touch events on the map towards map panning - }; + } } ``` @@ -359,41 +353,20 @@ For enabling heatmap layer, just add `heatmapLibrary={true}` and provide data fo ```javascript - {markers} - + bootstrapURLKeys={{ key: [YOUR_KEY] }} + zoom={zoom} + center={center} + heatmapLibrary={true} + heatmap={{data}} + > + {markers} + ``` -#### Update heatmap during runtime - -The heatmap can be updated with new positions or with new settings (radius, zoom, ...) during the lifecycle of the `GoogleMapReact` component. This can be done by setting the prop `updateHeatmap` to true. Which will let the heatmap know it has to rerender itself. - #### Important Note If you have multiple `GoogleMapReact` components in project and you want to use heatmap layer so provide `heatmapLibrary={true}` for all `GoogleMapReact` components so component will load heatmap library at the beginning with google map api. -### Other libraries - -Some features of the Google Map Api are available through _libraries_, which are not loaded by default. Offering those components as optional libraries allow the main api to load quickly. - -In order to use one of the optional libraries, specify one of the following props in the `GoogleMapReact` component. Multiple libraries can be specified at the time. - -**Drawing library:** `drawingLibrary={true}` - -**Geometry library:** `geometryLibrary={true}` - -**Heatmap library:** `heatmapLibrary={true}` - -See [Google documentation](https://developers.google.com/maps/documentation/javascript/libraries) for more info about those libraries. - -The library can be used after setting the prop `onGoogleApiLoaded`, which allows to directly access the maps API - _use at your own risk!_ -The library is than accessable through the `google.maps.{libraryName}` namespace. - ### Localizing the Map This is done by setting bootstrapURLKeys.[language](https://developers.google.com/maps/documentation/javascript/localization#Language) and bootstrapURLKeys.[region](https://developers.google.com/maps/documentation/javascript/localization#Region). Also notice that setting region to 'cn' is required when using the map from within China, see [google documentation](https://developers.google.com/maps/documentation/javascript/localization#GoogleMapsChina) for more info. Setting 'cn' will result in use of the specific API URL for China. diff --git a/src/google_map.js b/src/google_map.js index 7442d55..ab8db39 100644 --- a/src/google_map.js +++ b/src/google_map.js @@ -155,12 +155,7 @@ export default class GoogleMap extends Component { }, layerTypes: [], heatmap: {}, - libraries: { - visualization: false, - geometry: false, - places: false, - drawing: false, - }, + heatmapLibrary: false, }; static googleMapLoader = googleMapLoader; // eslint-disable-line @@ -271,14 +266,8 @@ export default class GoogleMap extends Component { ...(this.props.apiKey && { key: this.props.apiKey }), ...this.props.bootstrapURLKeys, }; - const libraries = { - visualization: this.props.heatmapLibrary, - geometry: this.props.geometryLibrary, - places: this.props.placesLibrary, - drawing: this.props.drawingLibrary, - }; - this.props.googleMapLoader(bootstrapURLKeys, libraries); - // we can start load immediatly + + this.props.googleMapLoader(bootstrapURLKeys, this.props.heatmapLibrary); // we can start load immediatly setTimeout( () => { @@ -314,10 +303,6 @@ export default class GoogleMap extends Component { } } - if (nextProps.updateHeatmap) { - setTimeout(() => optionsHeatmap(this.heatmap, nextProps.heatmap)); - } - if ( !this._isCenterDefined(this.props.center) && this._isCenterDefined(nextProps.center) @@ -515,14 +500,9 @@ export default class GoogleMap extends Component { ...(this.props.apiKey && { key: this.props.apiKey }), ...this.props.bootstrapURLKeys, }; - const libraries = { - visualization: this.props.heatmapLibrary, - geometry: this.props.geometryLibrary, - places: this.props.placesLibrary, - drawing: this.props.drawingLibrary, - }; + this.props - .googleMapLoader(bootstrapURLKeys, libraries) + .googleMapLoader(bootstrapURLKeys, this.props.heatmapLibrary) .then(maps => { if (!this.mounted_) { return; diff --git a/src/loaders/google_map_loader.js b/src/loaders/google_map_loader.js index 3c9c751..ce29d73 100644 --- a/src/loaders/google_map_loader.js +++ b/src/loaders/google_map_loader.js @@ -20,7 +20,7 @@ const _customPromise = new Promise(resolve => { }); // TODO add libraries language and other map options -export default (bootstrapURLKeys, libraries) => { +export default (bootstrapURLKeys, heatmapLibrary) => { if (!$script_) { $script_ = require('scriptjs'); // eslint-disable-line } @@ -71,20 +71,10 @@ export default (bootstrapURLKeys, libraries) => { ); const baseUrl = getUrl(bootstrapURLKeys.region); - const librariesUrl = Object.keys(libraries) - .reduce( - (libraryUrl, libraryKey) => { - if (libraries[libraryKey]) { - return `${libraryUrl}${libraryKey},`; - } - return libraryUrl; - }, - '&libraries=' - ) - .slice(0, -1); + const libraries = heatmapLibrary ? '&libraries=visualization' : ''; $script_( - `${baseUrl}${API_PATH}${params}${librariesUrl}`, + `${baseUrl}${API_PATH}${params}${libraries}`, () => typeof window.google === 'undefined' && reject(new Error('google map initialization error (not loaded)'))