A wrapper component for consuming Google Maps API built on top of VueJs v2.

Last update: Jun 30, 2022

GmapVue

npm version Build Status Publish Documentation

Plugin dependencies

Name Version
vue npm version
marker-clusterer-plus npm version

Project dependencies

Name Version
lerna npm version
commitlint npm version
husky npm version
lint-staged npm version

Documentation

The new documentation site is ready and it contains all examples for all components in the plugin.

If you find some parts of the plugin that was not documented, or if you think that some parts of the documentation are dark or can be improved please open an issue following our issue template rules.

You can use your google maps API key to use the live examples section.

We have planned to improve and grow all required documentation about the plugin.

Please follow the next link to our documentation.

Fork of vue2-google-maps

This is a fork of the popular vue2-google-maps. As the author of the library no longer commits to maintain the project, we forked it to develop and maintain the project.

CONTRIBUTORS ARE WELCOME

If you have time to contribute to a rather frequently used library, feel free to make a PR!, but first please read our contributing guide.

What's urgently needed are:

  1. Better automated tests (unit with Jest, e2e with Cypress).
  2. Better integration tests with the popular frameworks, especially Nuxt and Vue template
  3. Migrate to VueJs v3.0
  4. Better documentation (examples, recommendations)

Please feel free to fork the project and make a PR to improve the plugin.

Monorepo

This project uses Lerna to manage the plugin and documentation site.

  • Clone the repository

  • Run

npm install
  • After that you can use the HTML examples inside the examples folder on the gmap-vue package, take in mind that this folder will disappear in a near feature. When this happens you only could test with the live example on the documentation site with your own google maps API key

  • To start the documentation site locally you can run following command, it starts the documentation page on http://localhost:8080/

npm run start:docs
  • To test the plugin you also can use a CDN like jsdelivr or unpkg, in the way that the documentation shows you

README of GmapVue

You can read the plugin's README file following this link.

GitHub

