admin管理员组文章数量:1025502
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 es 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* e first in the head; any other head content must e *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=".11.3/jquery.min.js"></script>
<!-- Include all piled 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=";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);
})
}
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 es 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* e first in the head; any other head content must e *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./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all piled 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./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);
})
}
- 1 Check for your browser version of IE.. developers.google./maps/documentation/javascript/… – Hussain Patel Commented Apr 13, 2016 at 19:11
- Are you running a supported version of IE? – geocodezip Commented Apr 13, 2016 at 19:18
- what warranted the downvote? – Jgoo83 Commented Apr 13, 2016 at 19:21
2 Answers
Reset to default 5So 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./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...
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 es 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* e first in the head; any other head content must e *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=".11.3/jquery.min.js"></script>
<!-- Include all piled 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=";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);
})
}
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 es 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* e first in the head; any other head content must e *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./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all piled 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./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);
})
}
- 1 Check for your browser version of IE.. developers.google./maps/documentation/javascript/… – Hussain Patel Commented Apr 13, 2016 at 19:11
- Are you running a supported version of IE? – geocodezip Commented Apr 13, 2016 at 19:18
- what warranted the downvote? – Jgoo83 Commented Apr 13, 2016 at 19:21
2 Answers
Reset to default 5So 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./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...
本文标签： javascriptGoogle Maps in Internet ExplorerStack Overflow
版权声明：本文标题：javascript - Google Maps in Internet Explorer - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745630321a2160122.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论