Primefaces p:gmap erro API Google Maps

Boa noite pessoal!
Estou com um problema ao usar a tag p:gmap do primefaces,
no console do navegador vi que estava me dando o seguinte erro: You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
isso causa uma lentidão extrema no meu sistema

Tenho uma lista que contém vários itens, e cada item tem um mapa que eu ploto rotas.
Aí ele dá esse erro
alguém saberia me ajudar?

segue abaixo código:

MenuPrincipal.xhtml

<!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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<!-- transporte-desenvolvimento -->
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASu__fdJyh7GGCm4kob2-lVgqfJhXEpJs"></script>
...

Rota.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	...
	xmlns:df="http://www.dataci.es.gov.br/ui"
       template="../MenuPrincipal.xhtml">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<script language="javascript">...	</script>
	
		<h:form id="form" preprendId="false">
			<b><df:inputText disabled="true" width="450px" value="#{TrLinhaSB.entidade.linhDescricao}" text="Linha: " upper="true"/></b><br />
			<p:commandButton value="Adicionar" actionListener="#{TrRotaSB.prepararAdicionar}" style="font-size: 10px" oncomplete="man.show()"  update="@form" />
			<br /><br />
			<p:dataTable id="tabela" var="list" value="#{TrRotaSB.listEntityTabular}" style="font-size: 10px" 
							rowKey="#{list.rotaCodigo}" selection="#{TrRotaSB.entidade}"  selectionMode="single">			
			
				<p:column headerText="Código" style="width: 10%">#{list.rotaCodigo}</p:column>
				<p:column headerText="Sentido" style="width: 10%">#{list.rotaSentidoEnum}</p:column>
				<p:column headerText="Sentido" style="width: 10%">#{list.rotaStatusEnum}</p:column>
				<p:column headerText="Descrição" style="width: 20%">#{list.rotaDescricao}</p:column>
			
				<p:column headerText="Ações" style="width: 50%">
					<center>
						<p:commandButton value="Pontos de parada"  style="font-size:10px" update="@form" oncomplete="pont.show()" actionListener="#{TrPontosRotaSB.listaPontosRota(list)}" ajax="true"/>
						<p:commandButton value="Definir trajeto"  style="font-size:10px" update="@form" oncomplete="graf.show()" actionListener="#{TrRotaSB.prepararAlterar}" ajax="true"/>																		
...						
<p:dialog modal="true" header="Grafico"	widgetVar="graf" resizable="true" width="1600" height="800px" id="graf">
				<table>
					<tr>
						...
						<td width="1200px" valign="top">					
							<p:gmap id="gmap" center="#{TrRotaSB.lat}, #{TrRotaSB.lng}" zoom="#{TrRotaSB.zoom}" type="ROADMAP" style="width:1130px; height:580px;" model="#{TrRotaSB.advancedModel}"
									widgetVar="map"  fitBounds="false" >
								<p:ajax event="stateChange" listener="#{TrRotaSB.onStateChange}" update="gmap"/>	  
								<p:ajax event="pointSelect" listener="#{TrRotaSB.onPointSelect}" update="gmap @([id$=tab])" />	        		
							</p:gmap>
						...																								 		
				</table>
												
			</p:dialog>

A mensagem de erro pode ser ignorada. Trabalho com sistemas de mapas e é relativamente comum ocorrer estes erros.
A questão da lentidão pode se referir à renderização dos componentes em si ou mesmo da validação da chave da API do google.
Desta forma, você realmente tem esta necessidade? Precisa renderizar vários mapas? O ideal não seria um só mapa e várias rotas diferentes por cores diferentes?

Neste caso sim, porque é a tela onde cadastro rotas.

Uso o p:fileupload pra importar o .kml inclusive
e assim que ele faz o upload exibe a rota plotada no mapa
e posteriormente gravo o registro no BD

Neste caso, não seria mais adequado mudar de arquitetura e partir para uma solução menos complexa que jsf?

1 curtida

Bom dia Luis!
Sobre essa mudança de arquitetura, você teria alguma sugestão de troca do JSF e talvez do Hibernate?

Eu optaria por um thin client, como angularjs, angular 2 ou mesmo jquery.
Pode ser que a renderização dos componentes esteja pesando.
Claro que isso exigiria uma alteração nos teus controllers, você teria que passar de managed beans para web services e trabalhar com RESTful