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



  • 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



  • 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
          })
        },
      }
    


  • @mayur-911 Nice work!



  • @dobbel Thanks a lot!



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



  • 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?


Log in to reply