eregnier / vue2-gmap-custom-marker Goto Github PK

when I change the position values of the markers they do not move on the map.
Do you know if I am missing something? like triggering an event?

Unfortunately component make true. but place always is center of map.
i think something is wrong with find coordinate to show marker

why cannot redraw/update marker when marker data change?

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!

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

I'm using a computed property to change the selected-state of a marker.
I also change the z-index so the marker comes on top of the other markers.

I have tracked the issue to somewhere around line 68-70.
A simple check fixes the problem:

zIndex(val) {
if( this.$overlay )
this.$overlay.repaint()
}

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 ?

NPM return following errors when i try to install the package:

npm ERR! Unexpected end of JSON input while parsing near '...n":"5.2.0","dependenc'
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/robin/.npm/_logs/2019-10-10T10_25_38_107Z-debug.log

Does your library support marker rotation?

rotation attribute

<gmap-custom-marker :marker="{lat:selItemCar.position.lat,lng:selItemCar.position.lng}">
  <template>
    <div class="itemCarMarker">
      <div class="plakaPopup">{{ selItemCar.serial }}</div>
      <div class="popupImg"></div>
    </div>
  </template>
</gmap-custom-marker>

Hello,
I'm trying to add this component, but I have a problem.
When I try to add it, I receive
"Uncaught TypeError: Cannot read property '$validator' of undefined
at mergeData (app.js:2936)
at VueComponent.mergedDataFn (app.js:2969)
at initProvide (app.js:5427)
at VueComponent.Vue._init (app.js:6429)
at new VueComponent (app.js:6598)
at createComponentInstanceForVnode (app.js:6110)
at init (app.js:5931)
at createComponent (app.js:7408)
at createElm (app.js:7355)
at createChildren (app.js:7482)
"
Could you help me please?

I think this is mistake, GmapMarker support animation!

Hello,

I am using custom markers with @click event which opens a popup div box.
It is working fine but if the marker is close to the map edges, the div box goes off screen.

Here's what the parent div looks like:
Is there a way to detect whenever the p

<div
  ref="map"
  class="map-wrapper"
>
  <gmap-custom-marker
      :marker="setMarker(pin.lat, pin.lng)"
      :class="{addzIndex : pin.id == selectedId}"
  >
  
      <div
        :ref="'marker_el_'+pin.id"
        class="mapmarker"
        tabindex="0"
        @click="toggleBox(pin.id)"
      >
        <div class="price">
          <span class="text">
            €{{ pin.text }}
          </span>
        </div>
        <div
          v-if="selectedMapListing == pin.id"
          class="box"
        >
          <div v-if="pin" class="thumbnail">
            .....
          </div>
          <div class="detail">
            .....
          </div>
        </div>
      </div>
  
   </gmap-custom-marker>
</div>

So lets say a marker is close to the edge of the map and click on it, the box will go off the screen (off the map).
And I have to drag the map in order to see the box.

Is it possible to check somehow when we are on the edges and prevent the box from going beyond it?

Thanks for the help (and for the plugin)

As of 5.5.10, all of my markers are appearing about 50% of the map's width to the right of where they are supposed to be. I'm not sure if it's to do with the relative positioning of other parent elements, but the issue is fixed if I replace the transform with top and left.

This is without any set offset for the markers, just the position is set.

https://gph.is/g/ZkRXPNp
Other google maps items getting activated on click.
This issue didn't happen when I used the normal marker.
It cancel out my info window and opens a google maps info window instead.

            <gmap-custom-marker
                class="cursor-pointer px-3 py-2 bg-white shadow-lg rounded"
                v-for="(item, i) in state.items"
                :key="i"
                :title="item.listing_name"
                :position="item._geoloc"
                :clickable="true"
                @click.native="toggleInfoWindow(item, i)"
                :marker="item._geoloc"
            >
                <div class= "font-semibold text-green-500 text-md">
                    {{ item.code }}
                </div>
            </gmap-custom-marker>