https://github.com/diegoazh/gmap-vue
Comments
  • 1. feat(gmap-vue): add a drawing manager component

    This is a drawing manager component that brings up a UI for drawing shapes on your map. If you leave it empty, it will bring up the default DrawingManager toolbar, but you can also add your own toolbar into the default slot. In this case, slot scoped methods are provided to change the drawing mode, and delete selected shapes.

    The mandatory shapes prop will contain all the drawn shapes. If this has existing shape data in it, they will be drawn onto the map when the editor is displayed.

    Please test the examples first!

    Reviewed by davydnorris at 2020-07-02 14:29
  • 2. Bug: Marker cluster image does not appear (GmapCluster)

    Describe the bug When using marker clustering the image that replaces the clustered markers is invisible. The markers are hidden according to the minimumClusterSize prop as expected but they are replaced with nothing.

    To Reproduce Steps to reproduce the behavior:

    1. Import the component: import GmapCluster from 'gmap-vue/dist/components/cluster'
    2. Register the component: components: { GmapCluster },
    3. Wrap the gmap-marker element with the gmap-cluster element: <gmap-cluster>[gmap markers...]</gmap-cluster>
    4. Ensure that you have some markers that are positioned reasonably close together to trigger clustering at certain zoom levels.

    Expected behavior When zoomed out, closely grouped markers should be replaced with a cluster icon that denotes how many markers it's replaced. When zooming closer in, the markers should return and the cluster icon should be hidden.

    Current behavior Markers are replaced at the expected zoom level but they are replaced with seemingly nothing (no icon, no text).

    Screenshots

    Zoomed in: image

    Zoomed out: image

    • OS: Manjaro Linux
    • Browser: Firefox
    • Version: 86

    Additional context The marker clustering example in the docs doesn't work either but this may be a different issue (the clustering never occurs, rather than the cluster icon being invisible). https://diegoazh.github.io/gmap-vue/examples/basic-marker-cluster.html#live-example

    Versions

    • Node: 14.16.0
    • NPM: 6.14.11

    Package manager

    NPM

    Plugin version

    1.5.0

    Reviewed by danbohea at 2021-03-12 12:06
  • 3. Bug: autocomplete component: The computed property "fields" is already defined as a prop.

    Describe the bug A clear and concise description of what the bug is. I am trying to migrate from old vue-gmap plugin to your lib. Got this error My application using vuetify. Somewhere creating a computed property with the name "fields". I don't know where but know that your plugin doing the same. SO I got next error:

    ` [Vue warn]: The computed property "fields" is already defined as a prop.

    found in

    ---> at node_modules/gmap-vue/dist/components/autocomplete.vue at src/views/property/Create.vue at src/components/layout/Index.vue at src/App.vue `

    Expected behaviour Should work without error The computed property "fields" is already defined as a prop.

    Current behaviour Display error: The computed property "fields" is already defined as a prop.

    Desktop:

    • OS: Ubuntu 19.04
    • Browser chrome
    • Version 86.0.4240.198

    Versions

    • Node: 12
    • NPM: 6.14.9

    Package manager

    • [x] NPM

    Plugin version

    • [x] 1.5.0
    Reviewed by websitevirtuoso at 2020-11-23 03:39
  • 4. gmap-vue.js needs rebuild to include new components

    @diegoazh - just tried to test the examples and they aren't working because the new components aren't added to gmap-vue.js

    Also the drawing manager examples aren't even loading the Google map

    I also something isn't really wrong with the edits that were made to drawing-manager2.html - there is a callback slot in the drawing manager component that works the same way as the auto-complete and it's gone missing in the example, and the functions provided by the slot are being called without the slot prefix, so they do not exist

    Reviewed by davydnorris at 2020-08-02 23:44
  • 5. feat(gmap-vue): add a heatmap layer component

    This is the heatmap layer component I added in the previous repo as an issue. I've (hopefully) merged it correctly into the main source and have created a basic example.

    Please test the example first!

    Reviewed by davydnorris at 2020-05-07 07:07
  • 6. this.$clusterObject.repaint() is not a function

    If you try editing the file (with any change that will trigger HMR), the above said error is also triggered. Try this here: https://stackblitz.com/edit/nuxt-starter-mjnhuy?ctl=1&embed=1&file=pages/index.vue

    Reviewed by razukc at 2022-02-15 10:22
  • 7. Bug: gmap-vue 2.0 latest release package is broken

    Describe the bug

    Have just updated a working nuxt project to gmap-vue 2.0, and now running it causes error:

    Failed to compile with 1 errors
    This dependency was not found:
    gmap-vue in ./plugins/gmap-vue.js
    
    To install it, you can run: npm install --save gmap-vue    
    

    To reproduce

    Steps to reproduce the behavior:

    1. Create a nuxt project
    2. Set up plugin/gmap-vue.js as per documentation:
    import Vue from 'vue';
    import * as GmapVue from 'gmap-vue';
    
    export default function ({ $config }) {
      Vue.use(GmapVue, {
        load: {
          key: $config.googleAPIKey,
          libraries: 'places,visualization,drawing'
        },
        installComponents: true
      });
    };
    
    1. npm run dev
    2. See error log

    Expected behavior

    gmap-vue package is found and loads as before

    Current behavior

    gmap-vue is not loading because the package cannot be found

    Screenshots

    N/A

    Desktop (please complete the following information)

    • OS: Windows 10

    Smartphone (please complete the following information)

    N/A

    Additional context

    Have checked the node_modules directory and gmap-vue is there Have removed node_modules completely and done a full reinstall and problem is still there Have reverted to earlier package and code runs fine

    Versions

    • Node: 16.13.0
    • NPM: 8.1.4
    • Yarn: N/A

    Package manager

    • [X] NPM
    • [ ] Yarn

    Plugin version

    • [X] 2.0
    • [ ] 1.4.x
    • [ ] 1.2.x
    • [ ] 1.0.x
    Reviewed by davydnorris at 2021-11-25 07:39
  • 8. Feature: GmapCluster - Allow passing options to MarkererClusterer

    Is your feature request related to a problem? Please describe.

    The GmapCluster component works great but doesn't allow customizing the end result. Specifically, we'd like to change the colors of the cluster icons to follow our site's color palette.

    Describe the solution you'd like

    A way to pass in the options allowed by MarkerClusterer to the GmapCluster component. We probably need the renderer option for our use case but all options would probably be good to support.

    Describe alternatives you've considered

    None other than trying to pass in an :options prop to GmapCluster and setting renderer there, but with no luck.

    Additional context

    Using an old version of gmap-vue (which used the markererplus package), we leveraged custom png:s for the cluster icons to achieve the following:

    old version

    With the new version we get this result (which is functionally OK but not as good looking when seen in the context of our website):

    new version
    Reviewed by alisspers at 2022-02-22 10:18
  • 9. Deprecated Property and Function

    I found two deprecated errors while using the map and autocomplete:

    open_now is deprecated as of November 2019 and will be turned off in November 2020. Use the isOpen() function from a PlacesService.getDetails() result instead.

    and

    utc_offset is deprecated as of November 2019 and will beturned off in November 2020. Use utc_offset_minutes instead.

    Reviewed by Firman95 at 2020-05-11 14:35
  • 10. Bug: Doc correct link in "source code for mapElementFactory"

    Describe the bug

    In the page https://diegoazh.github.io/gmap-vue/#officially-supported-components the link in "source code for mapElementFactory" should be pointing to "https://github.com/diegoazh/gmap-vue/blob/master/packages/gmap-vue/src/factories/map-element.js" instead of the current one, because it goes to a 404 page

    To Reproduce Steps to reproduce the behavior:

    1. Enter to the page https://diegoazh.github.io/gmap-vue/#officially-supported-components
    2. Click on 'source code for mapElementFactory'
    3. 404 page of error

    Expected behavior Show the source code

    Current behavior Showing a 404 page of error

    Screenshots N/A

    Desktop (please complete the following information):

    • OS: Any
    • Browser Any
    • Version All

    Smartphone (please complete the following information):

    • Device: All
    • OS: All
    • Browser All
    • Version All

    Additional context Not necessary

    Versions

    • Node: 000
    • NPM:000
    • Yarn:000

    Package manager

    • [x] NPM
    • [x] Yarn

    Plugin version

    • [x] 1.4.x
    • [x] 1.2.x
    • [x] 1.0.x
    Reviewed by matiasperrone at 2020-11-30 16:20
  • 11. fix(gmap-vue): fix ref conflict on autocomplete component

    This issue had me pulling my hair for an hour. After checking my code for the hundredth time, I decided to look into the code of this package to see if the issue was there.

    The Issue

    This only occurs when you create a gmap-autocomplete component with another component in its slot.

    If you create only one gmap-autocomplete component, it works fine but if there's more than one; only the last one will work. Not only that, if you have another component or element somewhere in the context with the ref "input", it will ignore the slot and apply autocomplete to that.

    What's causing it

    At line 50, there's this.$scopedSlots.input()[0].context.$refs.input. As it's accessing the context of the slotted component (which is the context of its parent component), $refs.input can refer to anything in that context with the same ref. Here's an example:

    Here only the second component will work:

    <gmap-autocomplete>
      <template ...>
        <my-component ref="input" />
       </template>
    </gmap-autocomplete>
    
    <gmap-autocomplete>
      <template ...>
        <my-component ref="input" />
       </template>
    </gmap-autocomplete>
    

    And here the <input /> outside gmap-autocomplete will get autocomplete:

    <gmap-autocomplete>
      <template ...>
        <my-component ref="input" />
       </template>
    </gmap-autocomplete>
    
    <input ref="input" />
    

    The Fix

    I have added a new prop slotRefName which can be used to specify the unique ref of the slot if there's more than one instance of gmap-autocomplete or to avoid conflict with other elements.

    You can now do this if you have multiple instances:

    <gmap-autocomplete slot-ref-name="address1">
      <template ...>
        <my-component ref="address1" />
       </template>
    </gmap-autocomplete>
    
    <gmap-autocomplete slot-ref-name="address2">
      <template ...>
        <my-component ref="address2" />
       </template>
    </gmap-autocomplete>
    
    Reviewed by farooqaaa at 2020-09-26 04:31
  • 12. Feature: remove core-js and let the bundler do the polyfilling

    Is your feature request related to a problem? Please describe.

    The explicit import of core-js is doubling the file size when importing the package with ES6.

    Describe the solution you'd like

    I feel like you should let the bundler add polyfills instead of including all by default, as people usually handle polyfills themselves and ESM packages should not. You could do this with useBuiltIns: 'usage'. I think the following babel.config.js might help you with that.

    Describe alternatives you've considered

    No alternatives.

    Additional context

    image

    Reviewed by arjendejong12 at 2022-05-03 14:50
  • 13. Bug: Add marker by GmapDrawingManager get fail message "shape.overlay.setEditable is not a function".

    Describe the bug

    Add marker by GmapDrawingManager will get fail message "shape.overlay.setEditable is not a function". In this time click the map or draw another shape will get fail message "this.selectedShape.overlay.setEditable is not a function"

    To reproduce

    Steps to reproduce the behavior:

    1. Create a new vue project
    2. Add gmap-vue library by npm
    3. import GmapVue from 'gmap-vue' in main.js
    4. add Vue.use GmapVue... in main.js
    5. Copy HTML example from GmapDrawingManager Guide page in App.vue
    6. add markerOptions: { draggable: true, clickable: true } in App.vue data
    7. click "edit" btn
    8. click add marker btn in mapTools
    9. click a position in map to put marker
    10. See error

    Expected behavior

    After marker added, select shape & create with no error.

    Current behavior

    When add marker by GmapDrawingManager. The select function will be broken and give the fail messages.

    Screenshots

    clip

    Desktop (please complete the following information)

    Smartphone (please complete the following information)

    • Device: N/A
    • OS: N/A
    • Browser N/A
    • Version: N/A

    Additional context

    Create all type of shapes will calling the function ''setSelection". And I think maybe marker is not support 'editable' in google map javascript api but the other shapes like polygon, polyline support it. So, only create marker will trigger this error.

    Versions

    • Node: 14.17.0
    • NPM: 6.14.13

    Package manager

    • [x] NPM

    Plugin version

    • [x] 3.5.2
    Reviewed by azusa5526 at 2022-04-18 06:20
  • 14. Bug: when the marker size is greater than 1000 map loading slowly and browsers getting hang

    Please complete all sections that you can but please don't remove any section, otherwise the bot will close your issue because it doesn't meet our issue template (you can remove this comment)

    Describe the bug

    I'm using "gmap-vue": "^3.5.2" and facing slow performance(Browser hang) when the marker size is greater than 1000. Is there any limit on plotting markers?

    <gmap-cluster>
          <gmap-marker
            v-for="(m, index) in vesselsMarker"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            :key="index"
          />
        </gmap-cluster>
    
    

    To reproduce

    Steps to reproduce the behavior:

    1. Create a project that shows a map with markers
    2. Pass markers objects which have >1000 markers.
    3. It tool some time to plot markers and browsers hangs.

    Expected behavior

    If there is any limit on marker count it should be documented and I think 1k/2k markers should be plotted quickly.

    Current behavior

    Map loading slowly and browsers getting hang.

    Screenshots

    . Screenshot 2022-04-13 at 5 42 40 PM

    Desktop (please complete the following information)

    • OS: MacOS. big sur
    • Browser chrome
    • Version [Version 100.0.4896.75 (Official Build) (x86_64)]

    Smartphone (please complete the following information)

    • Only Web

    Additional context

    N/A.

    Versions

    • Node: 16
    • NPM:
    • Yarn:

    Package manager

    • [ ] Yarn

    Plugin version

    • [ ] 1.4.x
    • [ ] 1.2.x
    • [ ] 1.0.x
    Reviewed by Anjgpt at 2022-04-13 12:36
  • 15. Feature: Proposed new implementation of DrawingManager, discovered issues with Shapes

    Is your feature request related to a problem? Please describe.

    I submitted the original Drawing Manager component, which mutated the shapes passed down into it. As this was an anti-pattern, it was refactored but this has quite badly broken its functionality. After looking at how the original Drawing Manager could be properly refactored, I have decided that it would be better to make it a simple wrapper and instead move the responsibility for actually managing the shapes up to the parent

    Describe the solution you'd like

    I propose that the Drawing Manager no longer actively manages the shapes, and simply wraps the Google Drawing Manager. The component would be set up the same way, and would still use <shape>Options and position props, but the shapes prop would be removed. The default slot would still be set up to allow you to provide your own drawing toolbar as it does now, but the deleteSelection event handler would be removed, leaving just the setDrawingMode handler. Instead of managing all the shapes internally, it would emit a created:<shape> event inside the overlaycomplete handler, and it would pass the key properties of the newly created shape up to the parent as payload in a way that could be used directly as parameters to the various gmap shapes controls. The parent would be responsible for the actual drawing of these.

    Describe alternatives you've considered

    I have looked at the use of a local array to maintain the shapes, however the effort to deep copy the prop data is significant and adds little value. In addition you would then have to set up deep watchers for every individual element of the shapes prop, and well as the prop array as a whole in order to detect additions and removals. And right now the prop doesn't even accept the gmap shape types.

    Far better to simplify and let the parent deal with the shapes completely.

    Additional context

    If the parent is going to deal with the shapes, then it will manage when a shape is selected, and when it is editable. This led me to uncover an issue with all the current shape components - none of them correctly handle being put into edit mode. Each shape will need to be set up so that it will correctly update its props if it gets edited in edit mode.

    Reviewed by davydnorris at 2022-04-03 23:18
  • 16. Bug: gmap-vue breaks in Nuxt unless defined as client side only

    Describe the bug

    A default install and configuration of gmap-vue into a Nuxt project as per the documentation will fail with the message "Document is not defined" when a page containing a map is displayed. This is due to the default Nuxt behavior of server side rendering, and the fact that the MapLayer component has a CSS style section in it.

    To reproduce

    Steps to reproduce the behavior:

    1. Create a new Nuxt project
    2. Add gmap-vue library, and create a plugin file as per the documentation
    3. Add the plugin and the transpile directive to nuxt.config.js as per the documentation
    4. Add a gmap-map component to a page
    5. Run the application. It will compile without error
    6. Navigate to the page containing the map.

    Expected behavior

    The map is displayed correctly

    Current behavior

    The page will not display and will show a "Document is not defined" error

    Screenshots

    N/A

    Desktop (please complete the following information)

    • OS: Windows
    • Browser any
    • Version 3.5.2

    Smartphone (please complete the following information)

    • Device: N/A
    • OS: N/A
    • Browser N/A
    • Version N/A

    Additional context

    The issue is fixed by specifying that gmap-vue is a client side plugin. This is done via the following in nuxt.config.js:

      plugins: [
        { src: '@/plugins/gmap-vue', mode: 'client' }
      ],
    

    The documentation on setting up in Nuxt should be updated to show this

    Versions

    • Node: any
    • NPM: any
    • Yarn: any

    Package manager

    • [X] NPM
    • [X] Yarn

    Plugin version

    • [X] 1.4.x
    • [X] 1.2.x
    • [X] 1.0.x
    Reviewed by davydnorris at 2022-04-03 03:08
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

