This component allows you to display custom HTML content on the map using Overlay

Last update: Apr 1, 2022

vue3-gmap-custom-marker

npm npm vue2

This component allows you to display custom HTML content on the map using Overlay. This component is an update (a fork) from existing component for vue 2 to be usable with vue 3 with the vue3-google-map project

## This is beta plugin

it seems to work but some work but some adaptation from previous version remains to do to make it work properly.

Demo

COMING SOON

Demo

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

Features

  • Display reactive (:info: : reactive property seems to not work yet) 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 IS NOT supported yet by the vue3 gmap project yet but should be possible in the future or with some extra work on this project.

  • 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 (I don't know if this is still an issue with current version of nuxt and vue 3, this is information from vue2 plugin before fork) this trick

Example

custom markers on vue google map

Installation

Install the package from npm:

npm i vue3-gmap-custom-marker

Basic Usage

Import the component and use it in the components object.

import GmapCustomMarker from 'vue3-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>

// Click is not tested yet (and native too)

">
<GmapMap>
  <gmap-custom-marker
    :marker="{ lat: 50.60229509638775, lng: 3.0247059387528408 }"
    @click="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>

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.

Licence

MIT

Support

If you want to support this plugin it is possible 😄

paypal

GitHub

https://github.com/eregnier/vue3-gmap-custom-marker
You might also like...

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! 一个全新设计的小夜地图下载器

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

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

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

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

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

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

Jul 3, 2022

A Vue.js component for Mapbox GL JS

Mapbox GL JS Vue.js A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component. Demo Installation Setup Props Events Plugins Popups Development

Jul 5, 2022
Comments
  • 1. Works like a charm!

    This is amazing! thank you so much for this! I just tested it out and it works like a charm! I am facing one minor issue that older markers exist even after I clear them

    I have all my locations in an array of object locations

    const locations = ref([]);
    ....
    <gmap-custom-marker
        v-for="(location, index) in locations"
        :key="index"
        :marker="{ lat: location.lat, lng: location.lng }"
    >
       <img ... />
    </gmap-custom-marker>
    

    I update that array with button clicks to load new locations, but now old places exist on the map. Also console log I keep getting TypeError: this.$overlay is undefined, I will run more tests and maybe create a sandbox for testing.

    Again thank you for this amazing work! 🥇

    Reviewed by web-programmer-here at 2022-02-19 02:17
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

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

Jul 1, 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

Jun 21, 2022