Erro JSF com Google Maps

Programação Java
#1

Estou fazendo um projeto e me deparei com uma situação desagradável. Pois bem, fiz um pequeno teste usando HTML5 em um bloco de notas utilizando o Google Maps deu tudo certo. Só que foi usar o código no meu projeto que utiliza o JSF + Glassfish. Quando executo a página o mapa aparece só que logo apresenta mensagem de erro “Ops! Algo deu errado.Esta página não carregou o Google Maps corretamente. Consulte o console JavaScript para ver detalhes técnicos.” . Não estou usando Classes Beans mas apenas expondo o Mapa só que isso não está funcionando.

Código da Pagina em XHMTL - 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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:pm="http://primefaces.org/mobile">
    <f:view renderKitId="PRIMEFACES_MOBILE" />
    <h:head>
        <link rel="icon" href="imagens/iconepag.png" type="image/x-icon" />
        <title>Peixe Fácil</title>
        <style type="text/css">
            .ui-grid-a div {
                padding: 0em 0.5em;
            }
        </style>
    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtx4Jj6jXIVnC0ckT97ZqoJnJo9fd0tbQ&amp;sensor=false"></script>
    
</h:head>
<h:body>
    <pm:page>
        <pm:header title="Peixe Fácil - Perfil" swatch="a">
            <p:button value="Home" icon="ui-icon-home" styleClass="ui-btn-left ui-btn-inline" href="PaginaInicial.jsf"/>
        </pm:header>
        <p:dataList value="Perfil" var="perfil"  paginator="false" >
            <p:graphicImage style="padding: 6px 6px 6px 6px;border:#e6e6e6 solid 1px;height: 90px;width:90px ; border-radius: 100px;margin-top: 20px;margin-left: 5px;" url="imagens/#{mBLogin.nomeImagem}" />
            <p:dataList value="Nome: ">
                <h2>Nome: </h2><h:outputText value="#{mBLogin.nome}" />
                <h2>Apelido: </h2><h:outputText value="#{mBLogin.apelido}" />
                <h2>E-mail: </h2><h:outputText value="#{mBLogin.email}" />
                <h2>Idade: </h2><h:outputText value="#{mBLogin.idade}" />
                <h2>Telefone: </h2><h:outputText value="#{mBLogin.telefone}" />
                <h2>Localização: </h2>
                
                <h:form id="form">
                    <p:gmap style="width:100%;height:15em" zoom="15" type="ROADMAP" center="41.381542, 2.122893"/>
                </h:form>

                 

                </p:dataList>
            </p:dataList>

        </pm:page>
    </h:body>
</html>

Em seguida fiz utilizando HTML5 + JavaScript funcionou legal agora com o JSF aparece o ERRO!

#2

Olá, você pode utilizar o GMaps4JSF no lugar do GMaps. Veja se te ajuda http://www.mashups4jsf.com/gmaps4jsf-examples/home.jsf

#3

Obrigado pela ajuda! A chave do Google Maps não estava funcionando, funcionava na criação de HTML mas do JSF aparecia o erro.

#4

man poderia me falar como vc resolveu esse erro, estou com o mesmo problema