May 25, 2022
Integrate Google Maps in your Vue application
Integrate Google Maps in your Vue application

vue-googlemaps Integrate Google Maps in your Vue application in a "Vue-way". This library is Work In Progress. More components will be available in th

Jun 27, 2022
A lightweight Google Maps plugin for Vue
A lightweight Google Maps plugin for Vue

x5-gmaps (Live Demo) This is a lightweight Google Maps plugin for Vue. Samples/examples/tutorials Tutorial creating a COVID Heatmap Address Autocomple

Apr 22, 2022
A set of composable components for easy use of Google Maps in your Vue 3 projects.

A set of composable components for easy use of Google Maps in your Vue 3 projects.

Jun 24, 2022
Reactive Vue 3 components for Google maps

Vue 3 Google maps Components Set of mostly used Google Maps components for Vue.js. Why this library exists? We heavily use Google Maps in our projects

Jul 3, 2022
Using Google Maps with Vue.js

stores-map Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Run

Apr 22, 2022
📍 Vue composable for Google Maps Places Autocomplete.

v-use-places-autocomplete ?? Vue composable for Google Maps Places Autocomplete. Though not a fork, this composable is fully inspired by react-google-

Jun 28, 2022
Yandex Maps Component for VueJS
Yandex Maps Component for VueJS

