search

fawmi / vue-google-maps

Reactive Vue 3 components for Google maps
https://vue-map.netlify.app
MIT License
196 stars 100 forks source link

Styles don't render properly when Vue 3 is installed with Vite #70

Open catherineluse opened 3 years ago

catherineluse commented 3 years ago

When I tried following the examples, the rendered map was small and the default marker icons couldn't render. Screen Shot 2021-10-13 at 9 53 33 PM

Here's my main.ts:

import { createApp } from "vue";
import App from "./App.vue";
import { router } from './router';
import VueGoogleMaps from '@fawmi/vue-google-maps'
import config from './config';
import "./index.css";

const app = createApp(App)
    .use(router)
    .use(VueGoogleMaps, {
        load: {
            key: config.googleMapsApiKey
        }
    })
    .mount("#app");

And here's my Map.vue:

<script lang="ts">
import { defineComponent } from "vue";
import places from "../../testData/places";

export default defineComponent({
  setup() {
    return {
      center: { lat: 33.4255, lng: -111.94 },
      places,
    };
  },
});
</script>

<template>
  <div>Map</div>
  <div>
    <GMapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 100vw; height: 20rem"
    >
      <GMapCluster :zoomOnClick="true">
        <GMapMarker 
          v-for="place in places"
          :key="place.Name"
          :position="{ lat: place.Latitude, lng: place.Longitude }"
          :clickable="true"
          :draggable="true"
          @click="center = { lat: place.Latitude, lng: place.Longitude }"
        >
          <GMapInfoWindow>
            {{ place.Name }}
          </GMapInfoWindow>
        </GMapMarker>
      </GMapCluster>
    </GMapMap>
  </div>
</template>

My code is here https://github.com/catherineluse/vue-playground/blob/main/src/components/event/Map.vue

fawmi commented 3 years ago

@catherineluse
Using your code I have created a sandbox and I do not have any problem with the style property. https://stackblitz.com/edit/vue-google-maps-marker-341ftq?file=src%2Fcomponents%2FComponentWithMap.vue

Alternatively you can style the .vue-map css selector directly inside css.

It can also be that, you have some other vue plugin (or browser plugin ) installed which effects the styles of the map component.

catherineluse commented 3 years ago

Thanks for looking into it. I agree that it must be some other plugin affecting it. Directly using .vue-map worked.

This helped with the cluster icons not showing https://stackoverflow.com/questions/43683474/google-maps-markerclusterer-displaying-number-instead-of-marker

catherineluse commented 3 years ago

I think the problem is because Vue was initialized with the Vite CLI.

To reproduce the error, I created a new Vue app using the commands in the official Vue 3 docs (https://v3.vuejs.org/guide/installation.html#vite), then created a vue-google-maps component in the basic HelloWorld component and the styles were messed up. The code is here https://github.com/catherineluse/vite-map

Is it possible to use this library with Vite?

Edit: These were two separate issues. The tiny default map issue only happened with Vite. The cluster icon issue happened with both Vite and a regular Vue 3 install, probably due to this issue. https://github.com/googlemaps/v3-utility-library/issues/514 The cluster marker icons were reorganized so the default links broke. My workaround was to hardcode the icon links and make them point to a commit instead of the master branch so that they don't break again:

<GMapCluster
        :zoomOnClick="true"
        :styles="[
          {
            textColor: 'black',
            url: 'https://raw.githubusercontent.com/googlemaps/v3-utility-library/37c2a570c318122df57b83140f5f54665b9359e5/packages/markerclustererplus/images/m1.png',
            height: 52,
            width: 53,
          },
          {
            textColor: 'black',
            url: 'https://raw.githubusercontent.com/googlemaps/v3-utility-library/37c2a570c318122df57b83140f5f54665b9359e5/packages/markerclustererplus/images/m2.png',
            height: 55,
            width: 56,
          },
          {
            textColor: 'black',
            url: 'https://raw.githubusercontent.com/googlemaps/v3-utility-library/37c2a570c318122df57b83140f5f54665b9359e5/packages/markerclustererplus/images/m3.png',
            height: 65,
            width: 66,
          },
          {
            textColor: 'black',
            url: 'https://raw.githubusercontent.com/googlemaps/v3-utility-library/37c2a570c318122df57b83140f5f54665b9359e5/packages/markerclustererplus/images/m4.png',
            height: 77,
            width: 78,
          },
          {
            textColor: 'black',
            url: 'https://raw.githubusercontent.com/googlemaps/v3-utility-library/37c2a570c318122df57b83140f5f54665b9359e5/packages/markerclustererplus/images/m5.png',
            height: 89,
            width: 90,
          },
        ]"
      >
adam-kozlowski-dev commented 2 years ago

In the PR https://github.com/fawmi/vue-google-maps/pull/62 merged on 4 Oct these two changes were made:

biggestDreamerly commented 2 years ago

Thank you for helping me solve this problem

biggestDreamerly commented 2 years ago

But the cluster icon will have a deviation from the position of the number

arcadeJHS commented 2 years ago

But the cluster icon will have a deviation from the position of the number

Same issue here.

aentwist commented 2 years ago

I am having the same issue. As mentioned, this is completely unrelated to Vite.

<GMapMap
  style="height: 900px"
  :center="{ lat: 0, lng: 0 }"
  :zoom="0"
/>

This renders the map as shown in the screenshot above - it has some minimum height.

The style is not being applied to the component's root element, div.vue-map-container. When I apply the style to the element directly in the browser, it works as expected.

Note that the workaround with selector .vue-map does not work. Instead apply it to the container, .vue-map-container.

wompeter commented 2 years ago

Same issue here with a Vue3 + Vuetify + Typescript + Vite project.

Jake4-CX commented 2 years ago

Same issue here with a Vue3 + Vuetify + Typescript + Vite project.

Downgrade to 0.9.3 and it should work fine @wompeter

smarquez-dev commented 2 years ago

Same issue with a Vue3 + Vite project I solved passing to Cluster the imagePath

<GMapCluster :zoomOnClick="true" :imagePath="imagePath">
....
data () {
  return {
      imagePath: 'https://raw.githubusercontent.com/googlemaps/v3-utility-library/37c2a570c318122df57b83140f5f54665b9359e5/packages/markerclustererplus/images/m'
  }
}
yashmasani commented 2 years ago

For those trying to resolve the styling and text deviation of GMapCluster, here is a code snippet that may help :)

      <GMapCluster                                                                                                                                                                                            
            :styles="[
            {
              textColor: 'white',
              url: require('@/assets/svg/purple-marker.svg'),
              height: 25,
              width: 25,
              textSize: 14,
              anchorText: [1, 10] ,
            },
          ]"
          >
hengseyha commented 2 years ago

Same issue with a Vue3 + Vite project I solved passing to Cluster the imagePath

<GMapCluster :zoomOnClick="true" :imagePath="imagePath">
....
data () {
  return {
      imagePath: 'https://raw.githubusercontent.com/googlemaps/v3-utility-library/37c2a570c318122df57b83140f5f54665b9359e5/packages/markerclustererplus/images/m'
  }
}

This is very helpful thank you. my issue is solved!

welldyrosman commented 1 year ago

But the cluster icon will have a deviation from the position of the number

I got Same Issue, have you fixed it?