FIX: _ui.map.google markers positions

src/js/_components/drivers/_map.google.js

@@ -4,7 +4,7 @@ import $ from 'jquery';
 import Events from '../../_events';
 import MarkerUI from './_map.google.marker';
 
-const GoogleMapsDriver = (($) => {
+const GoogleMapsDriver = ($ => {
   class GoogleMapsDriver {
     getName() {
       return 'GoogleMapsDriver';
@@ -39,13 +39,13 @@ const GoogleMapsDriver = (($) => {
       const zoom = config['mapZoom'] ? config['mapZoom'] : 10;
       const center = config['center']
         ? {
-          lat: config['center'][1],
-          lng: config['center'][0],
-        }
+            lat: config['center'][1],
+            lng: config['center'][0],
+          }
         : {
-          lat: 0,
-          lng: 0,
-        };
+            lat: 0,
+            lng: 0,
+          };
       const style = config['style'] ? config['style'] : null;
 
       console.log(`${ui.getName()}: API is loaded`);
@@ -90,6 +90,7 @@ const GoogleMapsDriver = (($) => {
       const marker = new ui.MarkerUI({
         position: pos,
         map: ui.map,
+        align: ['center', 'top'],
         html: `<div class="mapboxgl-marker"><div id="Marker${config['id']}" data-id="${config['id']}" class="marker">${config['icon']}</div></div>`,
         onClick: () => {
           const $el = $(`#Marker${config['id']}`);
@@ -113,21 +114,25 @@ const GoogleMapsDriver = (($) => {
         ui.map.setZoom(18);
       }
 
+      // keep it hidden to render content
       $popup.css({
         opacity: '0',
       });
       $popup.removeClass('d-none');
 
-      ui.popup.setPosition(pos, ['center', 'top']);
       $popup.find('.mapboxgl-popup-content .html').html(content);
 
-      $popup.find('.mapboxgl-popup-close-button').on('click', (e) => {
+      $popup.find('.mapboxgl-popup-close-button').on('click', e => {
         e.preventDefault();
         ui.hidePopup();
       });
 
+      // set position when content was rendered
+      ui.popup.setPosition(pos, ['center', 'top']);
+
+      // display popup
       $popup.css({
-        'margin-left': '1rem',
+        'margin-top': '-1rem',
         opacity: '1',
       });
     }
@@ -200,7 +205,7 @@ const GoogleMapsDriver = (($) => {
       const bounds = new google.maps.LatLngBounds();
 
       // add markers to map
-      config['geojson'].features.forEach((marker) => {
+      config['geojson'].features.forEach(marker => {
         const id = marker.id;
         const crds = marker.geometry.coordinates;
         const content = marker.properties.content;

src/js/_components/drivers/_map.google.marker.js

@@ -7,18 +7,16 @@ const Obj = {
 
         ui.setMap(options.map);
         ui.position = options.position;
-        ui.html =
-          (options.html ?
-            options.html :
-            '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
-          );
+        ui.html = options.html
+          ? options.html
+          : '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>';
         ui.divClass = options.divClass;
         ui.align = options.align;
         ui.isDebugMode = options.debug;
         ui.onClick = options.onClick;
         ui.onMouseOver = options.onMouseOver;
 
-        ui.isBoolean = (arg) => {
+        ui.isBoolean = arg => {
           if (typeof arg === 'boolean') {
             return true;
           } else {
@@ -26,7 +24,7 @@ const Obj = {
           }
         };
 
-        ui.isNotUndefined = (arg) => {
+        ui.isNotUndefined = arg => {
           if (typeof arg !== 'undefined') {
             return true;
           } else {
@@ -34,7 +32,7 @@ const Obj = {
           }
         };
 
-        ui.hasContent = (arg) => {
+        ui.hasContent = arg => {
           if (arg.length > 0) {
             return true;
           } else {
@@ -42,7 +40,7 @@ const Obj = {
           }
         };
 
-        ui.isString = (arg) => {
+        ui.isString = arg => {
           if (typeof arg === 'string') {
             return true;
           } else {
@@ -50,7 +48,7 @@ const Obj = {
           }
         };
 
-        ui.isFunction = (arg) => {
+        ui.isFunction = arg => {
           if (typeof arg === 'function') {
             return true;
           } else {
@@ -86,12 +84,12 @@ const Obj = {
           ui.div.setAttribute(
             'style',
             'position: absolute;' +
-            'border: 5px dashed red;' +
-            'height: 150px;' +
-            'width: 150px;' +
-            'display: flex;' +
-            'justify-content: center;' +
-            'align-items: center;'
+              'border: 5px dashed red;' +
+              'height: 150px;' +
+              'width: 150px;' +
+              'display: flex;' +
+              'justify-content: center;' +
+              'align-items: center;',
           );
         }
 
@@ -99,13 +97,13 @@ const Obj = {
         ui.getPanes().overlayMouseTarget.appendChild(ui.div);
 
         // Add listeners to the element.
-        google.maps.event.addDomListener(ui.div, 'click', (event) => {
+        google.maps.event.addDomListener(ui.div, 'click', event => {
           google.maps.event.trigger(ui, 'click');
           if (ui.isFunction(ui.onClick)) ui.onClick();
           event.stopPropagation();
         });
 
-        google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
+        google.maps.event.addDomListener(ui.div, 'mouseover', event => {
           google.maps.event.trigger(ui, 'mouseover');
           if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
           event.stopPropagation();
@@ -114,63 +112,74 @@ const Obj = {
 
       draw() {
         const ui = this;
+        let $div = $(ui.div).find(
+          '.mapboxgl-marker,.marker-pin,.mapboxgl-popup,.popup',
+        );
+        if (!$div.length) {
+          $div = $(ui.div);
+        }
 
         // Calculate position of div
-        var positionInPixels = ui.getProjection().fromLatLngToDivPixel(
-          new google.maps.LatLng(ui.position)
-        );
+        const positionInPixels = ui
+          .getProjection()
+          .fromLatLngToDivPixel(new google.maps.LatLng(ui.position));
 
         // Align HTML overlay relative to original position
-        var divOffset = {
+        const offset = {
           y: undefined,
           x: undefined,
         };
+        const divWidth = $div.outerWidth();
+        const divHeight = $div.outerHeight();
+        console.log(divWidth);
+        console.log(divHeight);
 
         switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
           case 'left top':
-            divOffset.y = ui.div.offsetHeight;
-            divOffset.x = ui.div.offsetWidth;
+            offset.y = divHeight;
+            offset.x = divWidth;
             break;
           case 'left center':
-            divOffset.y = ui.div.offsetHeight / 2;
-            divOffset.x = ui.div.offsetWidth;
+            offset.y = divHeight / 2;
+            offset.x = divWidth;
             break;
           case 'left bottom':
-            divOffset.y = 0;
-            divOffset.x = ui.div.offsetWidth;
+            offset.y = 0;
+            offset.x = divWidth;
             break;
           case 'center top':
-            divOffset.y = ui.div.offsetHeight;
-            divOffset.x = ui.div.offsetWidth / 2;
+            offset.y = divHeight;
+            offset.x = divWidth / 2;
             break;
           case 'center center':
-            divOffset.y = ui.div.offsetHeight / 2;
-            divOffset.x = ui.div.offsetWidth / 2;
+            offset.y = divHeight / 2;
+            offset.x = divWidth / 2;
             break;
           case 'center bottom':
-            divOffset.y = 0;
-            divOffset.x = ui.div.offsetWidth / 2;
+            offset.y = 0;
+            offset.x = divWidth / 2;
             break;
           case 'right top':
-            divOffset.y = ui.div.offsetHeight;
-            divOffset.x = 0;
+            offset.y = divHeight;
+            offset.x = 0;
             break;
           case 'right center':
-            divOffset.y = ui.div.offsetHeight / 2;
-            divOffset.x = 0;
+            offset.y = divHeight / 2;
+            offset.x = 0;
             break;
           case 'right bottom':
-            divOffset.y = 0;
-            divOffset.x = 0;
+            offset.y = 0;
+            offset.x = 0;
             break;
           default:
-            divOffset.y = ui.div.offsetHeight / 2;
-            divOffset.x = ui.div.offsetWidth / 2;
+            offset.y = divHeight / 2;
+            offset.x = divWidth / 2;
+            break;
         }
 
         // Set position
-        ui.div.style.top = `${positionInPixels.y - divOffset.y  }px`;
-        ui.div.style.left = `${positionInPixels.x - divOffset.x  }px`;
+        ui.div.style.top = `${positionInPixels.y - offset.y}px`;
+        ui.div.style.left = `${positionInPixels.x - offset.x}px`;
       }
 
       getPosition() {
@@ -192,6 +201,6 @@ const Obj = {
     }
     return GoogleMapsHtmlOverlay;
   },
-}
+};
 
 export default Obj;

src/scss/_components/_ui.map.scss

@@ -1,5 +1,5 @@
-@import "../_variables";
-@import "../_animations";
+@import '../_variables';
+@import '../_animations';
 
 //@import "~mapbox-gl/src/css/mapbox-gl.css";
 
@@ -15,7 +15,7 @@
         left: 0;
         display: flex;
         pointer-events: none;
-        font-size: .8rem;
+        font-size: 0.8rem;
         z-index: 4;
         line-height: 20px;
     }
@@ -32,8 +32,8 @@
         padding: 10px 10px 15px;
         border-radius: 3px;
         background: $white;
-        min-width: 240px;
-        min-height: 5rem;
+        width: 240px;
+        height: 5rem;
         box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.4);
     }
 
@@ -42,7 +42,7 @@
         right: 0;
         top: 0;
         font-size: 2rem;
-        padding: .5rem;
+        padding: 0.5rem;
         border-top-right-radius: 3px;
 
         &:hover,