q-google-map - Quasar app extension to integrate google map

[mayur.911]

I’ve just released the q-google-map quasar app extension to integrate google map in Quasar project. Any feedback will greatly be appreciated.

Few features to list:

• Map
• Marker
• Polyline
• Polygon
• Circle
• Rectangle
• Kml layer

Website - https://q-google-map.netlify.app/
GitHub - https://github.com/mayur091193/q-google-map

[beets]

Neat, I recently integrated google maps into a quasar project too. One fun thing I did was support for dark mode, which is reactive to changes:

  computed: {
    styles() {
      if(!this.$q.dark.isActive) {
        return []
      }
      return [
        {
          elementType: "geometry",
          stylers: [{ color: "#242f3e" }]
        },
        {
          elementType: "labels.text.stroke",
          stylers: [{ color: "#242f3e" }]
        },
        {
          elementType: "labels.text.fill",
          stylers: [{ color: "#746855" }]
        },
        {
          featureType: "administrative.locality",
          elementType: "labels.text.fill",
          stylers: [{ color: "#d59563" }]
        },
        {
          featureType: "poi",
          elementType: "labels.text.fill",
          stylers: [{ color: "#d59563" }]
        },
        {
          featureType: "poi.park",
          elementType: "geometry",
          stylers: [{ color: "#263c3f" }]
        },
        {
          featureType: "poi.park",
          elementType: "labels.text.fill",
          stylers: [{ color: "#6b9a76" }]
        },
        {
          featureType: "road",
          elementType: "geometry",
          stylers: [{ color: "#38414e" }]
        },
        {
          featureType: "road",
          elementType: "geometry.stroke",
          stylers: [{ color: "#212a37" }]
        },
        {
          featureType: "road",
          elementType: "labels.text.fill",
          stylers: [{ color: "#9ca5b3" }]
        },
        {
          featureType: "road.highway",
          elementType: "geometry",
          stylers: [{ color: "#746855" }]
        },
        {
          featureType: "road.highway",
          elementType: "geometry.stroke",
          stylers: [{ color: "#1f2835" }]
        },
        {
          featureType: "road.highway",
          elementType: "labels.text.fill",
          stylers: [{ color: "#f3d19c" }]
        },
        {
          featureType: "transit",
          elementType: "geometry",
          stylers: [{ color: "#2f3948" }]
        },
        {
          featureType: "transit.station",
          elementType: "labels.text.fill",
          stylers: [{ color: "#d59563" }]
        },
        {
          featureType: "water",
          elementType: "geometry",
          stylers: [{ color: "#17263c" }]
        },
        {
          featureType: "water",
          elementType: "labels.text.fill",
          stylers: [{ color: "#515c6d" }]
        },
        {
          featureType: "water",
          elementType: "labels.text.stroke",
          stylers: [{ color: "#17263c" }]
        }
      ]
    }
  },
  watch: {
    '$q.dark.isActive'() {
      this.map.setOptions({
        styles: this.styles
      })
    },
  }

[dobbel]

@mayur-911 Nice work!

[mayur.911]

@dobbel Thanks a lot!

[mayur.911]

@beets Thanks. Will try puting this in next release.

[micharion]

I am currently trying this and getting the following error:

Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at Object.install (index.esm.js?1344:6)
at Function.Vue.use (vue.runtime.esm.js?5593:5107)
at eval (register.js?03bd:3)
at Module…/node_modules/quasar-app-extension-q-google-map/src/boot/register.js (vendor.js:2348)
at webpack_require (app.js:854)
at fn (app.js:151)
at eval (client-entry.js?68f8:1)
at Module…/.quasar/client-entry.js (app.js:1019)
at webpack_require (app.js:854)

Has anyone else run into this trying to use it?