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)});
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:
requestAnimationFramehttp://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:
in your page. See also the OpenLayers release notes.
Then, the error I also got was due to the
divCartediv 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 yourbodytag.Here's a copy of your index page (in which OLGM v0.6 has been downloaded and extracted in the same directory):
I tested it in Chrome, FF, IE and Safari and the example loaded successfully.