Brandon Muise Brandon Muise - 5 months ago 36
Javascript Question

Pixelated Markers only in IE11

I'm using Gmaps plugin on google maps. Take a look at the code below and the explanation. I've tried many possible answers but nothing seems to work.

var facility = new google.maps.MarkerImage("facility-pin.png", null, null, null, new google.maps.Size(28,28));

map.addMarker({
lat: 50.445619,
lng: -104.708681,
title: 'Marker with InfoWindow',
icon: facility,
optimized: false,
animation: google.maps.Animation.DROP,
});


This code places a marker at the right location and instead of the typical google marker, it's my custom pin. The original image size is 1000px x 1000px. The issue I'm having is with the line "optimized: false". When I open this on Google Chrome. the icon looks like the image below (what I want):

enter image description here

But if I open this map on Internet Explorer 11 the pin is all pixelated like this:

enter image description here

I don't understand why it's doing this. I originally had the icon all pixelated on Google Chrome but adding the optimized line fixed it. Unfortunately it didn't fix the issue on IE11. Does IE read the code differently or is there a code I'm missing? I tried looking through the documentation but couldn't find any solutions. Has anyone had similar issues?

TYIA

Answer

I've solved the issue. The line below is what I was using but I converted the facility-pin.png to an SVG file and it works perfectly. So apparently IE11 doesn't listen to the "optimized: false" line but can scale down SVG without a problem.

var facility = new google.maps.MarkerImage("facility-pin.png", null, null, null, new google.maps.Size(28,28));