Mapa não sendo exibido

Front-end
#1

Pessoal não estou conseguindo entender porque o mapa não está sendo exibido na minha página jsf, abaixo segue o código da minha página:

<?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:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Localização</title>
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        <script type="text/javascript" src="javascript/jquery.js"></script>
        <script type="text/javascript">
            var map;
            var infowindow = new google.maps.InfoWindow();
            var rectArr = [];

            function montaQuadrantes() {

                //var cols = ["red", "blue", "green", "yellow", "orange", "gray"];

                // var rectangle;
                var coachella = new google.maps.LatLng(-20.29524676849154, -40.305705070495605);
                var myOptions = {
                    zoom: 12,
                    center: coachella,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map_canvas"),
                        myOptions);

                $.ajax({
                    type: "GET",
                    url: "/Maps4JFS/webresources/recuperaQuadrantes",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(dados) {
                        $.each(dados, function(key, val) {
                            var SW = new google.maps.LatLng(val.latitudeSw, val.longitudeSw);
                            var NE = new google.maps.LatLng(val.latitudeNe, val.longitudeNe);
                            var rectangle = new google.maps.Rectangle();
                            var rectOptions = {
                                strokeColor: "black",
                                strokeOpacity: 0.5,
                                strokeWeight: 0.2,
                                fillOpacity: 0,
                                map: map,
                                bounds: new google.maps.LatLngBounds(NE, SW)
                            };
                            rectangle.setOptions(rectOptions);
                            rectArr.push(rectangle);
                            bindWindow(rectangle, rectArr.length);
                        });
                    }
                });
            }
            function bindWindow(rectangle, num) {
                google.maps.event.addListener(rectangle, 'click', function(event) {
                    infowindow.setContent("you clicked on rectangle " + num);
                    infowindow.setPosition(event.latLng);
                    infowindow.open(map);
                });
            }

        </script>

    </h:head>
    <h:body onload="montaQuadrantes();">
        <ui:composition template="/WEB-INF/template.xhtml">
            <ui:define name="conteudoPrincipal">
                <h:form>
                    <div id="map_canvas" style="width:100%; height:400px"></div>
                </h:form>
            </ui:define>
        </ui:composition>


    </h:body>
</html>

Se tirar o

<ui:composition template="/WEB-INF/template.xhtml">
            <ui:define name="conteudoPrincipal">

            </ui:define>
  </ui:composition>

e deixar somente o

<h:form>
        <div id="map_canvas" style="width:100%; height:400px"></div>
</h:form>

Ele funciona, alguem sabe o porque?

#2

o que consta aqui? /WEB-INF/template.xhtml

E outra coisa, o web-inf que eu saiba é invisivel para as páginas do webcontent. Faz tempo que vi algo do tipo, mas confirme aí.

#3

Tem o templante da minha aplicação:

<?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:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.request.contextPath}/resources/css/template.css"/>
        <link rel="shortcut icon" href="#{facesContext.externalContext.request.contextPath}/resources/img/arcelor_mittal_logo.gif"/>
    </h:head>
    <h:body>
        <div id="corpo">
            <div id="cabecalho">
                <div id="logo">
                    <img src="#{facesContext.externalContext.request.contextPath}/resources/img/logo.png"/>
                </div>
            </div>
            <div id="menuTopo">
                <h:form>
                    <p:menubar autoDisplay="false">
                        <p:submenu label="Cadastro Básicos">  
                            <p:menuitem value="Equipamentos" url="/paginas/cadastros/cadastroEquipamentos.jsf"/>   
                            <p:menuitem value="Fabricantes" url="/paginas/cadastros/cadastroFabricantes.jsf"/> 
                            <p:menuitem value="Modelos de Equipamento" url="/paginas/cadastros/cadastroModelo.jsf"/>
                            <p:menuitem value="Tipos de Equipamento" url="/paginas/cadastros/cadastroTiposEquipamentos.jsf"/>
                            <p:menuitem value="Antenas" url="/paginas/cadastros/cadastroAntenas.jsf"/>
                            <p:menuitem value="Funções de Equipamento" url="/paginas/cadastros/cadastroFuncaoEquipamento.jsf"/>   
                            <p:menuitem value="Usuários Responsáveis" url="/paginas/cadastros/cadastroResponsavel.jsf"/>
                        </p:submenu> 
                        <p:submenu label="Controle de Acesso"> 
                            <p:menuitem value="Gerenciamento de Grupos" url="/paginas/controle_acesso/cadastroGrupo.jsf"/>  
                            <p:menuitem value="Gerenciamento de Usuários" url="/paginas/controle_acesso/cadastroUsuarios.jsf"/>                              
                        </p:submenu>
                        <p:menuitem value="Localização" url="/paginas/localizacao/localizacao.jsf"/>  
                        <p:submenu label="Relatórios">   
                            <p:menuitem value="Equipamentos sem Localização" />  
                            <p:menuitem value="Interferência"/>  
                            <p:menuitem value="Equipamentos Sobressalentes"/> 
                        </p:submenu>                         
                    </p:menubar>                    
                </h:form>            
            </div>
            <div id="conteudoPrincipal">
                <ui:insert name="conteudoPrincipal">
                    
                </ui:insert>
            </div>
            <div id="rodape">
                <ui:insert name="rodape"></ui:insert>
            </div>
        </div>
    </h:body>
</html>

O que não entendo é que para todas as outras páginas funciona.

#4

Ninguem?

#5