How to use google-map-react - 10 common examples
To help you get started, we’ve selected a few google-map-react examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
deens-com / frontend / src / libs / location.js View on Github 
const fitBoundsFixed = (bounds, ...args) => {
// https://github.com/google-map-react/google-map-react/issues/207
const { center, zoom } = fitBounds(bounds, ...args);
if (zoom === 0) {
const newBounds = bounds;
newBounds.sw.lat += 0.0000001;
newBounds.sw.lng -= 0.0000001;
const fixedData = fitBounds(newBounds, ...args);
return { center: fixedData.center, zoom: 14 };
}
return { center, zoom };
};const fitBoundsFixed = (bounds, ...args) => {
// https://github.com/google-map-react/google-map-react/issues/207
const { center, zoom } = fitBounds(bounds, ...args);
if (zoom === 0) {
const newBounds = bounds;
newBounds.sw.lat += 0.0000001;
newBounds.sw.lng -= 0.0000001;
const fixedData = fitBounds(newBounds, ...args);
return { center: fixedData.center, zoom: 14 };
}
return { center, zoom };
};render() {
const size = {
width: 320, // map width in pixels
height: 400, // map height in pixels
};
const {center, zoom} = fitBounds(bounds, size);
return (
<div style="{{height:">
</div>centerPosDelta.latitudeDelta += COLLAPSE_LAT_DELTA_PADDING;
centerPosDelta.longitudeDelta += COLLAPSE_LNG_DELTA_PADDING;
}
const bounds = {
nw: {
lat: centerPos.latitude + centerPosDelta.latitudeDelta,
lng: centerPos.longitude - centerPosDelta.longitudeDelta
},
se: {
lat: centerPos.latitude - centerPosDelta.latitudeDelta,
lng: centerPos.longitude + centerPosDelta.longitudeDelta
}
};
const bound = fitBounds(bounds, { width, height });
this.setState({
center: bound.center,
zoom: bound.zoom + 1
});
}
}getCenterAndZoom = markers => {
if (!markers.length) return;
if (markers.length === 1) {
const center = { lat: markers[0].latitude, lng: markers[0].longitude };
return { center, zoom: 11 };
}
const bounds = new window.google.maps.LatLngBounds();
for (const marker of markers) {
bounds.extend(new window.google.maps.LatLng(marker.latitude, marker.longitude));
}
const newBounds = {
ne: { lat: bounds.getNorthEast().lat(), lng: bounds.getNorthEast().lng() },
sw: { lat: bounds.getSouthWest().lat(), lng: bounds.getSouthWest().lng() },
};
const size = { width: 800, height: 450 };
const { center, zoom } = fitBounds(newBounds, size);
return { center, zoom };
};getCenterAndZoom = markers => {
if (!markers.length) return;
if (markers.length === 1) {
const center = { lat: markers[0].latitude, lng: markers[0].longitude };
return { center, zoom: 11 };
}
const bounds = new window.google.maps.LatLngBounds();
for (const marker of markers) {
bounds.extend(new window.google.maps.LatLng(marker.latitude, marker.longitude));
}
const newBounds = {
ne: { lat: bounds.getNorthEast().lat(), lng: bounds.getNorthEast().lng() },
sw: { lat: bounds.getSouthWest().lat(), lng: bounds.getSouthWest().lng() },
};
const size = { width: 800, height: 450 };
const { center, zoom } = fitBounds(newBounds, size);
return { center, zoom };
}; loadComponent(() => require.ensure([], require => require('google-map-react').default, 'map')).then((map) => {
GoogleMap = map; loadComponent(() => require.ensure([], require => require('google-map-react').default, 'map')).then((map) => {
GoogleMap = map;import React from "react";
import PropTypes from "prop-types";
import { ShallowComponent, Application } from "robe-react-commons";
import Googlemap from "google-map-react";
import SearchBox from "./SearchBox";
import Col from "react-bootstrap/lib/Col";
import "./GoogleMap.css";
export default class GoogleMap extends ShallowComponent {
static propTypes: Map = {
...Googlemap.PropTypes,
searchBox: PropTypes.object
};
static defaultProps = {
...Googlemap.defaultProps,
language: Application.i18n(GoogleMap, "googlemap.GoogleMap", "language")
};
render(): Object {
let newProps = { ...this.props };
if (!newProps.bootstrapURLKeys.language) {
newProps.bootstrapURLKeys.language = this.props.language;
}
return (<span>
{this.__renderSearchBox()}
</span>import PropTypes from "prop-types";
import { ShallowComponent, Application } from "robe-react-commons";
import Googlemap from "google-map-react";
import SearchBox from "./SearchBox";
import Col from "react-bootstrap/lib/Col";
import "./GoogleMap.css";
export default class GoogleMap extends ShallowComponent {
static propTypes: Map = {
...Googlemap.PropTypes,
searchBox: PropTypes.object
};
static defaultProps = {
...Googlemap.defaultProps,
language: Application.i18n(GoogleMap, "googlemap.GoogleMap", "language")
};
render(): Object {
let newProps = { ...this.props };
if (!newProps.bootstrapURLKeys.language) {
newProps.bootstrapURLKeys.language = this.props.language;
}
return (<span>
{this.__renderSearchBox()}
</span>);
}
__renderSearchBox(): Object {
if (this.props.searchBox && this.props.searchBox.apiParams && this.props.bootstrapURLKeys.libraries) {google-map-react
Isomorphic component that allows rendering react components on a google map
