google-maps-current-location

v0.4.0

Published

a month ago

Google maps current location position and marker

Downloads

1,167

0High
0Medium
0Low

margaridafp

google maps current location marker

Google Maps Current Location

Click on your location and display the geographic location of a user or device on a Google map.

Usage

Install the library and add it to your code:

npm install google-maps-current-location

import 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>

Props

addCurrentLocation(map, options)

Required

map represents a google.maps.Map.
Check out how to configure it here.

Optional

options is an object with the following elements:

buttonStyle: object
markerStyle: object
showAccuracyRadius: boolean
watchPositionFn: function

1. buttonStyle

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

2. markerStyle

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

3. showAccuracyRadius

If true, a shape that grows with position accuracy is showed.
Default value is true.

4. watchPositionFn

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.

Examples

Basic

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>

Button and Marker Style


addCurrentLocation(map, {
  buttonStyle: {
    buttonPosition: google.maps.ControlPosition.TOP_LEFT,
    symbolColor: '#CE1919', // red,
    borderRadius: '50%',
  },
  markerStyle: {
    fillColor: 'green',
    scale: 10,
  }
})

Watch Position Function

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