GMap

GMap component provides integration with Google Maps API. This sample demontrates various uses cases like binding, overlays and events. Click the map to add a new item.

Import via Module


import { GMap } from 'primereact/gmap';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/gmap/gmap.min.js"></script>

Getting Started

A map is initialized with options and dimensions. Refer to the google maps api for the list of available options.


const options = {
    center: {lat: 36.890257, lng: 30.707417},
    zoom: 12
};

return (
    <GMap options={options} style={{width: '100%', minHeight: '320px'}} />
)

TypeScript

If you are using TypeScript you should install the Google Maps types.


// npm install types into devDependencies
npm i -D @types/google.maps

// yarn install types into devDependencies
yarn add @types/google.maps --production=false

Overlays

GMap can display any type of overlay such as markers, polygons and circles. Overlay instances are bound using the overlays property array. Overlays are aware of binding so whenever the array changes, gmap updates itself.


const options = {
    center: {lat: 36.890257, lng: 30.707417},
    zoom: 12
};

const overlays = [
            new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
            new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
            new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
            new google.maps.Polygon({paths: [
                {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
            ], strokeOpacity: 0.5, strokeWeight: 1, fillColor: '#1976D2', fillOpacity: 0.35
            }),
            new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
            new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
        ];

return (
    <GMap overlays={overlays} options={options} style={{width: '100%', minHeight: '320px'}} />
)

Events

GMap provides common callbacks to hook into events including map click, overlay click and overlay dragging.


const onMapClick = (event) => {
    //event: MouseEvent of Google Maps api
}

const onMapReady = (map) => {
    //map: Map instance
}

const options = {
    center: {lat: 36.890257, lng: 30.707417},
    zoom: 12
};

let overlays = [
            new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
            new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
            new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
            new google.maps.Polygon({paths: [
                {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
            ], strokeOpacity: 0.5, strokeWeight: 1, fillColor: '#1976D2', fillOpacity: 0.35
            }),
            new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
            new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
        ]

return (
    <GMap overlays={overlays} options={options} style={{width: '100%', minHeight: '320px'}} onMapReady={onMapReady} onMapClick={onMapClick} />
)

Google Maps API

In case you need to access the map instance directly, use the getMap() method. In the following example, this.gmap.getMap() will provide the map instance. Alternative is using onMapReady event as it passes the map instance as a parameter.


const options = {
    center: {lat: 36.890257, lng: 30.707417},
    zoom: 12
};

return (
    <GMap ref={gmap} options={options} style={{width: '100%', minHeight: '320px'}} />
)

Properties

Name	Type	Default	Description
options	object	null	Google Maps API configuration object.
overlays	array	null	An array of overlays to display.
style	string	null	Inline style of the component.
className	string	null	Style class of the component.

Events

Name	Parameters	Description
onMapClick	event: Google Maps MouseEvent	Callback to invoke when map is clicked except markers.
onMapDragEnd	-	Callback to invoke when map drag (i.e. pan) has ended.
onMapReady	event.map: Google Maps Instance	Callback to invoke when the map is ready to be used.
onOverlayClick	originalEvent: Google Maps MouseEvent overlay: Clicked overlay map: Map instance	Callback to invoke when an overlay is clicked.
onOverlayDragStart	event: Google Maps MouseEvent	Callback to invoke when an overlay drag starts.
onOverlayDrag	event: Google Maps MouseEvent	Callback to invoke when an overlay is being dragged.
onOverlayDragEnd	event: Google Maps MouseEvent	Callback to invoke when an overlay drag ends.
onZoomChanged	-	Callback to invoke when zoom level has changed.