vue google map custom marker component

Last update: May 17, 2022

vue2-gmap-custom-marker

npm npm vue2

This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Google Map V3 overlay code sample with some great ideas from angularjs google map from this component.

/!\ important note

This project is originally a plugin for vue-google-maps. Now this project seems no more maintained and a maintained fork has started, As this is a fork, this plugin should work on it seeminglessly. The demo for this project started using this project on 2020-11-10. read this for more information about this.

For legacy projects using vue-google-maps, you have to stick to this projects tag 5.6.2.

You might force the 5.6.2 version in your package.json for this plugin to keep compatibility until you want to switch to gmap-vue.

For those that use clusters with this plugin, the new release might break things. For this plugin website demo, I had to create this folder that contains clusters images the clusters uses in vue-gmap. In case you have troubles with this, just create the same folder with the images from the link above in public foler of your vue project (or served in /images/m1.png for exemples depending on you webserver configuration.)

Demo

Demo

You might look at this demo code repository for features usage and complete exemple around this plugin.

Features

  • Display reactive custom html into markers on google map using slot system

  • Live property change allows simple interaction with coordonates and zindex of html marker element

  • Google map clustering support (see demo for exemple)

  • Simple positionning system for marker around the origin point

  • Specific markers offset X and Y for more control about html element display

  • Almost all API of the component is optional, just start with lon, lat property

  • Work (around) with nuxt with this trick

Example

custom markers on vue google map

Installation

Install the package from npm:

npm i vue2-gmap-custom-marker

Basic Usage

Import the component and use it in the components object.

import GmapCustomMarker from 'vue2-gmap-custom-marker';

export default = {
  [...],
  components: {
      'gmap-custom-marker': GmapCustomMarker
  },
  [...]
}

Use the custom marker inside the map component. Add HTML or other Vue components inside the custom marker to be rendered on the map.

<GmapMap>
  <gmap-custom-marker :marker="marker">
    <img src="http://lorempixel.com/800/600/nature/" />
    <my-component></my-component>
  </gmap-custom-marker>
</GmapMap>

