Icon Alignment Off

[chrishough]

I have encountered an odd issue with icon alignment. I can adjust it here:

// Implement draw
MarkerLabel.prototype.draw = function() {
    var projection = this.getProjection();
    var position = projection.fromLatLngToDivPixel(this.get('position'));
    var div = this.div;

    this.div.innerHTML = this.get('text').toString();

    div.style.zIndex = this.get('zIndex'); // Allow label to overlay marker
    div.style.position = 'absolute';
    div.style.display = 'block';
    div.style.left = (position.x - (div.offsetWidth / 2)) + 'px';
    div.style.top = (position.y - div.offsetHeight) + 'px';

};

but I know that is not right. Thoughts?

[fvgs]

Are you using version 3.0.1? Does this always occur? If not, can you identify any correlation between the bug occurring and the caching of the map-icons font?

[chrishough]

I am using master which looks like 3.0.0. Has 3.0.1 been published?

[chrishough]

Also, yes, it always occurs, however, I can not seem to find what is causing it.

[chrishough]

Safari and Firefox are both pretty bad...

[fvgs]

Based on the information provided so far, these symptoms match the bug I recently addressed in #35. If it's always occurring, that indicates the map-icons font is not being cached by your browser (this doesn't really matter).

This bug should be fixed as of 3.0.1. The current tagged release is 3.0.0, so if you're using bower, you should make sure to install the master branch.

[chrishough]

I installed master, however, I checked out your PR and did not see what was changed. In fact I copied the diff and I am still seeing the issue. What did you change to fix it?

[chrishough]

In order to fix this I added the following hidden preloader before the map call:

<div class="font_preload" style="opacity: 0"><span style="font-family: map-icons;"></span></div>

Noted here: http://stackoverflow.com/questions/1330825/preloading-font-face-fonts

[fvgs]

I looked into this and the bug had regressed for me as well. The original fix was to add a width property to the .map-icon-label class as seen in #36. The fix now was to add an additional display: block property to the same class so the width would take effect. I also increased the width, though that change was in the interest of future-proofing.

The best explanation I have for the regression is that the Google Maps API recently changed so that marker labels would no longer be block elements.

@chrishough With this fix, you shouldn't need to force-preload the font.

[chrishough]

That worked! Thanks @fvargas

[bojanvidanovic]

For me the fix was to add absolute position property to .map-icon-label