These the cordinates that are causing me problems

POINT (21.031188 52.228312)

Basically when I click icon it closes the infowindow and opens the google map own infowindow of a nearby area.

            <gmap-info-window :options="infoOptions" :position="infoWindowPos" :opened="infoWinOpen" @closeclick="infoWinOpen=false" >
                <listing-summary
                    :auth="auth"
                    :item="infoContent"
                    :key="infoContent.id"
                ></listing-summary>
            </gmap-info-window>

       data() {
            return {
                zoom: 13,
                infoContent: [],
                infoWindowPos: {lat:0,lng:0},
                infoWinOpen: false,
                currentMidx: null,
                infoOptions:{pixelOffset: {width: 0, height: -35}},
            };
        },
        methods: {
            toggleInfoWindow: function (item, idx){
                this.infoWindowPos = item._geoloc;
                this.infoContent = item;
                if(this.currentMidx == idx)
                {
                    this.infoWinOpen = !this.infoWinOpen
                }
                //if different marker set infowindow to open and reset current marker index
                else
                {
                    this.infoWinOpen = true;
                    this.currentMidx = idx;
                }
            }
        },

Hi there,
I'm trying to add your interesting component, but I have a problem and I cannot understand why.
When I try to add it, I receive

"[Vue warn]: Error in nextTick: "TypeError: to is undefined"

And, at the end, this one

onAdd CustomMapMarker.vue:108 eu.prototype.draw https://maps.googleapis.com/maps-api-v3/api/js/34/10/intl/it_ALL/overlay.js:4:383 fu.prototype.Ob https://maps.googleapis.com/maps-api-v3/api/js/34/10/intl/it_ALL/overlay.js:5:175 vt https://maps.googleapis.com/maps-api-v3/api/js/34/10/intl/it_ALL/map.js:37:364 yt/< https://maps.googleapis.com/maps-api-v3/api/js/34/10/intl/it_ALL/map.js:38:346

Did you encounter this issue before?
Could you help me please?

Thanks in advance

The title says it all. I have a bunch of markers that I render using v-for="marker in markers" where markers is a computed property.

Whenever the computed property changes, the old markers don't disappear. Only new markers are added, which is not how it should be. This did work properly when I was still using the original gmap-marker.

After further debugging I see it has to do with gmap-cluster. When I don't use gmap-cluster anymore then it works as expected. But according to the readme, these custom markers should also work with gmap-cluster right?

Found an issue mapping a custom marker with latitude 0 and longitude 0.
With that coordinates the marker is always displayed on the center of the viewport, whatever position that is.
Looking at the source code it seems to me that the issue is due to this code:

    lat() {
      return parseFloat(this.marker.lat || this.marker.latitude);
    },
    lng() {
      return parseFloat(this.marker.lng || this.marker.longitude);
    },

this.marker.lat (or this.marker.lng) should not be used to check if the prop is available, because when it's 0, it will return false.
A check like typeof this.marker.lat === 'undefined' should be used instead.

Getting this error

Compiled with problems:

ERROR in ./node_modules/vue2-gmap-custom-marker/node_modules/gmap-vue/dist/main.js

Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\[my name]\Documents\GitHub\BG-Kala-School-Web-App\node_modules\vue2-gmap-custom-marker\node_modules\gmap-vue\dist\main.js'

My problem is that it takes too long time to render,

• With vue2-gmap-custom-marker, it takes 2 minutes to complete
  

• But with vue-google-maps marker It only takes 10 seconds to complete
  

Do you have any way to speed up the display when I use vue2-gmap-custom-marker, please let me know.

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.

So I have a cluster of markers on the same position and I need to know at least the ids of each marker inside the cluster. I didn't find any prop to add additional info like a title to the marker so I can get it later when I click the cluster, did I miss something or there is a way to do it?

Sometimes on create and/or destroy, the library is throwing repaint error specified in title, as it's called inside setTimeout and by the time it's called $overlay does not exist anymore.

