Skip to content

Latest commit

 

History

History
227 lines (156 loc) · 5.32 KB

GoogleMapsProvider.md

File metadata and controls

227 lines (156 loc) · 5.32 KB

GoogleMapsProvider Component

The GoogleMapsProvider is a component to wrap around the code where the map should be available.

<GoogleMapsProvider googleMapsAPIKey="YOUR API KEY HERE">
  {children}
</GoogleMapsProvider>

Properties

Properties that can be passed to the GoogleMapsProvider that are either the container to hold the map instance or Maps JavaScript API URL Parameters.

interface GoogleMapsProviderProps {
  googleMapsAPIKey: string;
  mapContainer?: HTMLElement | null;
  mapOptions?: google.maps.MapOptions;
  libraries?: string[];
  language?: string;
  region?: string;
  version?: string;
  authReferrerPolicy?: string;
  onLoadScript?: () => void;
  onLoadMap?: (map: google.maps.Map) => void;
}

NOTE: If you want to implement multiple maps in your application you can use multiple GoogleMapsProvider components to do so, but you have to pass the same Google Maps API parameters (googleMapsAPIKey, libraries, language, region, version and authReferrerPolicy) to all GoogleMapsProvider components.

googleMapsAPIKey (compulsory property)

The Google Maps JavaScript API Key.

googleMapsAPIKey: string;

See: Use API Key

mapContainer (optional property)

A reference to the HTML element that displays the map. Usually we do this by adding a div element. Without the mapContainer provided, no visual map will be displayed.

mapContainer?: HTMLElement | null;

Example:

The mapContainer will be passed to the GoogleMapsProvider in the following way:

function App() {
  const [mapContainer, setMapContainer] = useState(null);
  const mapRef = useCallback(node => {
    node && setMapContainer(node);
  }, []);

  return (
    <GoogleMapsProvider
      googleMapsAPIKey="YOUR API KEY HERE"
      mapContainer={mapContainer}>
      <React.StrictMode>
        <div ref={mapRef} style={{height: '100%'}} />
      </React.StrictMode>
    </GoogleMapsProvider>
  );
}

See: Maps JavaScript API

NOTE: Make sure to give your element a height (by default divs usually have no height), otherwise you won't see the map displayed.

mapOptions (optional property)

The Google Maps MapOptions.

mapOptions?: google.maps.MapOptions;

Example:

const mapOptions = {
  center: {lat: 53.5582447, lng: 9.647645},
  zoom: 6
};

See: MapOptions

NOTE: If the center and zoom options are not provided here, the map will not be displayed until they are set with map.setCenter(latLng) and map.setZoom(zoom).

Example:

MapOptions can also be set or changed later in another component in the following way:

import {useGoogleMap} from '@ubilabs/google-maps-react-hooks';

const mapOptions = {
  center: {lat: 53.5582447, lng: 9.647645},
  zoom: 6,
  disableDefaultUI: true,
  zoomControl: true,
  zoomControlOptions: {
    position: 3 // Right top
  }
};

const map = useGoogleMap();

map?.setOptions(mapOptions);

libraries (optional property)

Additional Google Maps libraries to load ('drawing', 'geometry', 'places' or 'visualization').

libraries?: string[];

See: Libraries

language (optional property)

By default Google Maps will use the preferred language from the browser setting. This is the property to set it manually.

language?: string;

See: Localization

region (optional property)

By default Google Maps will use the preferred region from the browser setting. This is the property to set it manually.

region?: string;

See: Localization

version (optional property)

Use this parameter to specify a Google Maps JavaScript API version.

version?: string;

See: Versions

authReferrerPolicy (optional property)

Use this parameter to set auth_referrer_policy=origin when an URL on the same origin uses the API Key, to limit the amount of data sent when authorizing requests.

authReferrerPolicy?: string;

See: auth_referrer_policy

onLoadScript (optional property)

A callback function that is called, when the Google Maps API is loaded.

onLoadScript?: () => void;

Example:

<GoogleMapsProvider
  googleMapsAPIKey="YOUR API KEY HERE"
  onLoadScript={() => {
    console.log(google.maps);
  }}>
  ...
</GoogleMapsProvider>

onLoadMap (optional property)

A callback function that is called, when the Google Map map is loaded.

onLoadMap?: (map: google.maps.Map) => void;

Example:

<GoogleMapsProvider
  googleMapsAPIKey="YOUR API KEY HERE"
  onLoadMap={map => map.setZoom(4)}>
  ...
</GoogleMapsProvider>