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

The response is dispatched without delay and does not necessitate awaiting

The validation for the start and end dates in the datepicker is not functioning properly when

Transmission of JSON to a C# controller via AJAX results in a Count value of zero in .NET 7

The response from a jQuery ajax call to an MVC action method returned empty

While the Navbar component functions properly under regular circumstances, it experiences difficulties when used in conjunction with getStaticProps

React - The `component` prop you have supplied to ButtonBase is not valid. Please ensure that the children prop is properly displayed within this customized component

Axios removes the async functionality

Exploring the power of Google Charts in conjunction with PHP arrays

Having trouble retrieving the $scope value in HTML, even though it was assigned within the success function of $http.post

node.js experiencing crashing following loop iteration

JavaScript, PHP handlers, and CommentBox all work together seamlessly to create

Utilize a fluid AJAX endpoint for the Vue Select2 encapsulated component

What is the best way to track and display the window.scrollY value in the console using Next.js

I'm struggling to grasp how to effectively utilize a JSON Object in this situation

Is there a way to customize the animation for a button in material UI?

Instructions for transferring a JavaScript array to a Java servlet

Price Adjuster Tracker

Chart.js encounters difficulties displaying the chart due to the data in reactjs

Utilizing prerender.io with lazy loading in Angular 2: A comprehensive guide

Explore nested arrays and retrieve objects that have corresponding categories