Search code examples
javascriptgoogle-mapsopenlayers-3ol3-google-maps

ol.Map not a function to Safari and map not displaying in IE11

I've got a map (see code below) OpenLayers3, using the ol3-google-map library, that displays the map correctly in both Firefox and Chrome without any kind of error. But, where I try to run it on IE (and it HAS to run on IE as well), i got this error:

The object cannot handle property or method "map" (translated from french so not exactly that message).

I havent seen this error in any post, that's why i'm looking for a little bit of help, considering i'm new to OpenLayers3. I tried to run it on Safari as well and i got a different king of error (caught by a Try/catch block) which is:

TypeError: 'undefined' is not a function

This error pop right after the "new ol.Map". Here's my code.

var gmap,racine, proj_source,proj_carte;

function init(referentiel,longitude,latitude,modeModification,modeImpression) {
try{
proj_carte = "EPSG:4326";
proj_source = "EPSG:3857";
creerCarte();
} catch (exception1){
    console.log('ERROR1: '+exception1);
}
console.log('Map = '+gmap);
}

function creerCarte(){
try{
    var centre = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');

    var googleLayer = new olgm.layer.Google();
    console.log('GoogleLayer created: '+googleLayer);
    var osmLayer = new ol.layer.Tile({
      source: new ol.source.OSM(),
      visible: false
    });
    var source_v = new ol.source.Vector();
    var feature = new ol.Feature(new ol.geom.Point(centre));
    feature.setStyle(new ol.style.Style({
        image: new ol.style.Circle({
          'fill': new ol.style.Fill({color: 'rgba(153,51,51,0.3)'}),
          'stroke': new ol.style.Stroke({color: 'rgb(153,51,51)', width: 2}),
          'radius': 20
        })
      }));
    source_v.addFeature(feature);
    var vector = new ol.layer.Vector({
      source: source_v
    }); 
    gmap = new ol.Map({
        view: new ol.View({
        center: centre,
        zoom: 12
        }),
        layers: [googleLayer,osmLayer,vector], 
        target: 'divCarte', 
        interactions: olgm.interaction.defaults()
    });
    var olGM = new olgm.OLGoogleMaps({map: gmap}); // map is the ol.Map instance
    olGM.activate();
} catch (exception2) {
    console.log('ERREUR2: '+exception2);
}
}

I should add that i've found this example inside the library ol3-google-maps so it should be working just fine. Best regards.

EDIT: I've created the map on JSFiddle (LINK), but it wont display. First time i'm using it to be fair, i may be missing something even though i've link the required files and stuff. I'm using the version 0.6 from ol3-google-map but it's still in beta. Nevertheless, some guys have succeeded in creating a good map so I'm obviously doing something wrong. Here's a link of the map I'm seeing on both Google Chrome and Firefox: (LINK).

EDIT2: I havent been very precise on where the problem is located on IE. It happens on the loading of ol.js and the error is one the '.map' of this line:

Sc="EPSG:3857 EPSG:102100 EPSG:102113 EPSG:900913 urn:ogc:def:crs:EPSG:6.18:3:3857 urn:ogc:def:crs:EPSG::3857 http://www.opengis.net/gml/srs/epsg.xml#3857".split(" ").map(function(a){return new Lj(a)});
Solution

  • I got your application working on my side in both Internet Explorer and Safari.

    First, the error you got on Safari is about a missing native JavaScript function: requestAnimationFrame http://cdn.polyfill.io/v2/docs/features/#requestAnimationFrame.

    By including the polyfill service above in your page, you make sure that all the supposively native code is always available. To inlude it, add:

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

    in your page. See also the OpenLayers release notes.

    Then, the error I also got was due to the divCarte div not being available when the code executed. To fix this, you need to put either your code inside a function and call it when the dom is ready, or you can put it at the end of your body tag.

    Here's a copy of your index page (in which OLGM v0.6 has been downloaded and extracted in the same directory):

    <!DOCTYPE html>
<html>

  <head>
    <title>
      GoogleMap with OpenLayers 3
    </title>

    <link rel="stylesheet"
          href="http://openlayers.org/en/v3.16.0/css/ol.css"
          type="text/css" />
    <link rel="stylesheet"
          href="ol3-google-maps-v0.6/ol3gm.css"
          type="text/css" />

    <style type="text/css">
      .map {
        height: 400px;
        width: 100%;
      }
    </style>

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
    <script src="ol3-google-maps-v0.6/ol3gm-debug.js"></script>
  </head>

  <body>
    <h1> The Map </h1>
    <div id='divCarte' class='map'></div>
    <script src="main.js"></script>
  </body>
</html>

    I tested it in Chrome, FF, IE and Safari and the example loaded successfully.