How to create a blue dot location marker?

[ansoniikun]

Hello. I am pretty new to react and react libraries, as the question states I would like to add/create the blue dot user location marker for my map(with the accuracy radius as well). would appreciate any help

I read and went through a bunch of guides but they don't seem to work with this library. I keep getting error: google.map.symbolPath.Circle is undefined

[usefulthink]

That isn't supported out-of-the box in this library, but we published an implementation of this using just the google maps API here: https://github.com/ubilabs/geolocation-deviceorientation-demo

Most interesting bits for you would probably be the GeolocationService and the GeolocationMarker. The main.ts shows how it all comes together.

Now, if you want to use this in React, you could copy those files and create a wrapper component for the GeolocationMarker, something like this (off the top of my head, untested):

import {GeolocationMarker} from '...';
import {useMap} from '@vis.gl/react-google-maps';

const GeolocationMarker = (props) => {
  const {position, size, heading, accuracy} = props;

  const map = useMap();

  // create geolocation-marker once api is ready
  const geolocationMarker: GeolocationMarker | null = useMemo(
    () => map ? new GeolocationMarker() : null, 
    [map]
  );

  // add/remove marker to/from map
  useEffect(() => {
    if(!geolocationMarker) return;

    geolocationMarker.setMap(map);

    return () => geolocationMarker.setMap(null);
  }, [geolocationMarker, map]);

  // update position, heading, size and accuracy
  useEffect(() => {
    if(!geolocationMarker) return;

    geolocationMarker.position = position;
    geolocationMarker.size = size;
    geolocationMarker.heading = heading;
    geolocationMarker.accuracy = accuracy;
  }, [geolocationMarker, position, size, heading, accuracy]);

  return <></>;
};

As for the geolocation-service, that really depends how your app is organized. You'll want to have that service running outside your app, writing into the state-management you are using. One important thing is that you need to do the permissions-query while handling a trusted event (for example, while handling a click event).

I've also writtin on our blog about this: https://ubilabs.com/en/insights/implement-geolocation-and-compass-heading

[ansoniikun]

thank you

I managed to get what I needed like this

// GeolocationMarker.jsx
import React, { useEffect, useMemo } from "react";
import { useMap } from "@vis.gl/react-google-maps";

const GeolocationMarker = ({ position, accuracy }) => {
  const map = useMap();

  const geolocationMarker = useMemo(() => {
    if (!map) return null;

    const marker = new google.maps.Marker({
      position,
      map,
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: "#4285F4",
        fillOpacity: 1,
        scale: 8,
        strokeColor: "#FFFFFF",
        strokeWeight: 2,
      },
    });

    return { marker };
  }, [map, position]);

  const accuracyCircle = useMemo(() => {
    if (!map || !position) return null;

    return new google.maps.Circle({
      strokeColor: "#4285F4",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#4285F4",
      fillOpacity: 0.35,
      map,
      center: position,
      radius: accuracy,
    });
  }, [map, position, accuracy]);

  useEffect(() => {
    if (geolocationMarker) {
      geolocationMarker.marker.setMap(map);
    }
    if (accuracyCircle) {
      accuracyCircle.setMap(map);
    }

    return () => {
      if (geolocationMarker) {
        geolocationMarker.marker.setMap(null);
      }
      if (accuracyCircle) {
        accuracyCircle.setMap(null);
      }
    };
  }, [geolocationMarker, accuracyCircle, map]);

  return null; 
};

export default GeolocationMarker;

might not be the best but it does the job