47 | {renderers[status] || null}
48 |
49 | )
50 | },
51 | )
52 |
53 | export default GoogleMap
54 |
--------------------------------------------------------------------------------
/src/map/markers.tsx:
--------------------------------------------------------------------------------
1 | import { Children, cloneElement, isValidElement, useMemo } from 'react'
2 | import { MapMarkersProps } from '../utils/types'
3 | import OverlayView from './overlay-view'
4 |
5 | const noop = () => {}
6 |
7 | const MapMarkers = ({ children, map, maps }: MapMarkersProps) => {
8 | const markers = useMemo(() => {
9 | if (!map || !maps) return []
10 |
11 | return Children.map(children, (child) => {
12 | if (isValidElement(child)) {
13 | const latLng = { lat: child.props.lat, lng: child.props.lng } as google.maps.LatLngLiteral
14 | const { zIndex, draggable = false, onDragStart = noop, onDrag = noop, onDragEnd = noop } = child.props || {}
15 |
16 | // clone child without draggable props
17 | // eslint-disable-next-line no-param-reassign
18 | child = cloneElement(child, {
19 | ...child.props,
20 | // draggable: undefined,
21 | onDragStart: undefined,
22 | onDrag: undefined,
23 | onDragEnd: undefined,
24 | })
25 |
26 | return (
27 | {markers}
48 | }
49 |
50 | export default MapMarkers
51 |
--------------------------------------------------------------------------------
/docs/src/components/marker.tsx:
--------------------------------------------------------------------------------
1 | import { LatLngLiteral } from 'google-maps-react-markers'
2 | import React from 'react'
3 |
4 | interface MarkerProps {
5 | className?: string
6 | draggable: boolean
7 | lat: number
8 | lng: number
9 | markerId: string
10 | onClick?: (
11 | e: React.MouseEvent
15 |
58 | )
59 |
60 | export default Info
61 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | root: true,
4 | env: {
5 | browser: true,
6 | es2021: true,
7 | es6: true,
8 | node: true,
9 | },
10 | extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
11 | parser: '@typescript-eslint/parser',
12 | parserOptions: {
13 | ecmaFeatures: {
14 | jsx: true,
15 | },
16 | ecmaVersion: 'latest',
17 | sourceType: 'module',
18 | },
19 | plugins: [
20 | 'react',
21 | '@typescript-eslint',
22 | 'typescript-sort-keys',
23 | 'unused-imports',
24 | 'prettier',
25 | 'prefer-arrow',
26 | 'sort-class-members',
27 | ],
28 | rules: {
29 | '@typescript-eslint/no-unused-vars': 'error',
30 | 'import/extensions': 'off',
31 | 'import/no-extraneous-dependencies': 'off',
32 | 'import/no-unresolved': 'off',
33 | 'import/prefer-default-export': 'off',
34 | 'no-nested-ternary': 'off',
35 | 'no-plusplus': 'off',
36 | 'no-unused-vars': 'off',
37 | 'no-use-before-define': 'off',
38 | 'prettier/prettier': [
39 | 'error',
40 | {
41 | endOfLine: 'auto',
42 | },
43 | ],
44 | 'react/destructuring-assignment': 'off',
45 | 'react/function-component-definition': 'off',
46 | 'react/jsx-filename-extension': 'off',
47 | 'react/jsx-props-no-spreading': 'off',
48 | 'react/react-in-jsx-scope': 'off',
49 | 'react/require-default-props': 'off',
50 | 'typescript-sort-keys/interface': 'error',
51 | 'typescript-sort-keys/string-enum': 'error',
52 | 'unused-imports/no-unused-imports': 'error',
53 | 'prefer-arrow/prefer-arrow-functions': [
54 | 'error',
55 | {
56 | disallowPrototype: true,
57 | singleReturnOnly: true,
58 | classPropertiesAllowed: false,
59 | },
60 | ],
61 | 'sort-class-members/sort-class-members': [
62 | 'error',
63 | {
64 | order: [
65 | '[static-properties]',
66 | '[properties]',
67 | '[conventional-private-properties]',
68 | 'constructor',
69 | '[static-methods]',
70 | '[methods]',
71 | '[conventional-private-methods]',
72 | ],
73 | accessorPairPositioning: 'getThenSet',
74 | },
75 | ],
76 | },
77 | globals: {
78 | globalThis: 'readonly',
79 | google: 'readonly',
80 | },
81 | },
82 | ]
83 |
--------------------------------------------------------------------------------
/docs/src/app/globals.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --max-width: 1100px;
3 | --border-radius: 12px;
4 | --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono',
5 | 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
6 |
7 | --foreground-rgb: 0, 0, 0;
8 | --background-start-rgb: 214, 219, 220;
9 | --background-end-rgb: 255, 255, 255;
10 |
11 | --primary-glow: conic-gradient(
12 | from 180deg at 50% 50%,
13 | #16abff33 0deg,
14 | #0885ff33 55deg,
15 | #54d6ff33 120deg,
16 | #0071ff33 160deg,
17 | transparent 360deg
18 | );
19 | --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
20 |
21 | --tile-start-rgb: 239, 245, 249;
22 | --tile-end-rgb: 228, 232, 233;
23 | --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
24 |
25 | --callout-rgb: 238, 240, 241;
26 | --callout-border-rgb: 172, 175, 176;
27 | --card-rgb: 180, 185, 188;
28 | --card-border-rgb: 131, 134, 135;
29 | --highlight-rgb: 255, 255, 107;
30 | }
31 |
32 | @media (prefers-color-scheme: dark) {
33 | :root {
34 | --foreground-rgb: 255, 255, 255;
35 | --background-start-rgb: 0, 0, 0;
36 | --background-end-rgb: 0, 0, 0;
37 |
38 | --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
39 | --secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3));
40 |
41 | --tile-start-rgb: 2, 13, 46;
42 | --tile-end-rgb: 2, 5, 19;
43 | --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80);
44 |
45 | --callout-rgb: 20, 20, 20;
46 | --callout-border-rgb: 108, 108, 108;
47 | --card-rgb: 100, 100, 100;
48 | --card-border-rgb: 200, 200, 200;
49 | }
50 | }
51 |
52 | * {
53 | box-sizing: border-box;
54 | padding: 0;
55 | margin: 0;
56 | }
57 |
58 | html,
59 | body {
60 | max-width: 100vw;
61 | overflow-x: hidden;
62 | }
63 |
64 | body {
65 | color: rgb(var(--foreground-rgb));
66 | background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
67 | }
68 |
69 | a {
70 | color: inherit;
71 | text-decoration: none;
72 | }
73 |
74 | @media (prefers-color-scheme: dark) {
75 | html {
76 | color-scheme: dark;
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/1.bug_report.yml:
--------------------------------------------------------------------------------
1 | name: Bug Report
2 | description: Create a bug report for Google Maps React Markers
3 | labels: ['template: bug']
4 | body:
5 | - type: markdown
6 | attributes:
7 | value: If you leave out sections there is a high likelihood it will be moved to the GitHub Discussions ["Help" section](https://github.com/giorgiabosello/google-maps-react-markers/discussions/categories/help).
8 | - type: checkboxes
9 | attributes:
10 | label: Verify latest release
11 | description: 'Verify that your issue reproduces in the [latest release](https://github.com/giorgiabosello/google-maps-react-markers/releases) before opening a new issue.'
12 | options:
13 | - label: I verified that the issue exists in the latest release
14 | required: true
15 | - type: dropdown
16 | attributes:
17 | label: I know how to solve the bug
18 | description: If you don't know how to solve the bug, the GitHub repository or the CodeSandbox example is required.
19 | multiple: false
20 | options:
21 | - 'I know how to solve the bug'
22 | - "I don't know how to solve the bug and I will provide an example."
23 | - type: input
24 | attributes:
25 | label: Link to the code that reproduces this issue
26 | description: A link to a GitHub repository or a [CodeSandbox](https://codesandbox.io/) minimal reproduction. You can find a minimal reproduction example [here](https://github.com/giorgiabosello/google-maps-react-markers/tree/master/docs/src) and it should include only changes that contribute to the issue.
27 | validations:
28 | required: true
29 | - type: textarea
30 | attributes:
31 | label: To Reproduce
32 | description: Steps to reproduce the behavior, please provide a clear description of how to reproduce the issue. Screenshots can be provided in the issue body below. If using code blocks, make sure that [syntax highlighting is correct](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting) and double check that the rendered preview is not broken.
33 | validations:
34 | required: true
35 | - type: textarea
36 | attributes:
37 | label: Describe the Bug
38 | description: A clear and concise description of what the bug is.
39 | validations:
40 | required: true
41 | - type: textarea
42 | attributes:
43 | label: Expected Behavior
44 | description: A clear and concise description of what you expected to happen.
45 | validations:
46 | required: true
47 | - type: markdown
48 | attributes:
49 | value: Before posting the issue go through the steps you've written down to make sure the steps provided are detailed and clear.
50 | - type: markdown
51 | attributes:
52 | value: Contributors should be able to follow the steps provided in order to reproduce the bug.
53 | - type: markdown
54 | attributes:
55 | value: These steps are used to add integration tests to ensure the same issue does not happen again. Thanks in advance!
56 | - type: input
57 | attributes:
58 | label: Which browser are you using? (if relevant)
59 | description: 'Please specify the exact version. For example: Chrome 100.0.4878.0'
60 |
--------------------------------------------------------------------------------
/src/map/map.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef, useState } from 'react'
2 | import { EventProps, Map, MapProps, MapsLibrary } from '../utils/types'
3 | import { isArraysEqualEps } from '../utils/utils'
4 | import MapMarkers from './markers'
5 |
6 | function MapComponent({
7 | children = null,
8 | style = {
9 | width: '100%',
10 | height: '100%',
11 | left: 0,
12 | top: 0,
13 | margin: 0,
14 | padding: 0,
15 | position: 'absolute',
16 | },
17 | defaultCenter,
18 | defaultZoom,
19 | onGoogleApiLoaded,
20 | onChange,
21 | options = {},
22 | events = [],
23 | }: MapProps) {
24 | const mapRef = useRef
16 |
43 | {bounds && (
44 |
17 |
25 | 📍 Current markers
18 | {coordinates?.map(({ lat, lng, name }, index) => ( 19 | // eslint-disable-next-line react/no-array-index-key 20 |
21 |
23 | ))}
24 | {`${name} 👉 { lat: ${lat},lng: ${lng} }`}
22 |
26 |
42 | 🖐🏼 Drag
27 |28 | Drag the yellow marker to see its coordinates 29 | change. 30 |
31 | {drag?.dragStart && drag?.dragEnd && ( 32 | <> 33 |Drag start:
34 |{drag.dragStart ? `lat: ${drag.dragStart.lat}, lng: ${drag.dragStart.lng}` : 'null'}
35 |Dragging:
36 |{drag.dragging ? `lat: ${drag.dragging.lat}, lng: ${drag.dragging.lng}` : 'null'}
37 |Drag end:
38 |{drag.dragEnd ? `lat: ${drag.dragEnd.lat}, lng: ${drag.dragEnd.lng}` : 'null'}
39 | 40 | )} 41 |
45 |
56 | )}
57 | 🗺 Map bounds
46 |Map bounds are used to calculate clusters.
47 |Move the map to see the bounds change.
48 |
49 | {bounds?.map((bound: number, index: number) => {
50 | const name = ['SW lng', 'SW lat', 'NE lng', 'NE lat'][index]
51 | // eslint-disable-next-line react/no-array-index-key
52 | return
55 | {`${name}: ${bound}`}
53 | })} 54 |