npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@busability/vue2-gmap-custom-marker

v1.0.2

Published

vue 2 google map custom marker component allowing display custom html content on google map using @busability/vue2-google-maps

Downloads

4

Readme

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 Google Map V3 overlay code sample with some great ideas from angularjs google map from this component.

Manual package publishing on NPM registry

This should be avoided - there is an automated workflow which will publish a new version of the package on every push to main branch.

npm login # using your own credentials
npm publish --access public

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 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 @busability/vue2-gmap-custom-marker

Basic Usage

Import the component and use it in the components object.

import GmapCustomMarker from '@busability/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 "@busability/vue2-google-maps/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