JSP在具有动态纬度的表格上显示Google Map

时间:2018-06-28 14:14:35

标签: javascript java google-maps jsp jstl

我有一个动态创建的表。一切正常。现在,我必须使用纬度和经度在此表上显示Google Map。

目前,我正在显示带有硬编码的纬度和经度值的Google Map。

我的LatLng即将进入${Ad.image}属性,但我不知道如何使用它。

在表格的最后一列中,我必须显示Google Map,现在我编写了以下代码。

<td><div id="googleMap" style="width: 350px; height: 150px"></div></td>

我的代码如下。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ads Publish Portal</title>
<script>
    function myMap() {
        var myCenter = new google.maps.LatLng(28.654377, 77.191156);
        var mapCanvas = document.getElementById("googleMap");
        var mapOptions = {
            center : myCenter,
            zoom : 12
        };
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker({
            position : myCenter
        });
        marker.setMap(map);
    }
</script>
</head>
<body>
    <jsp:include page="/getAds" />
    <table border="1">
        <tr>
            <td>Name</td>
            <td>Contact Number</td>
            <td>Image</td>
            <td>Location</td>
        </tr>
        <c:forEach var="Ad" items="${ads}">
            <tr>
                <td><c:out value = "${Ad.nama}"/></td>
                <td><a href="tel:${Ad.contactNo}">${Ad.contactNo}</a></td>
                <td><input type="image" src="${Ad.image}"></td>
                <td><div id="googleMap" style="width: 350px; height: 150px"></div></td>
            </tr>
        </c:forEach>
    </table>
    <script src="https://maps.googleapis.com/maps/api/js?key=KeyValue&callback=myMap"></script>
</body>
</html>

所以请帮助我。

我正在使用Java 1.8,JSP Servlet。

0 个答案:

没有答案