I am following the sample code from the Google Map API web page, which uses JavaScript and HTML. The HTML sample works fine, but using JavaScript source in JSP to create Google Maps doesn't work.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script
src=".exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
This is from their documentation. How do I use Google Api v3 in JSP Source?
I am following the sample code from the Google Map API web page, which uses JavaScript and HTML. The HTML sample works fine, but using JavaScript source in JSP to create Google Maps doesn't work.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script
src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
This is from their documentation. How do I use Google Api v3 in JSP Source?
Share Improve this question edited Nov 20, 2013 at 4:11 Zhihao 14.7k2 gold badges28 silver badges36 bronze badges asked Nov 20, 2013 at 3:05 user2637015user2637015 7232 gold badges13 silver badges27 bronze badges 2- Put your script tag in the head section and add a div with id 'map-canvas' in the body of your jsp. Make sure this div has some fixed height and width. I hope this will work without any problem. – jsjunkie Commented Nov 20, 2013 at 3:53
- @jsjunkie sorry but can't understand your answer :( any sample code there? – user2637015 Commented Nov 20, 2013 at 11:58
1 Answer
Reset to default 9If the code you have posted above is of the jsp you are talking about then you have missed to add the div with id 'map-canvas'. Try something like below.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script
src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="height:300px; width:500px"></div>
</body>
</html>
To render map properly there must be an element to hold it and that element must have a definite height and width. I hope this helps