0

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)});
3Doubloons
  • 2,088
  • 14
  • 26
glemaitre
  • 11
  • 6
  • Would you please create a live example, on JSFiddle maybe ? I'd be willing to help but if you could do this that would help me a lot. Also, please let us know what version you're using. OL3-Google-Maps is still under development. – Alexandre Dubé Jun 10 '16 at 15:41
  • Edited with a link to JSFidlle, but the map isnt showing. I have added a picture of the map i'm able to see on my site as well (on Firefox and Chrome). Thanks for your time! – glemaitre Jun 13 '16 at 10:15
  • FYI, olgm v0.6 includes OpenLayers v3.16.0. You don't need to load it separately. – Alexandre Dubé Jun 13 '16 at 13:48
  • I saw that on GitHub but if I dont include ol.js as well as olgm.js, i got the error saying "ol is not defined". – glemaitre Jun 13 '16 at 14:37
  • You said in your message that you use 0.6, but in JSFiddle you use 0.4. It's new to 0.6 that ol is included. 0.4 requires you to load ol separately. – Alexandre Dubé Jun 13 '16 at 14:55
  • Damn you're right. That's because i tried differents things to make it works on JSFiddle but originaly i was using the 0.6 that i've found in build/build.js instead of src/ol3gm.js that doesnt include ol3. – glemaitre Jun 13 '16 at 15:38

2 Answers2

1

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.

Alexandre Dubé
  • 2,769
  • 1
  • 18
  • 30
  • Thanks a lot mate, that's gonna be very helpful. I'm just getting started with both JS way of doing things and OpenLayers so i'm doing lots of newbie errors. Thanks for your time :) – glemaitre Jun 14 '16 at 07:11
  • Just one more thing, doesnt ol3gm.css include ol.css just as ol3gm.js contain ol.js? (in version>=0.6) – glemaitre Jun 14 '16 at 07:25
  • Nope, ol3gm.css doesn't include ol.css. You're welcome. – Alexandre Dubé Jun 14 '16 at 12:00
0

Actually my problem on IE came from a very different thing. The error i got came from a meta tag in the HTML head of my website. The old one was:

meta http-equiv="X-UA-Compatible" content="IE=7"

Probably because the website was first created a long time ago, and i changed it to:

meta http-equiv="X-UA-Compatible" content="IE=edge"

Everything works fine on IE now, i'm super happy. FYI, i found the solution on this post: HERE. Just putting it in my post in case someone encounter the same problem i have.

Cheers.

Community
  • 1
  • 1
glemaitre
  • 11
  • 6