Markers getting duplicated via MarkerWithLabel (only)

[IvanCoronado]

I am working on this project.

I am overwritting defaults markers with labelClass. CSS is working fine but i am getting markers duplicated.

I have just 6 markers but if u check the console i am getting 12 markers, also one of them is getting 0.1 opacity without any reason.

The code is here and this link could be usefull.

[nmccready]

Actually you could probably easily write a spec against this in one of the markers specs doing the same thing you just did. I'll try to copy your controller and dig into this eventually. I will try to look at it this weekend.

[nmccready]

Yeah as you state this appears to be a bug with the labelMarkers plugin.

[nmccready]

BTW where is mapStyles.shades coming from? What module provides the service? nvm I see it in your hosted site.

[nmccready]

So anyway if you can find a better markerLabel library we can point curl.json or bower.json to that. Also we can modify MarkerLabel to not be global if needed and pulled in as a service.

But I myself do not have plans on fixing this.

[nmccready]

If you plan on doing work against this I can put it in the 2.2.3 milestone; or now (2.2.2) if you can do it in a few days .

[nmccready]

My suggestion is to copy this project as a template and port markerWithLabel to that. Then you can debug and have your on repo. I do not see where markerWithLabel has been ported yet.

[nmccready]

Here is one that might be worth it; https://github.com/jesstelford/node-MarkerWithLabel/commits/master looks like they might have fixed the issue too.

[IvanCoronado]

What MarkerWithLabel version are you using? Ok, nvm... https://github.com/angular-ui/angular-google-maps/blob/master/dist/angular-google-maps.js#L11337-L11337

[nmccready]

So if that new fork be @jesstelford is on bower or npm then we should reference that.

[IvanCoronado]

I hardcoded this commits https://github.com/jesstelford/node-MarkerWithLabel/commit/ca93914177ca644ba868d911e29539d9978b6a73 https://github.com/jesstelford/node-MarkerWithLabel/commit/5c355817a0bbd4c65dd7363e3bb328a9ed085803 on my bower components version of your library and i still have the bug. I even tried with http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/markerwithlabel/src/markerwithlabel.js and no way.

[nmccready]

Are you sure grunt is using it? The whole wrapping / injecting MarkeWithLabel expects that lib to be in certain places via grunt. So since your using a diff library you must update it.

[nmccready]

• Where curl components hey concated to
• then injected

Your going to need to understand the grunt if your going to fix this.

[IvanCoronado]

But you finally get this https://github.com/angular-ui/angular-google-maps/blob/master/dist/angular-google-maps.js My local is using that file, i can edit it. Am i wrong?

[IvanCoronado]

The bug is here:

I am getting a dom element attached to the icon marker and to the cross marker.

[nmccready]

Do you have a fork where you can show me lines of code?

[IvanCoronado]

Ok i found the problem, i will try to explain it in english :S

The problem is on the MarkerWithLabel library but really isn't a bug, its just an impossibility (with this library). If you check the library we see this comment. They are creating a div for the label and an "invisible" div (*) for handling mouse events...

• It isn't invisible

In conclusion, you can't use css hover because you are hovering the "invisible" div and if you try change color or anything else you won't see it because 0.1 opacity.

I just modified the library so i don't create invisible div anymore and also i intercept events with real label. Now it's working under my requirements.

[nmccready]

So should we use another fork of the library or not? Posting github line number is way more helpful then coping and pasting images btw.

[IvanCoronado]

You must choose between to hover labels by css or to capture events even if the label is in the shadow of a google.maps.InfoWindow.

Sorry i am a github noob, i will check how i can post line number.

[nmccready]

@IvanCoronado like this https://github.com/angular-ui/angular-google-maps/blob/master/src/coffee/directives/marker.coffee#L15

any file after #L15, means line 15 . Also when u look at the file just click to high light the lines. Hold shift and click to highlight many. Its all auto.

[IvanCoronado]

Ok if someone wants to style markers label with css hover just need change this lines on his .\bower_components\angular-google-maps\dist\angular-google-maps.js with this code.

[IvanCoronado]

Thanks you for all @nmccready :) You are doing amazing work with angular-google-maps directive. If you check my project now, the hover is working.

[nmccready]

Got you, like I said that is injected which I can fix. However, can your fork be created from jesstelford's as he has more fixes. Or better yet PR your fix to his repo. I would prefer you at least have his changes. Anyway it needs to be published to bower, npm, and tagged on git.

[nmccready]

Actually, I'll just fork his to my own repo. Then I'll merge your changes into his. Thus the fork being mine.

[IvanCoronado]

Ok, i can do it too if you want. (And you help me xD)

[jesstelford]

Ahoy!

@nmccready Feel free to open a PR against jesstelford/node-MarkerWithLabel if you like. If it's good quality, I'm also happy to give you commit rights.

Since I also have the npm package, I can then publish any new versions with bug fixes / enhancements :)

[nmccready]

Sweet thanks @jesstelford

[nmccready]

@IvanCoronado make the PR so you can get credit for the change. If I don't here back from you by COB ~1600 EST tomorrow I will do it over the weekend.

[nmccready]

@IvanCoronado it would be a lot easier to see your code differences if your initial commit to your project did not include your modifications. Now I must look at the code line by line to find the changes. Which honestly I do not have the time for.

NVM I see the commits in the feed now; was looking in the wrong spot.

Please fork @jesstelford project and then make the changes. Then PR to his fork. I am closing this until I get some feedback.

[IvanCoronado]

I did that I am waiting @jesstelford answer

[nmccready]

Apologies, got lost and frustrated in the feed; plus a screaming kid in the background ;) On Oct 25, 2015 13:43, "Ivan Coronado" notifications@github.com wrote:

I did that jesstelford/node-MarkerWithLabel#5 https://github.com/jesstelford/node-MarkerWithLabel/pull/5 I am waiting @jesstelford https://github.com/jesstelford answer

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/angular-google-maps/issues/1574#issuecomment-150947613 .

[IvanCoronado]

hehe no problem. I will notify you anyway.

[IvanCoronado]

Google library accepted my PR, https://github.com/googlemaps/v3-utility-library/tree/master/markerwithlabel/src Anyway the @jesstelford version is better choice i think.

[nmccready]

We should probabaly go with google's @jesstelford can you PR your updates to google as well?

[artuska]

I have the same issue — markers duplicates on map zoom — it happens when you set labelContent with the dynamically created element, e.g.:

var myDiv = document.createElement('div');
    myDiv.innerHTML = 'foobarbaz';

var markerConfig = {
        map: this.map,
        clickable: true,
        draggable: false,
        position: new google.maps.LatLng(this.coords.lat, this.coords.lng),
        labelAnchor: new google.maps.Point(0, 30),
        labelClass: 'gm-offer-marker',
        labelContent: myDiv,
        icon: {
            anchor: new google.maps.Point(0, 0),
            path: google.maps.SymbolPath.CIRCLE,
            scale: 0,
            fillColor: '#000000',
            fillOpacity: 1,
            strokeColor: '#000000',
            strokeWeight: 0
        }
    };

this.marker = new MarkerWithLabel(markerConfig);

If I set labelContent to a string or a number or an inline HTML (e.g. labelContent: '<div class="myClass">foobarbaz</div>') everything works perfectly, nothing duplicates on zoom.

[artuska]

I have updated Angular Google Maps to the latest 2.3.2 version, but MarkerWithLabel (which is included in Angular Google Maps by default) is still stuck at version 1.1.10, not the latest 1.1.13.

[nmccready]

@artuska feel free to use your computer skills to submit a PR and update the library.