added custom marker support

dist/MapPicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="google.maps" />
 import { FC } from 'react';
 declare type Location = {
     lat: number;
@@ -18,6 +19,7 @@ declare type Props = {
     style?: any;
     className?: string;
     mapTypeId?: MapTypeId;
+    icon: string | google.maps.Icon | google.maps.Symbol | null | undefined;
 };
 declare const MapPicker: FC<Props>;
 export default MapPicker;

example/.eslintcache

@@ -1 +1 @@
-[{"D:\\Github\\react-google-map-picker\\example\\src\\index.js":"1","D:\\Github\\react-google-map-picker\\example\\src\\App.js":"2"},{"size":171,"mtime":1625231775038,"results":"3","hashOfConfig":"4"},{"size":1745,"mtime":1625238416551,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"8"},"1koxxa8",{"filePath":"9","messages":"10","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\Github\\react-google-map-picker\\example\\src\\index.js",[],["11","12"],"D:\\Github\\react-google-map-picker\\example\\src\\App.js",[],{"ruleId":"13","replacedBy":"14"},{"ruleId":"15","replacedBy":"16"},"no-native-reassign",["17"],"no-negated-in-lhs",["18"],"no-global-assign","no-unsafe-negation"]
+[{"D:\\projects\\react-google-map-picker\\example\\src\\index.js":"1","D:\\projects\\react-google-map-picker\\example\\src\\App.js":"2"},{"size":171,"mtime":1685281093784,"results":"3","hashOfConfig":"4"},{"size":1866,"mtime":1685356655149,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"8"},"iqlpn9",{"filePath":"9","messages":"10","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\projects\\react-google-map-picker\\example\\src\\index.js",[],["11","12"],"D:\\projects\\react-google-map-picker\\example\\src\\App.js",[],{"ruleId":"13","replacedBy":"14"},{"ruleId":"15","replacedBy":"16"},"no-native-reassign",["17"],"no-negated-in-lhs",["18"],"no-global-assign","no-unsafe-negation"]

example/src/App.js

@@ -33,9 +33,9 @@ const App = () => {
   <label>Longitute:</label><input type='text' value={location.lng} disabled/>
   <label>Zoom:</label><input type='text' value={zoom} disabled/>
 
-  <div class="row">
+  <div className="row">
 
-  <div class="column">
+  <div className="column">
     <h4>Map 1 (roadmap)</h4>
     <MapPicker defaultLocation={defaultLocation}
     zoom={zoom}
@@ -46,14 +46,15 @@ const App = () => {
     apiKey='AIzaSyD07E1VvpsN_0FvsmKAj4nK9GnLq-9jtj8'/>
   </div>
 
-  <div class="column">
+  <div className="column">
     <h4>Map 2 (satellite)</h4>
     <MapPicker defaultLocation={defaultLocation}
     zoom={zoom}
     mapTypeId="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'/>
   </div>
 

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",

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<Props> = ({ apiKey, defaultLocation, zoom = 7, onChangeLocation, onChangeZoom, style, className, mapTypeId }) => {
+const MapPicker: FC<Props> = ({ 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<any>(null);
     const marker = React.useRef<any>(null);
@@ -76,10 +78,10 @@ const MapPicker: FC<Props> = ({ 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<Props> = ({ 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<Props> = ({ apiKey, defaultLocation, zoom = 7, onChangeLocat
 
     const componentStyle = Object.assign({ width: '100%', height: '600px' }, style || {});
 
-    return (
-        <div id={MAP_VIEW_ID} style={componentStyle} className={className}></div>
-    );
+    return <div id={MAP_VIEW_ID} style={componentStyle} className={className} />
 };
 export default MapPicker;

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"