Marker icon labels appear off-center on initial load

[fvgs]

Upon loading the page and the map, all of the icon labels are offset a bit to the bottom-right. The marker itself is fine.

I'm running OS X and this occurs on Chrome, Firefox, and Safari (most extremely offset on Safari). However, it does not occur on my Android phone using Chrome. Yes it does.

I've found that manually zooming in or out on the map will fix it and the icons will be centered inside the marker, even upon returning to the original zoom level. This likewise works if I zoom programmatically by calling map.setZoom(x) where x is a valid zoom level that is not equal to the current zoom level. The above block is true. But the real takeaway was that causing the map to reload fixed the issue (you'll see why below).

Nevertheless, the problem is that the icons initially appear offset and stay that way unless zooming is performed.

EDIT: Here's the rundown of what was actually going on. The icon font is loaded via css using @font-face. However, the browser does not actually fetch the font and "load" it until the browser finds it convenient to do so (probably when it notices the font is actually going to be used). This is problematic, because Google Maps wants to know (well in advance) how much space the icon label is going to take up when placed on top of the marker. The current map-icons.css specifies a line-height of 48px, so Google Maps can use that as a basis for the height the icon label will take up. But, Google Maps has no basis for guessing the width that will be taken up by the icon label. So naturally, it assumes it will be 0px. Thus, the offset at which the icon label was being drawn was based on the assumption that the icon label had a width and height of 0px x 48px. This explains why I was observing that strange offset.

Now, the things I crossed out above about zooming and it working on my phone are true. However, the reason those things were true is due to caching. When testing this in Chrome, I had caching disabled for the most part. So long story short, it took me a while to realize that this weird offset only occurred either when I had caching disabled, or when I hard-refreshed/visited the page for the first time. In other words, I eventually observed that whenever the font was cached, this issue did not occur. The reason being that, when the font is already cached and available, Google Maps can use the font information to figure out how much space the icon label will take up. Otherwise, Google Maps does not wait for the font to be fetched and just assumes a dimension of size zero if it has no information to go on.

Thus, I hope this explains what the fix in my PR does.

[fvgs]

Fixed this in #36

[chrishough]

I just started getting something similar in https://github.com/scottdejonge/map-icons/issues/39