When I load http://maps.google.com/maps/api/js?sensor=false in a script tag, everything works fine for me in Chrome, Safari, Firefox, and IE9.
However, when I look in IE9 in compatibility mode (or, I'm told, in IE8) the map does not load and "'google' is undefined" is logged in the console.
Here's the relevant code, with the line that is triggering the error identified with a comment:
<html>
<head>
<title>Test Map</title>
<script type="application/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas"></div>
<script type="text/javascript">
var lat=37.763154;
var lon=-122.457941;
var initialZoom=17;
var mapTypeId = 'Custom Map';
var mapStyle = [{featureType:"landscape", elementType:"all", stylers:[{hue:"#dae6c3"},{saturation:16},{lightness:-7}]},
{featureType:"road", elementType:"geometry", stylers:[{hue:"#ffffff"},{saturation:-100},{lightness:100}]}];
//**The error is tripped in this next line, again only in IE9 compatibility mode or IE8*
var styledMap = new google.maps.StyledMapType(mapStyle);
var mapType = new google.maps.ImageMapType({
tileSize: new google.maps.Size(256,256),
getTileUrl: function(coord,zoom) {
return "img/tiles/"+zoom+"/"+coord.x+"/"+coord.y+".png";
}
});
var map = new google.maps.Map(document.getElementById("map_canvas"),
{center:new google.maps.LatLng(lat,lon),
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:initialZoom,
mapTypeControl:false});
map.overlayMapTypes.insertAt(0, mapType);
map.mapTypes.set(mapTypeId, styledMap);
map.setMapTypeId(mapTypeId);
</script>
</body>
</html>
So, for some reason, and only in IE9+compatibility-mode and IE8, the script tag specifying http://maps.google.com/maps/api/js?sensor=false isn't loading and/or executing before the subsequent embedded script in the body.
Are others able to replicate? How do I correct this problem?
The problem, apparently, is that IE 8 doesn't grok "application/javascript". I changed it to "text/javascript" in the <script> tag in the <head> section and now my code works. And, of course, if I change it back to "application/javascript", then it stops working.
One guess is that you're page works over https while the request from Google is http.
convert the Google request to https and the error will disappear.
this worked for me.
See : Possible solution
My google maps v3 site stopped working in IE 9 compatibility view mode, IE 8 and IE7.
Reason: Error in java-script using jQuery only caught when using the IE F12 Developer tools to examine the script. Here is the offending line. The error was missing single quotes from the token, class.
$('<tr>', { 'class': country }).appendTo(tableSelector).append(h1).append(h2);
At first I pursued a false lead, thinking it was the addition of a key=
http://maps.googleapis.com/maps/api/js?key=MY_KEY_FROM_API_CONSOLE&sensor=false
The lesson is: use tools, Firebug or IE tools or whatever, to examine your javascript for introduced issues.
Make sure that IE isn't in offline mode. Sounds like the browser isn't connecting to the internet.
IE is downloading then attempting to execute the JS on your local machine, while the other browsers are simply opening it as a text file. You can find the downloaded JS from IE in wherever stuff downloads to by default.
EDIT: In light of updates, see this Fiddle to see a sort-of working fix. http://jsfiddle.net/h6rc3/
Related
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: 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.
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.
Is it possible to configure the erb page to detect IE version and based on that select different compatibility tags, so it should work as:
if user IE=10 then
< meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" / >
else
Please don't propose other solutions as I need exactly the logic I described.
We have an application which doesn't work in IE10 and all the solutions we tried don't work except and only with IE=EmulateIE9 it works.
Does the application work in IE11 or Microsoft Edge? If not, then you could force all Microsoft browsers to emulate IE9 using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">.
If you need to target IE10 specifically, then you should use feature detection, since IE10+ no longer supports conditional comments and user agent sniffing can be unreliable.
Here's a code snippet which identifies the browser by checking for version-specific CSS properties. It's a simplified version of a solution that I found here. I've tested it in IE9, 10, 11 and Microsoft Edge:
<!DOCTYPE html>
<html>
<head>
<title>Browser Detection</title>
</head>
<body>
<h1>Browser Detection</h1>
<h2 id="message"></h2>
<script>
var message = document.getElementById('message');
var browser = "Less than IE10 (or not IE at all)";
if (document.body.style['msTouchAction'] != undefined) {
browser = "IE10";
}
if (document.body.style['msTextCombineHorizontal'] != undefined) {
browser = "IE11 or higher";
}
message.innerHTML = browser;
</script>
</body>
</html>
The above snippet may not work for your purposes because the Javascript gets executed in the body, after the meta tags in the head have already been parsed.
I suppose you could trigger a page redirect for IE10+ browsers and add an argument to the URL, which would prevent the feature detection Javascript from executing the next time (you don't want to create an infinite loop). A quick example:
<script>
if (!document.location.search) {
if (document.body.style['msTouchAction'] != undefined) {
// Browser is IE10 or higher
window.location = "http://www.yoururl.com/?ie9mode";
}
}
</script>
An even better solution would be to store the result of the browser detection script in a session variable, so that you wouldn't need to append anything to the URL.
I hope this helps!
I am trying to attach an onclick event to an iframe that is in editable mode using the JavaScript and HTML code below. The code works fine in IE8, Safari, and Chrome, but does not work in Firefox or Opera. I have spent several hours doing some research, rewriting the code, and testing every idea that I can think of, all without success. So far, I have only been able to work out that line 8 might be the root of my problem. Can anybody tell me what I may be doing wrong and offer me any tips or code samples to help solve my problem? Any help would be appreciated.
Here is my code;
<html>
<head>
<script type="text/javascript">
function iFrameOn(){
document.getElementById("wysiwyg").contentWindow.document.designMode = 'On';
}
function iFrameEvent(){
document.getElementById("wysiwyg").contentWindow.document.body.onclick = function(){
alert('Hello world!');
}
}
</script>
</head>
<body onload="iFrameOn()">
<iframe name="wysiwyg" id="wysiwyg" onload="iFrameEvent()"></iframe>
</body>
</html>
You must use contentWindow and contentDocument to support all browsers:
var frame = document.getElementById('wysiwyg');
if(frame.contentWindow) {
//
} else if(frame.contentDocument) {
//
}
I believe that contentWindow was a property that IE initally implemented that other browsers may have started supporting at some point but I believe the standard is contentDocument.
Someone here has posted a cross-browser solution:
Chrome: Getting iFrame and inserting into body
I am trying to load a StageWebView with the Google Maps Javascript API inside a Flex Mobile application as a workaround for the Google Maps API for Flash not working on iOS. I am using the stageWebView.loadString() method. Below is the relevent portion of HTML.Javascript being loaded.
My issue is that everything works perfectly when I view this in a browser (IE, Chrome and Safari) and in the Flash Builder iPhone/iPad simulators. On the actual device the map never loads, and through some try..catch statements I was able to identify that I am getting "TypeError: 'undefined' is not a constructor" errors, which are thrown by each of the lines I listed inside the initialize function below.
Any thoughts on what may be going wrong?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?v=3&key=MY_KEY&sensor=true">
</script>
<script type="text/javascript">
/* a bunch of variables and functions */
function initialize() {
var myOptions = { center: new google.maps.LatLng(43.476302, -80.4816062), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
dirDisplay = new google.maps.DirectionsRenderer();
/* some other stuff */
}
if(window.addEventListener) window.addEventListener("load", initialize, true); else window.onload = initialize;
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%;" ></div>
<div id="dirPanel" style="width:100%;" ></div>
</body>
</html>
Edit: I checked what the google.maps object contained and was surprised to find that unlike the object appearing on browsers, with Map, Polyline, Marker, Geocoder, and a host of other child objects, the version bpresented by the iOS device looks like this:
google.maps {
modules:Object,
Load:function (apiLoad) { delete google.maps.Load; apiLoad([/*lots of stuff I don't feel like copying out by hand*/], loadScriptTime); },
_gjsload_:function (name, text) { modules[name] = text; }
}
Any thoughts as to why it is different? Or what I can do about it to get the Maps API to work?
It's definitely suspect whether or not the external script is being loaded. My guess is that either due to connectivity or perhaps permissions, you are not able to download the external script causing an error.
Try testing to see if the google variable is defined before using it
if (typeof google !== 'undefined') {
// Use google
} else {
// Warn the user they may not be connected to the internet?
}
If you think you have everything setup correctly, try putting your script on an external location and loading the page from that extenal location i.e. instead of using stageWebView.loadString() try stageWebView.loadURL() just for testing. If it doesn't load you may have denied your application internet access. I'm not sure exactly how this works on iOS but the suggestion is that you are asked about this as and when you try to access the resource - indicated by:
http://help.adobe.com/en_US/flex/mobileapps/WSa8161994b114d624-33657d5912b7ab2d73b-7fe2.html
This may or may not solve your problem but I hope this answer will be helpful for people who have been caught out when using .loadString(). It's easy to forget to check if you actually have internet access when you are already seeing web content, which was actually loaded from a string.
Through Alexander Farber's suggestion on this post, I decided to use MapQuest's Flex/Flash Mobile API, which has proven to be very effective.
Here's a working example of ContentFlow using three static images hard-coded in HTML: http://dl.dropbox.com/u/27409695/WB-Browser/example.html
It works in FF, IE8, Safari, and Chrome.
I tweaked this page a little to make it pull in a Flickr feed using jFlickrFeed. It works great in webkit browsers (Safari, Chrome), but fails in FF or IE. See below for the specific errors.
http://dl.dropbox.com/u/27409695/WB-Browser/example-jflickrfeed.html
Here is the document.ready handler I'm using:
<script>
jQuery(document).ready(function($) {
$('.flow').jflickrfeed({
limit: 3,
qstrings: {
id: '60829137#N05'
},
itemTemplate:
'<img class="item" src="{{image_b}}" />'
}, function() {
var wbFlow = new ContentFlow('wbContainer', {
circularFlow: false,
startItem: 0
});
});
});
</script>
Any idea why this isn't working?
UPDATE: Just wanted to add some info in case it might help anyone help me. Firefox and IE both seem to choke on line 1652 of contentflow_src.js. Firefox throws the following error when I attempt to move the slider: "this.items[index] is undefined"
IE says of line 1652: "'this.items[...].label' is null or not an object"
Additionally, IE complains about line 1119: "'this._activeItem.index' is null or not an object"
But, again, Chrome and Safari don't throw any errors and the scripts work flawlessly in those two browsers.
I've been working on this for a while now and I hit on a solution.
As shown above, I was creating a new CF object in the jFlickrFeed callback, but that wasn't working.
Instead, I removed the CF tag from the head of the document. And instead of making a new CF object in the callback, I dynamically load the entire ContentFlow script:
function() {
var script = document.createElement('script');
script.setAttribute('src', 'contentflow.js');
script.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);
});
See how it works here: http://dl.dropbox.com/u/27409695/WB-Browser/example2-jflickrfeed.html
There are problems to this approach, though. For one thing ContentFlow does a lot of its own dynamic loading (addons, stylesheets, etc). Using my method above, some those functions break (especially in Internet Explorer), requiring alterations to the contentflow.js script.
If you're interested in seeing how I altered the script, take a look here: http://dl.dropbox.com/u/27409695/WB-Browser/contentflow_src_modified.js