import GoogleMap from '@orloxx/ui-core/src/views/google-map/google-map.view.js'

public class | source

GoogleMap

Extends:

react~Component → GoogleMap

Controls a map initialised with the Google Maps JavaScript API

SCSS import:

@import "~@orloxx/ui-core/scss/google-map";

See:

https://developers.google.com/maps/documentation/javascript/tutorial

Example:

const mapOptions = { center: { lat: 10.4657, lng: -66.8796 }, zoom: 10 };
const onMapReady = (map) => {
  // Handles map
};

<GoogleMap
  apiKey='your-google-api-key'
  options={mapOptions}
  onInit={map => onMapReady(map)} />

Static Member Summary

Static Public Members
public static	propTypes: Object

Static Public Members

public static propTypes: Object source

Properties:

Name	Type	Attribute	Description
apiKey	String		Google provides this in their console
options	google~MapOptions		Options passed when map is initialised
onInit	Function	optional	Triggers when the map is ready and rendered
onBoundsChanged	Function	optional	Triggers when the viewport bounds have changed.
onCenterChanged	Function	optional	Triggers when the map center property changes.
onClick	Function	optional	Triggers when the user clicks on the map. An ApiMouseEvent with properties for the clicked location is returned unless a place icon was clicked, in which case an IconMouseEvent with a placeid is returned. IconMouseEvent and ApiMouseEvent are identical, except that IconMouseEvent has the placeid field. The event can always be treated as an ApiMouseEvent when the placeid is not important. The click event is not fired if a marker or infowindow was clicked.
onDoubleClick	Function	optional	Triggers when the user double-clicks on the map. Note that the click event will also fire, right before this one.
onDrag	Function	optional	This event is repeatedly fired while the user drags the map.
onDragEnd	Function	optional	Triggers when the user stops dragging the map.
onDragStart	Function	optional	Triggers when the user starts dragging the map.
onHeadingChanged	Function	optional	Triggers when the map heading property changes.
onIdle	Function	optional	Triggers when the map becomes idle after panning or zooming.
onMapTypeIdChanged	Function	optional	Triggers when the mapTypeId property changes.
onMouseMove	Function	optional	Triggers whenever the user's mouse moves over the map container.
onMouseOut	Function	optional	Triggers when the user's mouse exits the map container.
OnMouseOver	Function	optional	Triggers when the user's mouse enters the map container.
onProjectionChanged	Function	optional	Triggers when the projection has changed.
onRightClick	Function	optional	Triggers when the DOM contextmenu event is fired on the map container.
onTilesLoaded	Function	optional	Triggers when the visible tiles have finished loading.
onTiltChanged	Function	optional	Triggers when the map tilt property changes.
onZoomChanged	Function	optional	Triggers when the map zoom property changes.