this.$overlay = new Overlay(map);
setTimeout(() => {
    this.$overlay.repaint(); // line: 150
    this.opacity = 1;
}, 100);

Quick fix available in #24

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.

I try install cluster but dont work, numbers works fine

Marker havent drag event

Hello,

Thanks for a nice and useful module!
My issue is probably related to SSR rendering in Nuxt. Yet I don't quite understand, why it happens.

1. I load a page with the map. Say, http://localhost/place-search/. All markers positions on the map are correct
2. I navigate to another page, say http://localhost/place-search/place
3. I navigate back to http://localhost/place-search/. Now the markers are misplaced. If I hover the map or markers, markers return to the correct places.

I tried different ways of fixing it in the app (refreshing map and markers, hardcoding marker width and height in HTML markup, etc.), but nothing did work. I found the issue is related to repaint() method, where we have a check of offsetWidth and offsetHeight of the marker element. On step 3 both offsetWidth and offsetHeight are equal to 0. This is the reason why the markers are misplaced.

One way would be to disable position calculation in repaint() with an extended check if (projection && div && div.offsetWidth && div.offsetHeight), but I'm not sure if it makes sense in 100% of cases. How about a prop that activates this check, e.g. nuxtMode? I could make a pull request.

Or is there any better solution than the one proposed?

P.S. Unfortunately, I can't share code and examples, because the code I develop is proprietary.

TypeError: this.$mapPromise.then is not a function

i use your npm package had same error

can you help me ?

Hello,

I am currently working on a project built with require.js and I have tried to get the vue2-gmap-custom-marker component from unpkg instead of npm. Unfortunately, when I try to get the package from https://unpkg.com/vue2-gmap-custom-marker, gets the .vue part instead of the compiled version!

Any ideas or fixes on this? I could really appreciate it if this awesome tool was available through unpkg.
Thanks in advance!

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

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

If I update the zIndex prop after the marker has been mounted, it doesn't reflect the update on the map. I'd love to be able to send specific markers to the front or back when there is some overlap.

There's a draggable prop & dragend event for the default gmap-marker in the other repo, there's no example of draggable or dragend for markers using this lib ?

https://github.com/eregnier/vue2-gmap-custom-marker/blob/master/gmap-custom-marker.vue#L152

:O

I think this is mistake, can not animation marker. I am using marker to tracking car on map. Please add this feature

When marker is displayed and z-index prop gets changed, the marker doesn't respect the change. I think the solution is to add watch (similar to the one for watching position changes) and call repaint when z-index prop changes.

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.

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

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().

how can i use hover instead of click

Package version ^6.0.0

Version 5.6.2 working ok!
In my nuxt config:
{ build: { transpile: [ /^element-ui/, /^vue2-google-maps($|\/)/, "vue2-gmap-custom-marker" ] } }

Hi.

After playing with your library for a while I realized that the markers do not stay at the same place on map. I was wondering why and realized that it happens because projection.fromLatLngToDivPixel returns incorrect object. There's probably been an update and it does not accept the object you're passing.

So, I edited that to pass LatLng object and it seems to be working properly. PR is available here

Hello, As the map approaches, the markers “jump” a bit, as if “are shaking” around the position :)
That the problem?
My code:

                <gmap-custom-marker
                    v-for="(item, index) in markers"
                    :key="index"
                    :marker="item.position"
                    @click="locale=item.position"
                >
                    <div class="google-map-marker">
                        <div class="google-map-marker-holder">
                            <img
                                v-if="item.image"
                                :src="item.image"
                                alt="image"
                                class="google-map-marker-image"
                            >
                        </div>
                        <p
                            v-if="item.name"
                            class="google-map-marker-text"
                        >{{ item.name }}</p>
                    </div>
                </gmap-custom-marker>

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.

Hi, can you provide the source code from the demo on https://eregnier.github.io/vue2-gmap-custom-marker/dist/