6

I was about to post this, then I figured it out. But I'll post it anyway for anyone else who needs it. The lesson learned is to use .ico files for custom marker images if you want them to work in IE. (As a side note, it's still not working right in Safari, but that is another issue.)

I've had an issue for a while now where Google Maps API V3 markers created using custom images do not display in IE or Safari. It works fine in every other browser I've tested, but most of our user base is still on IE so I need to get this fixed.

This is apparently a known issue (at least to Google), as indicated in this Google support thread: http://www.google.com/support/forum/p/maps/thread?tid=26db8fd040386548&hl=en

I'm wondering if anyone else has run into this issue or knows of a workaround for it?

Here's the js from a simple test page I created, which demonstrates this bug:

var map;
var latLng = new google.maps.LatLng(41.342, -84.932);

$(function() {
    var myOptions = {
        zoom: 17,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var newMarker = new google.maps.Marker({
        map: map,
        position: latLng,
        icon: 'images/active_point.png'
    });
});

The fix: I converted the image to active_point.ico and that worked just fine for IE. For some reason IE doesn't like my .png.

After some more research it appears that Safari must be handled as a special case because it does not seem to work with .ico OR .png marker images. I've only gotten .jpgs to work, which is annoying because they don't support an alpha channel.

Sean the Bean
  • 5,222
  • 5
  • 38
  • 40

5 Answers5

2

add metatag 

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

& this code to Google Api code

//google map custom marker icon - .png fallback for IE
var is_internetExplorer11 = navigator.userAgent.toLowerCase().indexOf('trident') > -1;

var marker_url = (is_internetExplorer11) ? 'IE-map-icon-location.png' : 'map-icon-location.png ';
Manoj Dharajiya
  • 41
  • 6
0

IE must want particular PNG files. Updating my dynamic icon source from the google api's sample apis.google.com fixed it:

 // new source of icons
 var iconnumber = 5;
 var imgsrc = "http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=" + iconnumber + "|00FF00|000000&.png";
 var img = new google.maps.MarkerImage(imgsrc);
Gennadii Saprykin
  • 4,505
  • 8
  • 31
  • 41
RobG
  • 53
  • 6
0

Another possibility is to add the property draggable = true to the markers:

 <ui-gmap-markers coords="'self'" icon="'icon'" options="{ draggable: true }">

Don't know why this solve the issue in IE, check this

Undo
  • 25,519
  • 37
  • 106
  • 129
Tres
  • 571
  • 1
  • 5
  • 19
0

Setting optimized: false when creating a custom Marker fixed the problem I was getting with .svg icons not appearing in IE.

See this link for more details Google Maps SVG marker doesn't display on IE 11

Tony Beasley
  • 1
  • 1
0

Another option is to use the MarkerImage class.

icon: new google.maps.MarkerImage('images/active_point.png');
Bryan Weaver
  • 4,455
  • 1
  • 29
  • 39