Merge pull request #47 from BuildFire/fix/markers-shifting

fix(map): handle map markers shifting - CS-2984

Author: mas-iota

src/widget/css/main.css

@@ -791,20 +791,17 @@ body section#home {
 .custom-marker {
   position: absolute;
   cursor: pointer;
+  width: 45px;
+  height: 45px;
 }
 .custom-marker__container{
   box-sizing: border-box;
-  cursor: pointer;
-  width: 48px;
-  height: 48px;
   border-radius: 4px;
   padding: 4px;
   background-color: #fff;
   box-shadow: 0 11px 16px -9px rgb(0 0 0 / 70%), 0 2px 16px rgb(150 150 150 / 70%);
-  position: relative;
   border: 1px solid rgba(150,150,150,.8);
-  margin-left: -24px;
-  margin-top: -48px;
+  transform: translate(-50%, -100%);
 }
 .custom-marker__container::after {
   content: '';
@@ -835,6 +832,7 @@ body section#home {
 }
 .custom-marker__circle {
   overflow: visible;
+  transform: translate(-50%, -50%);
 }
 .custom-marker__circle svg {
   width: 100%;

src/widget/js/map/CustomMarker.js

@@ -63,37 +63,27 @@ export default (function () {
         this.onClick(this.location);
       });
     }
+    const point = this.getProjection().fromLatLngToDivPixel(this.position);
+    if (point) {
+      const southWest = this.map.getBounds().getSouthWest();
+      const northEast = this.map.getBounds().getNorthEast();
+      const sw = this.getProjection().fromLatLngToDivPixel(southWest);
+      const ne = this.getProjection().fromLatLngToDivPixel(northEast);
+
+      const mapWidth = ne.x - sw.x;
+      const mapHeight = sw.y - ne.y;
+      // factor depends on the marker size
+      const widthRatio = 45 / mapWidth;
+      const heightRatio = 45 / mapHeight;
+      div.style.width = `${mapWidth * widthRatio}px`;
+      div.style.height = `${mapHeight * heightRatio}px`;
+
+      div.style.left = point.x + 'px';
+      div.style.top = point.y + 'px';
+    }
 
     this.getPanes().overlayMouseTarget.appendChild(div);
 
-    const changeBound =  () => {
-      // Position the overlay
-      if (!this.getProjection()) {
-        return;
-      }
-      const point = this.getProjection().fromLatLngToDivPixel(this.position);
-      const sw = this.getProjection().fromLatLngToDivPixel(
-        this.map.getBounds().getSouthWest()
-      );
-      const ne = this.getProjection().fromLatLngToDivPixel(
-        this.map.getBounds().getNorthEast()
-      );
-      if (point) {
-        div.style.left = `${point.x}px`;
-        div.style.top = `${point.y}px`;
-        let width = ne.x - sw.x;
-        let height = sw.y - ne.y;
-        // factor depends on the marker size, circle has its own width
-        const ratio1 = 45 / width;
-        const ratio2 = 45 / height;
-        height *= ratio2;    // Reset height to match scaled image
-        width *= ratio1;
-        div.style.width = `${width}px`;
-        div.style.height = `${height}px`;
-      }
-    };
-    changeBound();
-    google.maps.event.addListener(this.map, 'idle', changeBound);
   };
 
   CustomMarker.prototype.remove = function () {

src/widget/widget.js

@@ -1076,8 +1076,8 @@ const findViewPortLocations = () => {
       mapView.clearMapViewList();
     }
 
-    searchLocations().then((result) => {
-      result.forEach((location) => state.maps.map.addMarker(location, handleMarkerClick));
+    searchLocations().then(() => {
+      state.listLocations.forEach((location) => state.maps.map.addMarker(location, handleMarkerClick));
     });
   }, 300);