Blurry marker for google maps in google chrome

Question

I am using google maps in my application. I have custom markers being shown and all looks fine on Firefox as you can see in this image

But then in chrome it is all blurry. The markers are blurry. Here you can see

I am adding makers like this

var marker = new google.maps.Marker({
    position: location.position(),
    map: map,
    draggable: drag,
    icon: getLocationMarker(loc),
    animation: google.maps.Animation.DROP
});

function getLocationMarker(loc) {
var icon = marker_icon_default;

if (!loc.organization().hasFancyMarkers()) // if the organization doesn't have fancy markers module
    return icon;

if (!loc.checkIfOrderHasRemainingAmount()) // if there is no remaining amount for the orders then we take the default icon
    return icon;

var hasTentativeMatches = loc.anyOrderHasPotentialMatches();

switch (hasTentativeMatches) {
    case true:
        icon = getIconWithTentativeMatches(loc);
        break;
    case false:
        icon = getIconWithoutTentativeMatches(loc);
        break;
}

return getImageMarker(icon);
}


function getImageMarker(icon) {
var image = {
    url: icon,
    // This marker is 40 pixels wide by 40 pixels high.
    size: new google.maps.Size(40, 40),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (15, 32).
    anchor: new google.maps.Point(15, 32),
    scale: 2
};
return image;
}

So basically chrome has tried to optimized google maps. They make a duplicate marker which you can see in the image below. The blurry one is the one I see and it is blurry because of the opacity is 0.01 on that one. The other is not visible at all. Hoping chrome will solve it soon.

Please provide a [mcve] that demonstrates the problem. – geocodezip Sep 07 '16 at 09:12 — geocodezip, Sep 07 '16 at 09:12

score 1 · Answer 1 · edited May 23 '17 at 12:22

You could try these css rules on the icons:

img.icon{  
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

but as far as I know, chrome has always had issues with scaling images. Firefox is considered to be quite a slow browser, which might have to do with why Firefox manages to render things more neatly.

The only solution I could tell you is to make sure the icons aren't scaled down. Make sure they are the right sizes and then avoid scaling them. (I personally use timthumb for this purpose, with PHP. You can still get images through javascript with it)

Then again, I might be wrong, I'm not a veteran. However, I'm at least 70% sure this is a browser thing which you can't really control.

Another thing you could try is the solution to this question: CSS transition effect makes image blurry / moves image 1px, in Chrome?

Other than that, this really is just trial and error. I'm quite sure there is no definitive "This'll do the trick!" option in general.

Thanks for response, I have made an edit to the post and I guess I found out what was the issue. — mohsinali1317, Sep 07 '16 at 09:43
ahhh alright. Whelp, this is quite often the case with google things. I hope it'll get fixed soon! Have had similar issues many times. — NoobishPro, Sep 07 '16 at 09:46

score 0 · Answer 2 · answered Oct 10 '17 at 15:58

0

in getImageMarker use not size: .. but

scaledSize: new google.maps.Size(xx,yy),

answered Oct 10 '17 at 15:58

djdance

3,110
27
33

Blurry marker for google maps in google chrome

2 Answers2