Kind of stuck here. I am adding a very simple google map to my webpage, and using the basic javascript API to do so. Everything works fine in chrome, but with internet explorer it works occasionally. The error that comes up is:
SCRIPT5022: InvalidValueError: initMap is not a function js, line 102
character 390
the error refers to the call to google maps API, not in my js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Under Construction</title>
<link rel="shortcut icon" href="images/betterlogo.ico" type="image/x-icon">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/thumbnails.css">
<link rel="stylesheet" href="css/main.css">
<!-- JS -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script src='js/device.min.js'></script>
</head>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="container-fluid">
<div id="map-canvas"></div>
</div>
</div>
<--some more code filler that nobody needs to see,-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ui.accordion.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFmJX1o4ocAPluAPlDWlh-VX_35iwc23o&libraries=places&callback=initMap" async defer></script>
<script src="js/main.js"></script>
and my javascript:
function initMap() {
var myLatLng = {lat:40.4917507, lng:-74.2971267};
var map = new google.maps.Map(document.getElementById('map-canvas'),{
center: myLatLng,
zoom: 15
});
var marker = new google.maps.Marker({
position: myLatLng,
map:map,
title:"abc"
});
google.maps.event.addDomListener(window, "resize", function(){
var center=map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
})
}
So I moved my main.js file above the call to the googlemaps API and it fixed the problem. I am assuming that the the call was being made before all my javascript loaded, hence the callback to the mapsInit didn't exist yet. Would love some feedback if my thinking is correct/incorrect. Thanks
<script src="js/main.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFmJX1o4ocAPluAPlDWlh-VX_35iwc23o&libraries=places&callback=initMap" async defer></script>
I was getting the same error as above, but the marked answer didn't help. If anyone is getting the initMap error only on Internet explorer it could be because you are using JavaScript that is too modern for Internet Explorer including 'template literals' and 'arrow functions'. I went through my code and replaced them with older code which removed this error. Hopefully that will save someone the hours of debugging I went through...
Related
Really nooby question, but couldn't find it on this site, and just can't get it to work.
How can I get javascript and jquery to work when putting CDN into headers / footers?
My javascript is working when I include the CDN and the tags right in with the HTML, but I want to have my javascript on other pages, rather than in with the HTML view pages.
I can't see what is wrong. Maybe you can help?
this is working
<div class="form-group">
<label for="caption">Event Description</label>
<script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>
<textarea class="form-control" name="event_description" id="body" cols="30" rows="20"></textarea>
<script>
ClassicEditor
.create( document.querySelector( '#body' ) )
.catch( error => {
console.error( error );
} );
</script>
</div>
However this is not
I have
<?php require_once("includes/header.php"); ?>
<?php require_once("includes/footer.php"); ?>
on all tops and bottom of HTML view pages.
Here are my headers and footers
<?php ob_start(); ?>
<?php require_once("init.php"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Bootstrap Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
footer
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/scripts.js"></script>
<!-- Bootstrap Core JavaScript -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- WYSIWYG -->
<script src="https://cdn.ckeditor.com/ckeditor5/12.1.0/classic/ckeditor.js"></script>
</body>
</html>
here is the scripts.js page
ClassicEditor
.create( document.querySelector( '#body' ) )
.catch( error => {
console.error( error );
} );
$(document).ready(function(){
alert('hello');
});
not sure why nothing works from the scripts.js page. The alert is not working. I have JQuery.js referenced also..
Thank you
You should put <script src="js/scripts.js"></script> after JQuery and other dependencies. Because your script.js is using JQuery before you imported it.
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- WYSIWYG -->
<script src="https://cdn.ckeditor.com/ckeditor5/12.1.0/classic/ckeditor.js"></script>
<!-- MY JS -->
<script src="js/scripts.js"></script>
</body>
</html>
Just make the following changes in your footer and everything will work fine.
Regarding to keep JS in header and footer
<script>-tag over the closing </body>-Tag, this will prevent that the page is loading endless for the Javascript file, before the page is actually loaded.
It was trends before to put JavaScript code in the header but now because of SEO and site performance, it is better to put JavaScripts in the footer. yes, that means all the js code.
How to avoid such issues in future?
you first need to include the dependencies required by your code and other libraries. like jQuery is required by most of the libraries bootstraps, fancybox, jQuery full calendar and so on. so first include jQuery library then other js libraries if they have any other dependencies than include them before your custom javascript. it is just same as in your code you define something above. what if you try to use it before defining it? no way it will never work...
Now what about CSS dependencies?
always include them in the header inside tags.
I downloaded version 3.3.6, used their (Bootstrap's) sample file (see below) but get the error: uncaught syntaxError: Unexpected token {
. I added some hard returns to be sure which line was the potential problem:
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
Here's their file, with the links modified for my local file system:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="/programming/javascript/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/programming/javascript/bootstrap-3.3.6-dist/css/bootstrap.min.css"></script>
</body>
This next to last line of your code is wrong:
This is how you reference a JS file.
<script src="/programming/javascript/bootstrap-3.3.6-dist/css/bootstrap.min.css"></script>
if you want to reference this CSS file correctly, use this code:
<link href="/programming/javascript/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />
I have a map that is inside a bootstrap tab-panel, and it's displaying grey which is obviously not desired. However, the second I resize the window, it immediately loads accurately. I am using the same script for the map in another page on the same site, however on that page it's not in a tab pane - and it loads fine. I tried re-ordering the scripts on the page as I thought something may be interfering, but it didn't help. Note I also tried adding the line google.maps.event.trigger(map, 'resize'); as I read another post on here with a similar issue, but it also didn't help.
If I initially click on the tab, I see this:
and If I resize the window I get this:
JS for the map:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(49.246292,-123.116226),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [...]
}
var map = new google.maps.Map(mapCanvas, mapOptions)
google.maps.event.trigger(map, 'resize');
}
google.maps.event.addDomListener(window, 'load', initialize);
The scripts are loaded into the head of the html like this:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="images/glyphcon.png" sizes="96x96"/>
<title><?php echo "" . $name . "" ?></title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/general.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/map.js"></script>
And the tab-panel with the map div is like this:
<div role="tabpanel" class="tab-pane fade" id="address">
<div id="map"></div>
</div>
Can anyone tell me why this is happening?
If the tab is not visible during map initialization/loading this is the normal behavior, you should invoke resize during tab click operation or better call the (re) initialize function when you click the tab.
I am new to jQuery, and even newer to Dreamweaver CC. I am trying to use the animated version of toggleClass that is available to jQuery-ui, but I cannot load jQuery ui for some reason. Dreamweaver already has some jQuery elements which might be interfering, but I cannot be sure.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stargazer</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery-ui.min.css" type="text/css">
<!-- <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/caesar-dressing:n4:default;lobster-two:n4:default;chicle:n4:default;henny-penny:n4:default;immi-five-o-five:n4:default.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui.min.js" type="text/javascript"></script>
<script src="jQueryAssets/testing.js" type="text/javascript"></script>
</head>
The last 2 lines are where I attempt to load jQuery-ui as well as my custom sheet where I write all my jQuery. When I attempt to test if jQuery is loading using if (jQuery-ui) {alert('loaded')} I receive no alert.
I have tried several similar loading methods but nothing seems to work. Any help is greatly appreciated.
Try wrapping your test in a doc ready function"
$(document).ready(function(){
if (jQuery-ui) {
alert('loaded')
}
});
Or try
$(document).ready(function(){
$.ui.version
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src = "js/angular.min.js"></script>
<script type="text/javascript" src = "js/angular-route.js"></script>
<script type="text/javascript" src = "js/angular-resource.min.js"></script>
<script type="text/javascript" src = "js/script.js"></script>
</head>
<body ng-app>
<div>
{{Hello World!}}
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
script.js
if(typeof angular == 'undefined' )
{
alert("not working");
}
else
{
alert("good");
}
I get alerted good, although the page still has
{{Hello World!}}
What am I missing here? I thought the binding was supposed to work by itself.
I am using angular js 1.2.16 btw
//extra characters because stackoverflow wouldn't let me post the question. Says too much code.
All included scripts are good. However you are not telling angular where to start bootstraping your angular application.
You are missing ng-app directive on the html tag.
<html ng-app>
Also the Hello World should be a string.
{{"Hello World!"}}
Working example :
script.js
var testApp = angular.module('MyTestApp', []);
index.html page:
<!DOCTYPE html>
<html ng-app="MyTestApp">
<head>