eregnier / vue2-gmap-custom-marker Goto Github PK
View Code? Open in Web Editor NEWvue google map custom marker component
License: MIT License
vue google map custom marker component
License: MIT License
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().
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?
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.
I think this is mistake, GmapMarker support animation!
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?
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.
http://localhost/place-search/
. All markers positions on the map are correcthttp://localhost/place-search/place
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.
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)
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.
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.
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
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
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);
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
TypeError: this.$mapPromise.then is not a function
i use your npm package had same error
can you help me ?
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>
Unfortunately component make true. but place always is center of map.
i think something is wrong with find coordinate to show marker
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>
how can i use hover instead of click
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!
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!
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!
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.
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;
}
}
},
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
Hi, can you provide the source code from the demo on https://eregnier.github.io/vue2-gmap-custom-marker/dist/
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.
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 ?
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.
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?
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
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.
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
I think this is mistake, can not animation marker. I am using marker to tracking car on map. Please add this feature
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
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?
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'
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.
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
why cannot redraw/update marker when marker data change?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.