2013-11-20 4 views
7

Я следую образцу кода с веб-страницы API Карт Google, которая использует JavaScript и HTML. Образец HTML работает отлично, но использование JavaScript-источника в JSP для создания Карт Google не работает.Как использовать Google Map Api в JSP?

<%@ 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> 

Это от их documentation. Как использовать Google Api v3 в JSP Source?

+0

Поместите свой тег скрипта в раздел главы и добавьте div с id 'map-canvas' в тело вашего jsp. Убедитесь, что этот div имеет фиксированную высоту и ширину. Надеюсь, это сработает без проблем. – jsjunkie

+0

@jsjunkie извините, но не может понять ваш ответ :(какой-нибудь пример кода там? – user2637015

ответ

9

Если код, который вы опубликовали выше, относится к jsp, о котором вы говорите, тогда вы пропустили добавление div с id 'map-canvas'. Попробуйте что-то вроде ниже.

<%@ 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> 

Оказывать карту правильно должен быть элемент, чтобы удерживать его, и что элемент должен иметь определенную высоту и ширину. Я надеюсь, что это поможет

+1

Спасибо !! этот источник работает отлично :) – user2637015

+0

Как мы можем показать несколько маркеров на карте? – Varun

+0

Множественный маркер очень прост, когда вы объявляете переменную, как var marker = new Latlng (..). Удостоверьтесь, что для каждой пары lat длинный, иначе последний заменит все. Пожалуйста, введите код для точечного ответа. – jsjunkie