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 worked fine. Only that was to use the code in my project that uses JSF + Glassfish. When I run the page the map appears only that it soon displays a " Oops! Something went wrong.This page did not load Google Maps correctly.Please see the JavaScript console for technical details. ". I'm not using Classes Beans but just exposing the Map just that this is 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>functionmyMap(){varlat=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 someone can or can solve it thank you !!