Release v2.2.1 (#24)

* Release V1.3.0

* Update README.md

* Update package.json

* Release V1.4.0 (#15)

* Search map updated, Marker changed

* 1.4.0 Release

* Lib updated

* Minor changes

(cherry picked from commit 89ec3ce)
(cherry picked from commit 0367cad)

* - marker position issue when map zoom in : Solved (#20)

- added *route* and *streetNumber* properties on AddressFormatter method

* fix: g-mapify fail on initialisation twice [#22] (#23)

Co-authored-by: krishpe <krish@bharatpe.com>
Co-authored-by: krishpe <64515207+krishpe@users.noreply.github.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "g-mapify",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "description": "Flexible react google map with more options of search, pick & select.",
   "author": "BharatPe TM",
   "license": "ISC",

src/Gmapify/index.js

@@ -76,20 +76,20 @@ const GMapify = (props) => {
    * @description add google map script file to project
    */
   const insertMapScript = () => {
-    const isGMapifyScriptAdded = document.head.querySelector("#google-map");
-
-    if (!isGMapifyScriptAdded) {
-      // error occured in Google Map loading
-      window.gm_authFailure = () => {
-        setIsMapLoadingFailed(true);
-        sendToParent(false, { message: MSG_CONST.MAP_NOT_LOADED }, -1);
-      };
+    // error occured in Google Map loading
+    window.gm_authFailure = () => {
+      setIsMapLoadingFailed(true);
+      sendToParent(false, { message: MSG_CONST.MAP_NOT_LOADED }, -1);
+    };
 
-      injectMapScript(appKey, libraries);
-    } else {
-      // skip to add google map script when already added
-      mapInitSuccess();
-    }
+    injectMapScript(appKey, libraries)
+      .then(() => {
+        mapInitSuccess();
+        setIsMapLoadingFailed(false);
+      })
+      .catch(() => {
+        console.error("google map library loading error!");
+      });
   };
 
   /**
@@ -109,8 +109,6 @@ const GMapify = (props) => {
     };
 
     // create google map instance
-    console.log("MAP INSTANXE", mapElemRef.current);
-
     if (mapElemRef.current) {
       setMapInstance(
         new window.google.maps.Map(mapElemRef.current, {
@@ -160,7 +158,6 @@ const GMapify = (props) => {
 
       // bind zoom change event because always need to zoom from center
       mapInstance.addListener("zoom_changed", () => {
-        console.log("Last position", mapLastPosition);
         setMapPosition(mapLastPosition.lat, mapLastPosition.lng);
       });
     }
@@ -216,7 +213,6 @@ const GMapify = (props) => {
     }
 
     // save map last position
-    console.log("setMapLastPosition", position);
     setMapLastPosition(position);
   };
 
@@ -319,12 +315,6 @@ const GMapify = (props) => {
     if (customMarkers) {
       let infowindow = null;
       customMarkers.forEach((item) => {
-        console.log(
-          "Setting marker",
-          item,
-          new window.google.maps.LatLng(item[0], item[1]),
-          mapInstance
-        );
         // eslint-disable-next-line no-new
         const marker = new window.google.maps.Marker({
           position: new window.google.maps.LatLng(item[0], item[1]),
@@ -356,12 +346,6 @@ const GMapify = (props) => {
     if (appKey) {
       // call to insert google map script
       insertMapScript();
-
-      // google map callback
-      window.initMapScript = () => {
-        console.log("Map script successfull");
-        mapInitSuccess();
-      };
     } else {
       console.error("google map appKey not found!!!");
     }

src/utils/common.js

@@ -1,11 +1,79 @@
+let isMapLoaded = false;
+let isMapLoadPending = false;
+let scriptElem = null;
+const resolveList = [];
+const rejectList = [];
+
 const getMapScript = (appKey, libraries) =>
   `https://maps.googleapis.com/maps/api/js?key=${appKey}&callback=initMapScript&libraries=${libraries}`;
 
+/**
+ * @function notifyAll
+ * @param {boolean} isResolve
+ * @description notify all component to map script downloaded
+ */
+const notifyAll = (isResolve) => {
+  if (isResolve) {
+    for (let i = 0; i < resolveList.length; i++) {
+      resolveList[i]();
+    }
+  } else {
+    for (let i = 0; i < rejectList.length; i++) {
+      rejectList[i](new Error("map script not loaded"));
+    }
+  }
+  resolveList.length = 0;
+  rejectList.length = 0;
+};
+
+/**
+ * @function injectMapScript
+ * @param {string} appKey
+ * @param {string} libraries
+ * @description download map script file
+ */
 const injectMapScript = (appKey, libraries) => {
-  const scriptElem = document.createElement("script");
-  scriptElem.src = getMapScript(appKey, libraries);
-  scriptElem.setAttribute("id", "google-map");
-  document.querySelector("head").appendChild(scriptElem);
+  if (isMapLoaded) return Promise.resolve();
+
+  return new Promise((resolve, reject) => {
+    if (!window.initMapScript) {
+      window.initMapScript = () => {
+        console.log("Map script successful");
+        notifyAll(true);
+      };
+    }
+
+    resolveList.push(resolve);
+    rejectList.push(reject);
+
+    function mapScriptLoadEvent() {
+      isMapLoaded = true;
+      isMapLoadPending = false;
+      scriptElem.setAttribute("loaded", "true");
+      scriptElem.removeEventListener("load", mapScriptLoadEvent);
+      scriptElem.removeEventListener("error", mapScriptErrorEvent);
+    }
+
+    function mapScriptErrorEvent() {
+      isMapLoaded = false;
+      isMapLoadPending = false;
+      scriptElem.setAttribute("loaded", "false");
+      scriptElem.removeEventListener("error", mapScriptErrorEvent);
+      scriptElem.removeEventListener("load", mapScriptLoadEvent);
+      document.head.removeChild(scriptElem);
+      notifyAll(false);
+    }
+
+    if (!isMapLoadPending) {
+      scriptElem = document.createElement("script");
+      scriptElem.addEventListener("load", mapScriptLoadEvent);
+      scriptElem.addEventListener("error", mapScriptErrorEvent);
+      scriptElem.src = getMapScript(appKey, libraries);
+      scriptElem.setAttribute("id", "google-map");
+      document.querySelector("head").appendChild(scriptElem);
+      isMapLoadPending = true;
+    }
+  });
 };
 
 /**