The map markers are nowhere to be found on the map when using Internet Explorer

Question

The map markers are nowhere to be found on the map when using Internet Explorer

Take a look at this code I wrote...

var styles = [
  {
    "featureType": "landscape",
    "stylers": [
      {"weight": 0.1},
      {"color": "#E7EDEF"}
    ]
  },
  ...
  {
    "featureType": "poi.park",
    "elementType": "labels",
    "stylers": [
      {"visibility": "on"}
    ]
  }
];

var map;
function initialize() {
  var centerM = new google.maps.LatLng(42.641185, 14.015790);
  var iconBase = window.location.origin + Drupal.settings.basePath + 'sites/default/themes/actomedia/img/';

  var mapOptions = {
    zoom: 15,
    center: centerM,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: styles,
    scrollwheel: false
  };        

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  // Map Marker & infoBox
  markerOpt = {
    map: map,
    icon: iconBase + 'puntoEnergy_map_ico.png',
    title: 'Punto Energy',
    animation: google.maps.Animation.DROP
  };
   markerPicasso = new google.maps.Marker($.extend({position: centerM}, markerOpt));

}
google.maps.event.addDomListener(window, 'load', initialize);

The map displays correctly in Chrome and Firefox, but the marker is not visible in Internet Explorer.
Does anyone know how to solve this issue?

I have tried removing the marker animation and checking for any syntax errors in the code, but the problem persists.

--- UPDATE! ---

In response to Anto Jurković's question, I attempted to print the icon URL and discovered a bug where window.location.origin returns as undefined for me.

To resolve this, I added the following code snippet at the beginning of the JavaScript file (source):

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

javascript google-maps internet-explorer google-maps-api-3

Answer 1

Answer №1

Below is the function I am using to create a marker:

createMarker(Map, legs[i].start_location, legs[i].start_address, markerletter);

function createMarker(map, latlng, html, color) {       
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        shadow: iconShadow,
        icon: getMarkerImage(color),
        shape: iconShape,           
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    //marker.myname = label;
    google.maps.event.addListener(marker, 'click', function () {
        //Set Infowindow Logic
    });
    return marker;
}

Javascript

function initialize() {
    var Lattts = document.getElementById('lat').value;
    var Longgs = document.getElementById('long').value;    

    var myLatlng = new google.maps.LatLng(parseFloat(Lattts), parseFloat(Longgs));
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
        center: myLatlng,
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options)

    var icon = {            
        url: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png'
    };

    var contentString = 'Contents';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: icon,
        zIndex: Math.round(myLatlng.lat() * -100000) << 5,
        animation: google.maps.Animation.DROP
    });

    //marker.setAnimation(google.maps.Animation.BOUNCE);

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    });

        setTimeout(function () { marker.setAnimation(google.maps.Animation.BOUNCE); }, 2000);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

Answer 2

Below is the function I am using to create a marker:

createMarker(Map, legs[i].start_location, legs[i].start_address, markerletter);

function createMarker(map, latlng, html, color) {       
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        shadow: iconShadow,
        icon: getMarkerImage(color),
        shape: iconShape,           
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    //marker.myname = label;
    google.maps.event.addListener(marker, 'click', function () {
        //Set Infowindow Logic
    });
    return marker;
}

Javascript

function initialize() {
    var Lattts = document.getElementById('lat').value;
    var Longgs = document.getElementById('long').value;    

    var myLatlng = new google.maps.LatLng(parseFloat(Lattts), parseFloat(Longgs));
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
        center: myLatlng,
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options)

    var icon = {            
        url: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png'
    };

    var contentString = 'Contents';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: icon,
        zIndex: Math.round(myLatlng.lat() * -100000) << 5,
        animation: google.maps.Animation.DROP
    });

    //marker.setAnimation(google.maps.Animation.BOUNCE);

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    });

        setTimeout(function () { marker.setAnimation(google.maps.Animation.BOUNCE); }, 2000);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

The map markers are nowhere to be found on the map when using Internet Explorer

Answer №1

Similar questions

Disabling `no-dupe-keys` in ESLint does not seem to be effective

Angular event triggered when updating input values from the model

Issue with CasperJS: The function this.waitForUrl is not defined and is causing an error

Determine the presence of an image by using a wildcard in the URL

Cobalt does not reflect changes in React components when the component's state is updated

Utilizing jQuery for interacting with iframes

Encountering an error when using JSONP with a period in the callback function

Having trouble with the postcss-import grunt plugin?

Using Javascript to map an array with objects from a different array and then returning the computed array

Converting Numbers into Words with the power of HTML and JavaScript

Tips for Saving JSON Response from Fetch API into a JavaScript Object

Saving changes to mesh vertices in r67 of Three.js

Tips on resolving JavaScript's failure to adjust to the latest HTML inputs

Failure to successfully transmit data from Ajax to PHP script

Customize the formatting of linked locale messages in Vue's internationalization (i18n) feature using parameters

The method piSession.buildPageInteractionSession is not valid

The Ajax query returned a successful response, yet it unexpectedly triggered an error

Currently dealing with a script that utilizes AJAX GET to incorporate JSON data into my table

Python script used to extract data from Vine platform

To display a pattern with a series of alternating addition and subtraction operators, starting from -1 and ending at n, use JavaScript to iterate through the numbers and implement the pattern -1+