Fix center maps not working properly (680ef3ba) · Commits · school / Capstone Design / 02 / Vue Google Maps

components/Map.vue

+35 −29

Original line number	Diff line number	Diff line
		@@ -6,8 +6,8 @@

		<script>
		import { Loader } from "../utils/load-google-maps";
		import { ref, provide, inject } from "vue";
		import { fitMapToMarkers } from "../utils/center-markers";
		import { ref, provide, watch, inject } from "vue";

		export default {
		props: {
		@@ -21,22 +21,22 @@ export default {
		mapTypeId: {
		default: "terrain"
		},
		style: {
		default: []
		mapStyles: {
		type: Array,
		required: true
		},
		disableDefaultUI: {
		type: Boolean,
		},
		geoCoordinates: {
		default: [],
		centerGeoCoordinates: {
		type: Array,
		required: false
		},
		options: {
		zoomControl: true,
		mapTypeControl: true,
		scaleControl: true,
		streetViewControl: true,
		rotateControl: true,
		mapTypeControl: false,
		scaleControl: false,
		streetViewControl: false,
		rotateControl: false,
		fullscreenControl: true,
		disableDefaultUI: false
		}
		},
		setup: function(props) {
		@@ -46,9 +46,14 @@ export default {
		"apiKey"
		);

		const mapIds = inject(
		"mapIds"
		);

		const mapsLoader = new Loader({
		apiKey: apiKey,
		version: "weekly",
		mapIds: mapIds,
		libraries: [
		"places",
		"drawing",
		@@ -58,35 +63,36 @@ export default {
		]
		});

		let uiOptions = {}

		if(props.disableDefaultUI) {
		uiOptions = {
		disableDefaultUI: true
		}
		} else {
		uiOptions = props.options
		}

		const additionalOptions = {...props.options};
		const disableDefaultUi = props?.options?.disableDefaultUI ? true : false

		const mapPromise = mapsLoader.load().then(() => {
		const map = new google.maps.Map(mapContainer.value, {
		zoom: props.zoom,
		style: props.style,
		center: new google.maps.LatLng(38.423733, 27.142826),
		mapTypeId: props.mapTypeId,
		...uiOptions
		mapId: "889b7f2cfa338388",
		center: new google.maps.LatLng(51.2228924, 6.788524),
		disableDefaultUI: disableDefaultUi,
		gestureHandling: "auto",
		});

		if (props.centerGeoCoordinates && props.centerGeoCoordinates.length) {
		fitMapToMarkers(props.centerGeoCoordinates, map);
		}

		return map;
		});

		provide("mapPromise", mapPromise);

		return {
		mapContainer
		mapContainer,
		mapPromise
		};
		}
		};
		</script>

		<style>
		#map {
		height: 80vh;
		}
		</style>

components/Marker.vue

+26 −38

Original line number	Diff line number	Diff line
		<template>
		<div>
		<slot>marker</slot>
		<div ref="commentContainerRef" v-if="defaultSlot" :is="defaultSlot">
		<component :is="defaultSlot"></component>
		</div>
		</div>

		<div>marker</div>
		</template>

		<script>
		import { inject, ref } from "vue";
		import {fitMapToMarkers} from "@fawmi/vue-google-maps/utils/center-markers";
		import { inject } from "vue";

		const commentContainerRef = ref(null);
		export default {
		props: {
		geoCoordinates: {
		required: true,
		default: []
		location: {
		required: true
		},
		centerAutomatically: {
		required: false,
		default: false
		icon: {
		required: false
		}
		},
		setup(props, { slots }) {
		setup(props) {
		const mapPromise = inject(
		"mapPromise"
		);
		@@ -32,33 +22,31 @@ export default {
		if (mapPromise) {
		mapPromise.then((googleMap) => {
		const infoWindow = new google.maps.InfoWindow();
		props.geoCoordinates.forEach( geoCoordinate => {
		let marker = new google.maps.Marker({

		const options = {
		position: new google.maps.LatLng(
		geoCoordinate.lat,
		geoCoordinate.lng
		props.location.lat,
		props.location.lng
		),
		map: googleMap
		};

		if (props.icon) {
		options.icon = props.icon
		}

		const marker = new google.maps.Marker({
		...options,
		});

		marker.addListener("click", (event) => {
		if (slots.default) {
		infoWindow.setContent(commentContainerRef.value.innerHTML);
		infoWindow.setContent(`hallo`);
		infoWindow.open(googleMap, marker);
		}
		});
		});

		if (props.centerAutomatically) {
		fitMapToMarkers(props.geoCoordinates, googleMap)
		}
		});
		}

		return {
		defaultSlot: slots.default,
		commentContainerRef
		};
		return {};
		}
		};
		</script>

docs/src/components/map.md

100755 → 100644

+36 −0

Original line number	Diff line number	Diff line
		@@ -39,3 +39,39 @@ You can also disable specific UI components
		}"
		/>
		```


		## Access google maps instance
		You can easily access Map instance by injecting it in your component.

		```javascript
		const loadMap = inject(
		"mapPromise"
		);

		loadMap.then(map=> {
		console.log( {map})
		})
		```


		## Add custom button
		You can use the map instance to add custom buttons to your map
		```js
		export function addMyButton(map) {
		const controlDiv = document.createElement("div");
		const controlUI = document.createElement("button");
		controlUI.title = "Click to zoom the map";
		controlDiv.appendChild(controlUI);
		const controlText = document.createElement("div");
		controlText.innerHTML = `Center`;
		controlUI.appendChild(controlText);
		controlUI.style.position = "relative"
		controlUI.style.bottom = "80px"
		controlUI.addEventListener("click", () => {
		map.setZoom(map.getZoom() + 1);
		});

		map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv); // eslint-disable-line no-undef
		}
		```
		No newline at end of file

docs/src/components/marker.md

100755 → 100644

+3 −2

Original line number	Diff line number	Diff line
		@@ -19,7 +19,8 @@ With marker you can show specific locations on the map
		## Center markers automatically
		To center markers so that all the markers are visible, use:
		```vue
		<GoogleMap>
		<GoogleMap
		:centerGeoCoordinates="geoCoordinates">
		<Marker
		:centerAutomatically="false"
		:geoCoordinates="[

docs/src/docs/getting-started.md

100755 → 100644

+7 −0

Original line number	Diff line number	Diff line
		@@ -29,3 +29,10 @@ app.use(googleMap, googleMapOption)
		app.mount('#app')

		```

		## Options
		apiKey is required option to load maps, you may provide following additional options if you want.

		###`mapIds`
		Allows you to style the map using google cloud map styling