Iam traying to add google maps to my angular project but the component keep give me errors from node module when serve in development mode anguler 10

the error log

eclare namespace google.maps {
~~~~~~~
Conflicts are in this file.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:130:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘anchorPoint’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

130 anchorPoint?: Point;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4265:5
4265 anchorPoint?: google.maps.Point|null;
~~~~~~~~~~~
‘anchorPoint’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:135:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘animation’ must be of type ‘Animation | null | undefined’, but here has type ‘Animation | undefined’.

135 animation?: Animation;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4269:5
4269 animation?: google.maps.Animation|null;
~~~~~~~~~
‘animation’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:141:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘clickable’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

141 clickable?: boolean;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4274:5
4274 clickable?: boolean|null;
~~~~~~~~~
‘clickable’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:147:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘crossOnDrag’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

147 crossOnDrag?: boolean;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4284:5
4284 crossOnDrag?: boolean|null;
~~~~~~~~~~~
‘crossOnDrag’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:154:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘cursor’ must be of type ‘string | null | undefined’, but here has type ‘string | undefined’.

154 cursor?: string;
~~~~~~

node_modules/@types/google.maps/index.d.ts:4288:5
4288 cursor?: string|null;
~~~~~~
‘cursor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:160:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘draggable’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

160 draggable?: boolean;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4293:5
4293 draggable?: boolean|null;
~~~~~~~~~
‘draggable’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:167:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘icon’ must be of type ‘string | Icon | Symbol | null | undefined’, but here has type ‘string | Icon | Symbol | undefined’.

167 icon?: string | Icon | google.maps.Symbol;
~~~~

node_modules/@types/google.maps/index.d.ts:4298:5
4298 icon?: string|null|google.maps.Icon|google.maps.Symbol;
~~~~
‘icon’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:173:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘label’ must be of type ‘string | MarkerLabel | null | undefined’, but here has type ‘string | MarkerLabel | undefined’.

173 label?: string | MarkerLabel;
~~~~~

node_modules/@types/google.maps/index.d.ts:4308:5
4308 label?: string|null|google.maps.MarkerLabel;
~~~~~
‘label’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:178:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘map’ must be of type ‘Map | StreetViewPanorama | null | undefined’, but here has type ‘Map | StreetViewPanorama | undefined’.

178 map?: Map | StreetViewPanorama;
~~~

node_modules/@types/google.maps/index.d.ts:4314:5
4314 map?: google.maps.Map|null|google.maps.StreetViewPanorama;
~~~
‘map’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:184:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘opacity’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

184 opacity?: number;
~~~~~~~

node_modules/@types/google.maps/index.d.ts:4318:5
4318 opacity?: number|null;
~~~~~~~
‘opacity’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:192:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘optimized’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

192 optimized?: boolean;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4326:5
4326 optimized?: boolean|null;
~~~~~~~~~
‘optimized’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:198:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘position’ must be of type ‘LatLng | LatLngLiteral | null | undefined’, but here has type ‘LatLng | LatLngLiteral | undefined’.

198 position?: LatLng | LatLngLiteral;
~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4333:5
4333 position?: google.maps.LatLng|null|google.maps.LatLngLiteral;
~~~~~~~~
‘position’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:203:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘shape’ must be of type ‘MarkerShape | null | undefined’, but here has type ‘MarkerShape | undefined’.

203 shape?: MarkerShape;
~~~~~

node_modules/@types/google.maps/index.d.ts:4337:5
4337 shape?: google.maps.MarkerShape|null;
~~~~~
‘shape’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:209:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘title’ must be of type ‘string | null | undefined’, but here has type ‘string | undefined’.

209 title?: string;
~~~~~

node_modules/@types/google.maps/index.d.ts:4344:5
4344 title?: string|null;
~~~~~
‘title’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:215:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘visible’ must be of type ‘boolean | null | undefined’, but here has type ‘boolean | undefined’.

215 visible?: boolean;
~~~~~~~

node_modules/@types/google.maps/index.d.ts:4348:5
4348 visible?: boolean|null;
~~~~~~~
‘visible’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:224:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘zIndex’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

224 zIndex?: number;
~~~~~~

node_modules/@types/google.maps/index.d.ts:4356:5
4356 zIndex?: number|null;
~~~~~~
‘zIndex’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:276:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘anchor’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

276 anchor?: Point;
~~~~~~

node_modules/@types/google.maps/index.d.ts:2388:5
2388 anchor?: google.maps.Point|null;
~~~~~~
‘anchor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:283:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘labelOrigin’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

283 labelOrigin?: Point;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:2394:5
2394 labelOrigin?: google.maps.Point|null;
~~~~~~~~~~~
‘labelOrigin’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:289:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘origin’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

289 origin?: Point;
~~~~~~

node_modules/@types/google.maps/index.d.ts:2399:5
2399 origin?: google.maps.Point|null;
~~~~~~
‘origin’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:295:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘scaledSize’ must be of type ‘Size | null | undefined’, but here has type ‘Size | undefined’.

295 scaledSize?: Size;
~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:2404:5
2404 scaledSize?: google.maps.Size|null;
~~~~~~~~~~
‘scaledSize’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:302:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘size’ must be of type ‘Size | null | undefined’, but here has type ‘Size | undefined’.

302 size?: Size;
~~~~

node_modules/@types/google.maps/index.d.ts:2410:5
2410 size?: google.maps.Size|null;
~~~~
‘size’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:438:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘anchor’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

438 anchor?: Point;
~~~~~~

node_modules/@types/google.maps/index.d.ts:5866:5
5866 anchor?: google.maps.Point|null;
~~~~~~
‘anchor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:446:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘fillColor’ must be of type ‘string | null | undefined’, but here has type ‘string | undefined’.

446 fillColor?: string;
~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5873:5
5873 fillColor?: string|null;
~~~~~~~~~
‘fillColor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:452:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘fillOpacity’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

452 fillOpacity?: number;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5877:5
5877 fillOpacity?: number|null;
~~~~~~~~~~~
‘fillOpacity’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:461:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘labelOrigin’ must be of type ‘Point | null | undefined’, but here has type ‘Point | undefined’.

461 labelOrigin?: Point;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5884:5
5884 labelOrigin?: google.maps.Point|null;
~~~~~~~~~~~
‘labelOrigin’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:477:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘rotation’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

477 rotation?: number;
~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5898:5
5898 rotation?: number|null;
~~~~~~~~
‘rotation’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:486:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘scale’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

486 scale?: number;
~~~~~

node_modules/@types/google.maps/index.d.ts:5906:5
5906 scale?: number|null;
~~~~~
‘scale’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:493:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘strokeColor’ must be of type ‘string | null | undefined’, but here has type ‘string | undefined’.

493 strokeColor?: string;
~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5913:5
5913 strokeColor?: string|null;
~~~~~~~~~~~
‘strokeColor’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:500:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘strokeOpacity’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

500 strokeOpacity?: number;
~~~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5919:5
5919 strokeOpacity?: number|null;
~~~~~~~~~~~~~
‘strokeOpacity’ was also declared here.

Error: node_modules/@types/googlemaps/reference/marker.d.ts:505:9 – error TS2717: Subsequent property declarations must have the same type. Property ‘strokeWeight’ must be of type ‘number | null | undefined’, but here has type ‘number | undefined’.

505 strokeWeight?: number;
~~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:5924:5
5924 strokeWeight?: number|null;
~~~~~~~~~~~~
‘strokeWeight’ was also declared here.

Error: node_modules/@types/googlemaps/reference/max-zoom.d.ts:6:11 – error TS2300: Duplicate identifier ‘MaxZoomService’.

6 class MaxZoomService {
~~~~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4415:9
4415 class MaxZoomService {
~~~~~~~~~~~~~~
‘MaxZoomService’ was also declared here.

Error: node_modules/@types/googlemaps/reference/max-zoom.d.ts:52:10 – error TS2300: Duplicate identifier ‘MaxZoomResult’.

52 type MaxZoomResult = MaxZoomResultError | MaxZoomResultOk;
~~~~~~~~~~~~~

node_modules/@types/google.maps/index.d.ts:4397:13
4397 interface MaxZoomResult {
~~~~~~~~~~~~~
‘MaxZoomResult’ was also declared here.

Error: node_modules/@types/googlemaps/reference/max-zoom.d.ts:65:9 – error TS2300: Duplicate identifier ‘ERROR’.

65 ERROR = ‘ERROR’,
~~~~~

**

package.json

**
},
“private”: true,
“dependencies”: {
“@angular/animations”: “~12.2.0”,
“@angular/cdk”: “^12.2.11”,
“@angular/common”: “~12.2.0”,
“@angular/compiler”: “~12.2.0”,
“@angular/core”: “~12.2.0”,
“@angular/forms”: “~12.2.0”,
“@angular/google-maps”: “^13.0.2”,
“@angular/localize”: “~12.2.0”,
“@angular/material”: “^12.2.11”,
“@angular/platform-browser”: “~12.2.0”,
“@angular/platform-browser-dynamic”: “~12.2.0”,
“@angular/router”: “~12.2.0”,
“@craco/craco”: “^6.3.0”,
“@ng-bootstrap/ng-bootstrap”: “^10.0.0”,
“@swimlane/ngx-datatable”: “^20.0.0”,
“@types/core-js”: “^0.9.39”,
“angular-paginator”: “^7.0.0”,
“bootstrap”: “^5.1.3”,
“ng-bootstrap-table”: “0.0.17”,
“ngx-bootstrap”: “^7.1.0”,
“rxjs”: “~6.6.0”,
“tslib”: “^2.3.0”,
“zone.js”: “~0.11.4”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “^12.2.11”,
“@angular/cli”: “~12.2.11”,
“@angular/compiler-cli”: “~12.2.0”,
“@fortawesome/fontawesome-free”: “^5.15.4”,
“@types/googlemaps”: “^3.39.12”,
“@types/jasmine”: “~3.8.0”,
“@types/node”: “^12.11.1”,
“jasmine-core”: “~3.8.0”,
“karma”: “~6.3.0”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage”: “~2.0.3”,
“karma-jasmine”: “~4.0.0”,
“karma-jasmine-html-reporter”: “~1.7.0”,
“tailwindcss”: “^2.2.17”,
“typescript”: “~4.3.5”
}
tsConig
“baseUrl”: “./”,
“outDir”: “./dist/out-tsc”,
“forceConsistentCasingInFileNames”: true,
“strict”: true,
“noImplicitReturns”: true,
“noFallthroughCasesInSwitch”: true,
“sourceMap”: true,
“declaration”: false,
“downlevelIteration”: true,
“experimentalDecorators”: true,
“moduleResolution”: “node”,
“importHelpers”: true,
“target”: “es2017”,
“module”: “es2020”,
“lib”: [
“es2018”,
“dom”
]
},
“angularCompilerOptions”: {
“enableI18nLegacyMessageIdFormat”: false,
“strictInjectionParameters”: true,
“strictInputAccessModifiers”: true,
“strictTemplates”: true
}

<div  style="height: 200px; width: max-content;">

  <google-map></google-map>
</div>

enter image description here