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.