React GMap

React 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.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { GMap } from 'primereact/gmap';

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'}} />
)

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'}} />
)

Theming

GMap supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact GMap showcase for demos and documentation.