I need to make have a custom google map embedded inside a React app. I also need to be able to track location of the user and mark the location on the embedded map in React app. As I understand it, I will have to use google-map-react library and I understand how to have a map going with longitude and latitude data, but I am not sure how to have a "custom" map in place of the normal map? I guess I can have mark a position like so:
<Wrapper apiKey={"API_KEY"}>
<Map center={center} zoom={zoom}>
<Marker position={position} />
</Map>
</Wrapper>
and I am guessing I can get the longitude and latitude like so:
const getLocation = () => {
if (!navigator.geolocation) {
setStatus('Geolocation is not supported by your browser');
} else {
setStatus('Locating...');
navigator.geolocation.getCurrentPosition((position) => {
setStatus(null);
setLat(position.coords.latitude);
setLng(position.coords.longitude);
}, () => {
setStatus('Unable to retrieve your location');
});
}
}
Please give your opinions on if I do this any smarter than this and how to get a custom map instead of a standard Google Map.