inocan-group/vue3-google-map

Nested CustomMarkers don't show in `build` but do in `dev`

Opened this issue · 2 comments

Is there a a reason that CustomMarkers would stop showing when doing a build vs running in dev mode.

I have a number of custom markers in templates that when added to a map like

<GoogleMap
		:api-promise="apiPromise"
		style="width: 100%; height: 100%"
		:center="center"
		:zoom="zoom"
		v-bind="mapOptions"
		@bounds_changed="updateBounds"
		ref="mapRef"
		@zoom_changed="updateZoom"
	>
		<Marker :options="{ position: center }" />
		<template v-if="mapReady">
			<template v-if="showRegionMarkers">
				<region-marker
					v-for="region in regions"
					:key="`region_id-${region.id}`"
					:region="region"
					@select-region="selectRegion"
				/>
			</template>

where the region marker is structured like this

<template>
	<custom-marker
		ref="region-marker"
		v-if="true"
		class="map-marker region-marker"
		:options="{ position: center }"
		:key="'place_marker_' + region.slug"
		@click="emit('select-region', region)"
	>
		<button
			:title="name"
			@mouseenter="hoverLocation(true)"
			@mouseleave="hoverLocation(false)"
			@click="emit('select-region', region)"
		>
			<span v-html="name" @click="emit('select-region', region)" />
		</button>
	</custom-marker>
</template>

it looks in the dom like the custom markers are sitting in the dom but don't get attached to the map? is this a known issue that I need to redesign for?

Hey @sdevore can you please provide a minimal reproduction? You can use https://vite.new/vue

@HusamElbashir I am working on making a project that reproduces it. The bigger project I have there is one case where it does work on build and the other it does not. Which is frustrating me ;) The issue is related to differences between what happens when npm run dev and npm run build so an online repro probably won't work to show the problem. I am working on making a test case for you.