+
Map 2 (satellite)
{
style={{height:'700px'}}
onChangeLocation={handleChangeLocation}
onChangeZoom={handleChangeZoom}
+ icon={"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"}
apiKey='AIzaSyD07E1VvpsN_0FvsmKAj4nK9GnLq-9jtj8'/>
diff --git a/package.json b/package.json
index 316300d..31ddb89 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
"react": "^17.0.0"
},
"devDependencies": {
+ "@types/google.maps": "^3.53.2",
"@types/jest": "^25.1.4",
"@types/react": "^16.9.27",
"@typescript-eslint/eslint-plugin": "^4.9.1",
diff --git a/src/MapPicker.tsx b/src/MapPicker.tsx
index 41ef917..1ecf18d 100644
--- a/src/MapPicker.tsx
+++ b/src/MapPicker.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
import React, { FC } from 'react';
function isGoogleMapScriptLoaded(id: string): boolean {
@@ -50,7 +51,8 @@ type Props = {
onChangeZoom?(zoom: number): void;
style?: any;
className?: string;
- mapTypeId?: MapTypeId
+ mapTypeId?: MapTypeId;
+ icon: string | google.maps.Icon | google.maps.Symbol | null | undefined; // https://developers.google.com/maps/documentation/javascript/markers#icons
}
function isValidLocation(location: Location) {
@@ -59,7 +61,7 @@ function isValidLocation(location: Location) {
const GOOGLE_SCRIPT_URL = 'https://maps.googleapis.com/maps/api/js?libraries=places&key=';
-const MapPicker: FC
= ({ apiKey, defaultLocation, zoom = 7, onChangeLocation, onChangeZoom, style, className, mapTypeId }) => {
+const MapPicker: FC = ({ apiKey, defaultLocation, zoom = 7, onChangeLocation, onChangeZoom, style, className, mapTypeId, icon }) => {
const MAP_VIEW_ID = 'google-map-view-' + Math.random().toString(36).substr(2, 9);
const map = React.useRef(null);
const marker = React.useRef(null);
@@ -76,10 +78,10 @@ const MapPicker: FC = ({ apiKey, defaultLocation, zoom = 7, onChangeLocat
}
function loadMap() {
- const Google = (window as any).google;
+ const Google = window.google;
const validLocation = isValidLocation(defaultLocation) ? defaultLocation : { lat: 0, lng: 0 };
- map.current = new Google.maps.Map(document.getElementById(MAP_VIEW_ID),
+ map.current = new Google.maps.Map(document.getElementById(MAP_VIEW_ID)!,
{
center: validLocation,
zoom: zoom,
@@ -90,7 +92,8 @@ const MapPicker: FC = ({ apiKey, defaultLocation, zoom = 7, onChangeLocat
marker.current = new Google.maps.Marker({
position: validLocation,
map: map.current,
- draggable: true
+ draggable: true,
+ icon
});
Google.maps.event.addListener(marker.current, 'dragend', handleChangeLocation);
} else {
@@ -126,8 +129,6 @@ const MapPicker: FC = ({ apiKey, defaultLocation, zoom = 7, onChangeLocat
const componentStyle = Object.assign({ width: '100%', height: '600px' }, style || {});
- return (
-
- );
+ return
};
export default MapPicker;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index cd39a27..e37c70f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1895,6 +1895,11 @@
"@types/minimatch" "*"
"@types/node" "*"
+"@types/google.maps@^3.53.2":
+ version "3.53.2"
+ resolved "https://registry.yarnpkg.com/@types/google.maps/-/google.maps-3.53.2.tgz#ba921cc7900b72d4f58538a770a99bfadd9952a2"
+ integrity sha512-rgTa3R5DyFTcjX4hmuGs0XR+kD4M5tZ14lcyYzDDJGr5h0JYj7DbbNZRZNJKDzZOGH3fOXWpIbZGj3BxZbpmjw==
+
"@types/graceful-fs@^4.1.2":
version "4.1.4"
resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.4.tgz#4ff9f641a7c6d1a3508ff88bc3141b152772e753"