Question

117

how to use Google Map Api in JSP?

rated 0 times [ 119] [ 2] / answers: 1 / hits: 23334 / 11 Years ago, wed, november 20, 2013, 12:00:00

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.org/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.com/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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dustin

Add To Favorites

Follow

Total Points: 599

Total Questions: 105

Total Answers: 106

Location: Belarus

Member since Tue, Mar 14, 2023

1 Year ago

dustin questions

1 'Routes' is not defined react/jsx-no-undef

Wed, Dec 1, 21, 00:00, 3 Years ago

1 event in Javascript is deprecated and I cannot use preventDefault()

Sun, Apr 18, 21, 00:00, 3 Years ago

1 playwright - issues with login form, inputs and submit click

Wed, Apr 14, 21, 00:00, 3 Years ago

1 How to mock fs.readFileSync with jest

Sun, Sep 20, 20, 00:00, 4 Years ago

1 How to download pdf from puppeteer using Nest js as Server Side and React in Client Side?

Wed, Jul 8, 20, 00:00, 4 Years ago

View All

answered 11 Years ago billtreytonb · Accepted Answer

If 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.org/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.com/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