<script>
export default = {
  [...],
  data() {
    return {
      marker: {
        lat: 50.60229509638775,
        lng: 3.0247059387528408
      }
    }
  [...]
}
</script>

Use the @click event with the .native modifier to bind a function to the clicking of the custom marker.

<GmapMap>
  <gmap-custom-marker
    :marker="{ lat: 50.60229509638775, lng: 3.0247059387528408 }"
    @click.native="someFunction"
  >
    <img src="http://lorempixel.com/800/600/nature/" />
    <my-component></my-component>
  </gmap-custom-marker>
</GmapMap>

Specify the alignment of the marker with the alignment prop. Accepts 13 values: top, bottom, left, right, center, topleft | lefttop, topright | righttop, bottomleft | leftbottom, bottomright | rightbottom. Defines the alignment of the marker relative to the lat/lng specified, e.g. bottomright - the marker will be below and on the right of the location.

<gmap-custom-marker
 :marker="marker"
 alignment="bottomright"
>
</gmap-custom-marker>

custom markers on vue google map

Manually specify an offset value for the marker in pixels with prop offsetX | offsetY. A positive offsetX moves the marker further right, and a positive offsetY moves the marker further down the page. Can be used with the alignment prop.

<gmap-custom-marker
 :marker="marker"
 :offsetX="-10"
 :offsetY="17.5"
>
</gmap-custom-marker>

Clusters

This component supports cluster markers and works like normal vue gmap clusters (since v5.4.3)

You can use cluster marker folowing the guide below:

  • Install marker-clusterer-plus : npm i --save marker-clusterer-plus

  • Use plugin cluster in you main.js or so (where vue and plugins are initialized)

// Using Cluster requires marker-clusterer-plus to be installed.
import GmapCluster from "gmap-vue/dist/components/cluster";

// Note: the name "cluster" below is the one to use in the template tags
Vue.component("cluster", GmapCluster);
  • Wrap your custom markers in the gmap component
<vue-gmap :center="markerCenter" :zoom="10" style="width: 100%" @click="onMapClick">
    <cluster>
        <gmap-custom-marker :marker="marker">
            <img src="https://vuejs.org/images/logo.png" />
        </gmap-custom-marker>
    </cluster>
<vue-gmap>

All markers into the cluster tag will be managed as a cluster automatically. That's all.

Reference

Prop Type Default Description Supported Values
marker Object null Provide the latitude and longitude values that the marker should be displayed at. Required Provide an Object with lat and lng properties. { lat: Number, lng: Number }
offsetX Number 0 The number of pixels to move the marker by in the x-direction. Postive values move the marker to the right Positive or negative number.
offsetY Number 0 The number of pixels to move the marker by in the y-direction. Postive values move the marker to down the page. Positive or negative number.
alignment String top The alignment of the marker element relative to the location it is displayed. e.g. bottomright - the marker will be below and on the right of the location. top, bottom, left, right, center, topleft lefttop, topright, righttop, bottomleft, leftbottom, bottomright, rightbottom
zIndex Number 50 z-index of the marker. Positive number.
cssPosition Boolean false Marker position computed using css. this can optimize render time, but can break layout true or false.

Licence

MIT

GitHub

https://github.com/eregnier/vue2-gmap-custom-marker
Comments
  • 1. Importing GmapCustomMarker not working

    Hello!

    I am trying to use a Vue component as a map marker on a Vue2 Gmap. I used the method described in the docs to import the feature but when I try to import it like so:

    import GmapCustomMarker from 'vue2-gmap-custom-marker';
    
    export default = {
      [...],
      components: {
          'gmap-custom-marker': GmapCustomMarker
      },
      [...]
    }
    

    I get a syntax error and my code is not able to compile. I tried to import it in the same way that the regular GmapMarker is imported:

    import {GmapCustomMarker} from 'vue2-gmap-custom-marker';
    Vue.component('GmapCustomMarker', GmapCustomMarker);
    

    but the export was not found. Is there any other way I can successfully implement this on my project?

    Thanks in advance!

    Reviewed by blaiddyd at 2019-01-18 04:08
  • 2. Flickering of markers when you stop dragging the map

    Thanks for a nice plugin!

    However, I noticed there is some flickering of the custom markers when you stop dragging the map: https://codesandbox.io/s/4w642qo17w

    Any thoughts on how to fix that? I tried adding { trailing: false } to the debounce which fixed it, but it causes issues when you programmatically (re)center the map: custom markers are not being repositioned.

    Reviewed by davidkrijgsman at 2018-09-03 12:35
  • 3. Map click triggered on custom marker click

    Heya, really cool plugin. Thanks!

    I'm running into a little problem where my map click handler is called then i click a marker. This worked on the normal maps markers but after switching to your custom marker lib Im getting this.

     <GmapMap
            :zoom="13"
            :center="mapCenter"
            :options="mapOptions"
            map-type-id="terrain"
            ref="gmap"
            class="google-map"
            @click="clearSelection()"
          >
            <GmapCustomMarker
              v-for="(marker, index) in markers"
              :key="index"
              :marker="marker.latLng"
              :offsetY="marker.eta ? 20 : 0"
              alignment="center"
              class="marker"
              @click.native="onMarkerClicked($event, marker)"
            >
              <!-- <GmapMarker :options="markerOptions(marker)" @click="onMarkerClicked($event, marker)"/> -->
              <img :src="markerOptions(marker).icon">
              <div v-if="marker.eta" class="marker-label">
                <span>{{ marker.eta }}</span>
              </div>
            </GmapCustomMarker>
          </GmapMap>
    

    I tried event.preventDefault(); on the marker handler, but thats not working :-)

    Any idea on how i should approach this?

    Kind regards

    Reviewed by markmooibroek at 2019-06-09 10:04
  • 4. vue-google-maps is no longer maintained

    Hello, This project is a plugin for vue-google-maps which unfortunately is no longer maintained. This fork: gmap-vue is active though. In my project I use gmap-vue and vue2-gmap-custom-marker together. It seems to work, but vue2-gmap-custom-marker installs vue-google-maps as a dependency.

    Could vue2-gmap-custom-marker depend on gmap-vue instead ?

    Reviewed by ethiry at 2020-11-03 08:00
  • 5. Markers position not refreshing

    Hello! I'm using custom markers and I'm trying to refresh the position every X seconds, currently I've faked it with a timeOut like this:

    <template>
    <div>
      <GmapMap
        :center="center"
        :zoom="8"
        style="width: 100%; height: 600px"
        >
        <gmap-custom-marker 
            :key="vehicle.id"
            v-for="vehicle in vehicles"
            :marker="vehicle.position"
        >
            <div class="vehicle-marker">
                <img :src="vehicle.avatar" />
            </div>
        </gmap-custom-marker> 
    </GmapMap>
    </div>
    </template>
    
    <style lang="scss">
    
    .vehicle-marker {
        img {
            width: 64px;
            display: block;
        }
    }
        
    </style>
    
    <script>
    export default {
        layout: 'default',
        data() {
            return {
                center: {lat:41.385063, lng:2.173404},
                vehicles: [
                    {
                        id: 1,
                        avatar: '##',
                        position: {
                            lat: 41.385063,
                            lng: 2.173404
                        }
                    },{
                        id: 2,
                        avatar: '##',
                        position: {
                            lat: 41.930290,
                            lng: 2.254350
                        }
                    }
                ]
            }
        },
        mounted() {
            setInterval(function () {
                this.vehicles.forEach(vehicle => {
                    var newLat = vehicle.position.lat += (Math.floor(Math.random() * 11) >= 6) ? 0.005 : -0.005
                    var newLng = vehicle.position.lng += (Math.floor(Math.random() * 11) >= 6) ? 0.005 : -0.005
                    console.log('Vehicle', vehicle.id, newLat, newLng)
                    vehicle.position.lat = newLat
                    vehicle.position.lng = newLng
                });
                }.bind(this), 2000)
        }
    }
    </script>
    

    This code works with default markers but custom ones seems not to refresh, it's maybe because I'm using Nuxt.js? I'm importing the library with a plugin and ssr: false to avoid errors

    Reviewed by polsola at 2019-11-25 17:19
  • 6. Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node'

    Just updated to v5.0.1 to stop the flickering of icons, works perfectly so thank you for that.

    However, I'm now getting an error that did not occur when on v3.0.2: [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

    Part of my code includes filtering the icons that are on the map. When I update this filter I get the above error thrown. Presumably is therefore an issue with removing and adding custom markers.

    Thanks for any help and let me know if you need to see some code.

    Reviewed by ColossalPercy at 2018-09-20 15:03
  • 7. Duplicate markers on the map.

    Hello! I have problem with duplicate markers on the map.

    My code very simple. <GmapMap ref="gmap" :center="center" :zoom="zoom" style="width: 100%; height: 100%"> <cluster> <gmap-custom-marker v-for="marker in markers" v-bind:key="marker.id" :marker="marker.pos" >...<gmap-custom-marker></cluster></GmapMap>

    I tryed to add check for marker existence (check by isAdded props in inst object) in afterCreate function and this fix my trouble.

    Can you add this check in code or do you have some explanations why I have duplicates?

    Thank you in advance.

    Reviewed by barkovskiy at 2020-03-12 11:58
  • 8. Fix removal of marker when using gmap-cluster

    This fixes #31

    Please merge and create a new release. I need this quite soon.

    Edit

    Never mind, it's still really buggy. Can you maybe try to bugfix this?

    Reviewed by Evertt at 2019-10-21 15:27
  • 9. Warning displayed when switching routes

    We're currently getting a warning when we switch between routes that include maps with custom markers:

    [Vue warn]: Error in destroyed hook: "TypeError: Cannot read property 'setMap' of undefined"
    
    found in
    
    ---> <GmapCustomMarker> at node_modules/vue2-gmap-custom-marker/gmap-custom-marker.vue
    
    Reviewed by nuudles at 2019-03-31 17:12
  • 10. Making this library for vue3-google-map

    Thank you for making this amazing package, the demo looks great. Would you be able to make the same component for vue3-google-map? https://github.com/inocan-group/vue3-google-map thank you

    Reviewed by web-programmer-here at 2022-02-17 01:05
  • 11. zIndex

    Hello,

    First of all, thank you for such a great component.

    I was wondering if it's possible to adjust the z-index of the gmap-custom-marker to be on top of regular map-info-window? As I Have an issue with gmap-custom-marker not being the top-most level.

    I have a polygon map as a background (each polygon is clickable) and gmap-custom-marker is clickable through when I click on it.

    image

    Reviewed by RamanSel at 2020-06-11 19:50
  • 12. incompatibility with [email protected] cluster and custom marker

    How can I use vue2-gmap-custom-marker with last version of gmap-vue? If I insert the custom marker into gmap cluster it doesn't work. The problem seems to be the costructor of the marker. The cluster used in the new version of the gmap-vue wants mmarker as google marker instance and invoke some methods like getLatitude().

    Reviewed by alebacca89 at 2022-04-20 16:43
