Click on your location and display the geographic location of a user or device on a Google map.
Install the library and add it to your code:
npm install google-maps-current-locationimport addCurrentLocation from 'google-maps-current-location'
// ...
addCurrentLocation(map)or add it directly to your .html file using unpkg:
<script src="https://unpkg.com/google-maps-current-location"></script>
<script>
// ...
addCurrentLocation(map)
</script>addCurrentLocation(map, options)map represents a google.maps.Map.
Check out how to configure it here.
options is an object with the following elements:
- buttonStyle: object
- markerStyle: object
- showAccuracyRadius: boolean
- watchPositionFn: function
Configures the css and positioning of the button displayed over the map.
| Prop | Type | Description | Default |
|---|---|---|---|
buttonPosition |
google.maps.ControlPosition | Position of button in relation with map. Check here to find out more. | google.maps.ControlPosition.RIGHT_BOTTOM |
mainMargin |
string | The button's margin | 10px |
backgroundColor |
string | The button's background color. All CSS3 colors are supported | #fff |
symbolColor |
string | The symbol's fill color. Only HEX color supported | #6F6F6F |
border |
string | The button's border | 0px |
borderRadius |
string | The button's border radius | 0px |
outline |
string | The button's outline | 0px |
height |
string | The button's height (height===width) | 40px |
boxShadow |
string | The button's boxShadow | 0 1px 4px rgba(0,0,0,0.3) |
cursor |
string | Mouse cursor type to show on hover | pointer |
Configures the css of the marker displayed over the map, on the current location coordinates. To learn more about google.maps.marker.AdvancedMarkerElement click here.
| Prop | Type | Description | Default |
|---|---|---|---|
clickable |
boolean | If true, the marker receives mouse and touch events | false |
draggable |
boolean | If true, the marker can be dragged | false |
fillColor |
string | The symbol's fill color. All CSS3 colors are supported except for extended named colors | #4A89F3 |
scale |
number | The width and height of the marker | 12 |
strokeWeight |
number | The symbol's stroke weight | 2 |
strokeColor |
string | The symbol's stroke color. All CSS3 colors are supported except for extended named colors | white |
If true, a shape that grows with position accuracy is showed.
Default value is true.
Set up a watch for location changes. This function returns a number or Promise<number> to represent an integer ID that identifies the registered handler.
Default function uses navigator.geolocation.watchPosition.
| Prop | Description |
|---|---|
successCallback |
Required. A callback function that takes a GeolocationPosition object as an input parameter. |
errorCallback |
Optional. An optional callback function that takes a GeolocationPositionError object as an input parameter. |
options |
Optional. An optional PositionOptions object that provides configuration options for the location watch. |
React:
import React from 'react';
import addCurrentLocation from 'google-maps-current-location'
export default function App() {
React.useEffect(()=>{
const mapEl = document.getElementById('map');
if (!mapEl) {
throw new Error('Cannot get map element');
}
const map = new google.maps.Map(mapEl, {
center: new google.maps.LatLng(41.1493987, -8.1900724),
zoom: 12,
disableDefaultUI: true,
});
addCurrentLocation(map)
}, []);
return (
<div className="App">
<div id="map" />
</div>
);
}Html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY&callback=initMap&libraries=&v=weekly&lng=en"></script>
<script src="https://unpkg.com/google-maps-current-location"></script>
<script>
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
disableDefaultUI: true,
});
addCurrentLocation(map)
}
</script>
</head>
<body>
<div id="map" style="height:500px; width:500px"></div>
</body>
</html>addCurrentLocation(map, {
buttonStyle: {
buttonPosition: google.maps.ControlPosition.TOP_LEFT,
symbolColor: '#CE1919', // red,
borderRadius: '50%',
},
markerStyle: {
fillColor: 'green',
scale: 10,
}
})
This example implements the Capacitor Geolocation Plugin.
import {Geolocation} from '@capacitor/geolocation';
import addCurrentLocation from 'google-maps-current-location'
// ...
const watchPositionFn = async (updatePos, setError) => {
return await Geolocation.watchPosition({enableHighAccuracy: true}, (pos, err) => {
if (err) {
setError(err);
return;
}
updatePos(pos);
});
}
addCurrentLocation(map, {
watchPositionFn
})