vue-yandex-maps Documentation: RU, EN Contributors ✨ Thanks goes to these wonderful people (emoji key): Wormaster ?? Nikitenko Andrey ?? Kamil ?? Alex

Jun 24, 2022
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Jun 25, 2022
Vue 2 components for Leaflet maps
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

Jun 22, 2022
Integrate Azure Maps in your Vue application

Vue Azure Maps Vue Azure Maps is a library for Vue.js that integrates Azure Maps. It offers several Vue components out of the box and supports custom

May 19, 2022
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes

Kirby Mapnotator Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes. Overview This plugin is completely free and publish

Jun 5, 2022
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.

Traveliko - Travel with Friends! You can create a room with your friends and travel in street view mode and navigate the map. The application basicall

Mar 3, 2022
a simple component to generate an static google map
a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

May 17, 2022
vue google map custom marker component
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

May 17, 2022
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Apr 11, 2022
Wrapper for vue-mapbox-geocoder

v-mapbox-geocoder ?? v-mapbox plugin for mapbox-gl-geocoder support. Setup First of all you need to install mapbox-gl-geocoder and v-mapbox. See v-map

Sep 18, 2021
Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.
Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Jun 28, 2022
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js

This extension is under development, it may take breaking changes. SVG Map Picke

Jun 13, 2022