All geek questions in one place

Custom Google Maps V3 Tokens Not Displayed in IE

I was going to publish it, then I figured it out. But I still send it to someone who needs it. A lesson learned is to use .ico files for custom marker images if you want them to work in IE. (As a note, Safari still doesn't work, but this is another issue.)

I had a problem for a while when the Google Maps API V3 markers created using custom images do not appear in IE or Safari. It works fine in every other browser I tested, but most of our user base is still in IE, so I need to fix it.

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

I am wondering if anyone else has encountered this problem or is aware of a workaround for this?

Here's the js from a simple test page I created that demonstrates this error:

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' }); });

Bugfix: I converted the image to active_point.ico and it worked fine for IE. For some reason, IE doesn't like my .png.

After several studies, it turned out that Safari should be handled as a special case, since it does not seem to work with .ico OR.png images. I just got a .jpg to work, which is annoying because they do not support the alpha channel.

+6
source share
5 answers

add metatag

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

& this code for 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 ';
+2
source

Another option is to use the MarkerImage class.

 icon: new google.maps.MarkerImage('images/active_point.png');
0
source

IE must have certain PNG files. Updating my dynamic icon source from google api apis.google.com fixed:

  // 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);
0
source

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

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

Not sure why this resolved the issue in IE, check this out

0
source

Setting optimized: false when creating a custom Marker fixed an issue that I encountered with .svg icons that did not appear in IE.

See this link for more details. Google Maps SVG marker not displayed in IE 11

0
source

Source: https://habr.com/ru/post/901311/

More articles:


All Articles