This component allows you to display custom HTML content on the map using Overlay
This component allows you to display custom HTML content on the map using Overlay

vue3-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an update (a fork) from e

Apr 1, 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
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Feb 12, 2022
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

May 10, 2022
Baidu Map components for Vue 2.x
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

May 24, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

May 19, 2022
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]
New Sayobot Map Downloader Written by Electron@12, Vite@2, Vue@3

SayoDownloader This software only provide in Chinese! 一个全新设计的小夜地图下载器

Feb 20, 2022
Web map Vue 3.x components with the power of OpenLayers
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

May 26, 2022
A set of Vue.js components to display an interactive SVG map

vue-svg-map A set of Vue.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save vue-s

May 26, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

May 19, 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

Apr 8, 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

Apr 24, 2022
Kartobuilder - a php package for the laravel framework that works with the inertia jetstream stack to build your own map

Kartobuilder is a php package for the laravel framework that works with the inertia jetstream stack to build your own map.

May 3, 2022
🗺 Map Module for Nuxt 3

@nuxtjs/map Map module for Nuxt ✨ Release Notes ?? Read the documentation Features Nuxt 3 ready Easy integration with Google Maps & Leaflet Use only t

May 1, 2022
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

May 24, 2022
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 10, 2022
A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

May 14, 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
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

Apr 10, 2022