Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Infowindow triggering change of map center prop value. #156

Open
leotocca opened this issue Oct 4, 2022 · 0 comments
Open

Infowindow triggering change of map center prop value. #156

leotocca opened this issue Oct 4, 2022 · 0 comments

Comments

@leotocca
Copy link

leotocca commented Oct 4, 2022

Describe the bug
I have an instance of the vue-google-maps library running ( tag/component). This component receives different props, 'users' (array of objects with user props) and 'center' (object with only lat and lng properties, and a default value to downtown Atlanta, GA, USA) among them.

I then iterate over the 'users' array with the tag/component reading a property of the user object to pass it as the 'position' prop value. Inside of the tag I set the . If the infowindow tag is present the map first renders with the default value of the center prop and then switches to each of the marker positions iteratively.

This is the code that is being executed:

<template>
	<GMapMap
		:center="center"
		:zoom="15"
		map-type-id="roadmap"
		style="width: 100vw; height: 100vh"
		:options="options"
	>
		<GMapMarker
			v-if="hasMarkers"
			:key="`marker-${index}`"
			v-for="(user, index) in userMarkers"
			:clickable="true"
			:position="user.currentPoint"
		>
			<GMapInfoWindow>
				<div>{{ user.id }} - {{ user.name }}</div>
			</GMapInfoWindow>
		</GMapMarker>

		<GMapPolyline v-if="hasPolyline" :path="path" ref="polyline" />
	</GMapMap>
</template>
<script setup lang="ts">
	import { computed } from 'vue';
	import type { User } from '@/interfaces/user';

	const props = defineProps({
		center: {
			type: Object,
			default: { lat: 33.7597149, lng: -84.3996143 },
		},
	});

	const userMarkers = computed(() => {
		return props.users.filter((u: User) => u.currentPoint);
	});
</script>

Expected behavior
I expect to have the map centered on the default value of the center prop.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Chrome 106
  • Library version: 0.9.67
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant