JSF 中的谷歌地图不起作用答案

【问题标题】：Google map in JSF is not workingJSF 中的谷歌地图不起作用
【发布时间】：2015-01-31 13:27:18
【问题描述】：

我必须使用 JSF 和 javascript 在谷歌地图中显示标记。但我不知道问题所在。相同的代码在 jsp 中运行良好，但在 jsf 中运行不佳，甚至地图没有在页面上显示地图。 JSF页面代码如下：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
        <title>Google Maps Multiple Markers</title> 
        <script src="http://maps.google.com/maps/api/js?sensor=false"
        type="text/javascript"></script>
    </head> 
    <body>
        <div id="map" style="width: 500px; height: 400px;"></div>
        <script type="text/javascript">
           // <![CDATA[
            alert("hello");
            var locations = [
                   <ui:repeat value = "#{loadBean.googleMapLocations}" var = "googleLocation"  varStatus = "status" >
                    ['#{googleLocation.location}', '#{googleLocation.latitude}', '#{googleLocation.longitude}']
                    < c:if test = "${!status.last}" >
                    ,
                    < /c:if>
                    < /ui:repeat>
            ]
                    alert(locations);
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng("${loadBean.centerLatitude}", "${loadBean.centerLongitude}"),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
           function saveForm(){
                alert("helo world");
            }
             ]]>
        </script>
        <table>
            <c:forEach var="googleLocation" items="${loadBean.googleMapLocations}">
                <tr><td>${googleLocation.latitude}</td><td>${googleLocation.longitude}</td></tr>  
            </c:forEach>
            CENTER<tr><td>${loadBean.centerLatitude}</td><td>${loadBean.centerLongitude}</td></tr>
        </table>
        <f:view>
        <h:form>
        <p:commandButton type="button" onclick="return saveForm();" value="Button" /></h:form></f:view>
    </body>
</html>

【问题讨论】：

标签： javascript google-maps jsf primefaces jsf-2.2

【解决方案1】：

尝试使用 ui repeat 而不是 forEach。

【讨论】：