1
I’m doing a project and I came across an unpleasant situation. Well, I did a little test using HTML5 in a notepad using Google Maps and everything worked out fine. Only I was using the code in my project that uses JSF + Glassfish. When I run the page the map appears only that it soon displays error message "Oops! Something went wrong. This page did not load Google Maps correctly. Please refer to the Javascript console for technical details." . I’m not using Classes Beans but just exposing the Map only that it’s not working.
XHMTL Page Code - 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&sensor=false&callback=myMap"></script>
<script>
function myMap() {
var lat = document.getElementById("lat").value;
var long = document.getElementById("long").value;
var myCenter = new google.maps.LatLng(lat, long);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 15};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
</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" widgetVar="map"/>
</h:form>
<input type="text" value="#{mBLogin.latitude}" id="lat" onkeyup="myMap()"/>
<input type="text" value="#{mBLogin.longitude}" id="long" onkeyup="myMap()"/>
</p:dataList>
</p:dataList>
</pm:page>
</h:body>
</html>
If anyone can or can handle!!
Reminding people that I just want to present a Map on my page, I’ve reviewed the site of Primefaces and no example of them worked appears the same thing until msm the script they provide!
– Lucas Awade
vc configure the authorization key that google pass you ?
– Marcus Vinicius
Yes, I had removed and was working with pure HTML when passing pro jsf did not work but could solve creating another key.
– Lucas Awade