diff --git a/src/shims-google-maps.ts b/src/shims-google-maps.ts index a7a0a0a..419ab0e 100644 --- a/src/shims-google-maps.ts +++ b/src/shims-google-maps.ts @@ -19,7 +19,6 @@ declare global { offsetX?: number; offsetY?: number; zIndex?: number | null; - size?: { width: number; height: number }; } export let CustomMarker: ReturnType; diff --git a/src/utils/index.ts b/src/utils/index.ts index f2d9a6a..2fcf12e 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,3 +1,4 @@ +import fastdom from "fastdom"; type ICustomMarkerInterface = google.maps.OverlayView & { getPosition(): google.maps.LatLng | null; getVisible(): boolean; @@ -62,57 +63,60 @@ export function createCustomMarkerClass(api: typeof google.maps): ICustomMarkerC const point = overlayProjection?.fromLatLngToDivPixel(this.getPosition()); if (point) { - this.element.style.position = "absolute"; - const height = this.opts.size && this.opts.size.height ? this.opts.size.height : this.element.offsetHeight; - const width = this.opts.size && this.opts.size.width ? this.opts.size.width : this.element.offsetWidth; - let x: number, y: number; - switch (this.opts.anchorPoint) { - case "TOP_CENTER": - x = point.x - width / 2; - y = point.y; - break; - case "BOTTOM_CENTER": - x = point.x - width / 2; - y = point.y - height; - break; - case "LEFT_CENTER": - x = point.x; - y = point.y - height / 2; - break; - case "RIGHT_CENTER": - x = point.x - width; - y = point.y - height / 2; - break; - case "TOP_LEFT": - x = point.x; - y = point.y; - break; - case "TOP_RIGHT": - x = point.x - width; - y = point.y; - break; - case "BOTTOM_LEFT": - x = point.x; - y = point.y - height; - break; - case "BOTTOM_RIGHT": - x = point.x - width; - y = point.y - height; - break; - default: - // "center" - x = point.x - width / 2; - y = point.y - height / 2; - } - - this.element.style.left = x + "px"; - this.element.style.top = y + "px"; - // eslint-disable-next-line prettier/prettier - this.element.style.transform = `translateX(${this.opts.offsetX || 0}px) translateY(${this.opts.offsetY || 0}px)`; - - if (this.opts.zIndex) { - this.element.style.zIndex = this.opts.zIndex.toString(); - } + const element = this.element; + fastdom.measure(() => { + const height = element.offsetHeight; + const width = element.offsetWidth; + let x: number, y: number; + switch (this.opts.anchorPoint) { + case "TOP_CENTER": + x = point.x - width / 2; + y = point.y; + break; + case "BOTTOM_CENTER": + x = point.x - width / 2; + y = point.y - height; + break; + case "LEFT_CENTER": + x = point.x; + y = point.y - height / 2; + break; + case "RIGHT_CENTER": + x = point.x - width; + y = point.y - height / 2; + break; + case "TOP_LEFT": + x = point.x; + y = point.y; + break; + case "TOP_RIGHT": + x = point.x - width; + y = point.y; + break; + case "BOTTOM_LEFT": + x = point.x; + y = point.y - height; + break; + case "BOTTOM_RIGHT": + x = point.x - width; + y = point.y - height; + break; + default: + // "center" + x = point.x - width / 2; + y = point.y - height / 2; + } + + fastdom.mutate(() => { + element.style.position = "absolute"; + element.style.left = x + "px"; + element.style.top = y + "px"; + + if (this.opts.zIndex) { + element.style.zIndex = this.opts.zIndex.toString(); + } + }); + }); } }