Olá, pessoal. Estou manipulando uma tela de cadastro de propriedades(fazendas) no meu sistema e estou com um pequeno problema com a renderização do Gmap que é o Google Maps no Prime Faces.
A situação é a seguinte: existem dois SelectOneMenus dependentes na tela de cadastro de propriedade, o “estado” e a “cidade”. Quando o usuário selecionar um estado, o SelectOneMenu “cidade” será carregado automaticamente com as cidades que pertencem a este estado. Até este ponto tudo bem. A questão é que eu quero fazer uma função que quando o usuário selecione a cidade, o Gmap automaticamente centralize na cidade que o usuário selecionou e estou tendo problemas com isso. Sinto que estou a um passo, mas não estou conseguindo. Quando seleciono uma cidade, não acontece nada com o Gmap.
Estou postando o código da página xhtml. Não sei se será necessário, mas estou postando também os códigos de dois arquivos beans que são usados na página.
CadastroPropriedade.xhtml
<ui:composition template="/WEB-INF/template/LayoutPadrao.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:o="http://omnifaces.org/ui">
<ui:define name="titulo">Nova Propriedade</ui:define>
<ui:define name="corpo">
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeF32jO4j5mAORJTcNICT3o8Nz8G0QZIg"
type="text/javascript">
</script>
<script type="text/javascript">
function geocode() {
PF('geoMap').geocode(document.getElementById("formulario:cidade").value);
}
</script>
<f:metadata>
<o:viewParam name="propriedade"
value="#{cadastroPropriedadeBean.propriedade}" />
<f:viewAction action="#{cadastroPropriedadeBean.inicializar}" />
</f:metadata>
<h:form id="formulario" prependId="false">
<h1>Nova Propriedade</h1>
<p:messages autoUpdate="true" closable="true" />
<p:toolbar style="margin-top: 20px">
<p:toolbarGroup>
<p:button value="Novo" outcome="/propriedade/CadastroPropriedade" />
<p:commandButton value="Salvar" id="botaoSalvar"
action="#{cadastroPropriedadeBean.salvar}" update="@form" />
</p:toolbarGroup>
</p:toolbar>
<p:panelGrid columns="2" id="painel"
style="width: 100%; margin-top: 20px" columnClasses="rotulo, campo">
<p:outputLabel value="Area(Hectare)" for="area" />
<p:inputText id="area" size="16" maxlength="16"
value="#{cadastroPropriedadeBean.propriedade.area}" required="true"
requiredMessage="Por favor, informe a area">
</p:inputText>
<p:outputLabel value="Nome" for="nome" />
<p:inputText id="nome" size="60" maxlength="80"
value="#{cadastroPropriedadeBean.propriedade.nome}" required="true"
requiredMessage="Por favor, informe o nome">
<f:validateRegex
pattern="^[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]+$" />
</p:inputText>
<p:outputLabel value="Matricula" for="matricula" />
<p:inputText id="matricula" size="60" maxlength="80"
value="#{cadastroPropriedadeBean.propriedade.matricula}"
required="true" requiredMessage="Por favor, informe a matrícula">
<f:validateRegex
pattern="^[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]+$" />
</p:inputText>
<p:outputLabel value="CEP" for="cep" />
<p:inputMask id="cep" size="8" maxlength="8"
value="#{cadastroUsuarioBean.usuario.cep}" mask="99999-999"
required="true"
requiredMessage="Por favor, informe o CEP de seu endereço" />
<p:outputLabel value="Endereco" for="endereco" />
<p:inputText id="endereco" size="60" maxlength="80"
value="#{cadastroPropriedadeBean.propriedade.endereco}"
required="true" requiredMessage="Por favor, informe o endereço" />
<p:outputLabel value="Proprietário" />
<p:selectOneMenu
value="#{cadastroPropriedadeBean.propriedade.usuario}"
label="Usuario" id="usuario" filter="true"
filterMatchMode="contains" required="true"
requiredMessage="Por favor, escolha um usuario">
<f:selectItem itemLabel="Selecione" noSelectionOption="true" />
<f:selectItems value="#{cadastroPropriedadeBean.listUsuarios}"
var="usuario" itemValue="#{usuario}" itemLabel="#{usuario.nome}" />
</p:selectOneMenu>
<p:outputLabel value="Estado" for="estado"/>
<p:selectOneMenu id="estado" value="#{cadastroPropriedadeBean.propriedade.estado}" label="Estado"
required="true" requiredMessage="Informe o estado em que se localiza a propriedade">
<f:selectItem itemLabel="" noSelectionOption = "true"/>
<f:selectItems value="#{cadastroPropriedadeBean.listEstados}" var="estado"
itemValue="#{estado}" itemLabel="#{estado.estado_sigla}" />
<p:ajax listener="#{cadastroPropriedadeBean.carregarCidades}" update="cidade"/>
</p:selectOneMenu>
<p:outputLabel value="Cidade" for="cidade"/>
<p:selectOneMenu id="cidade" widgetVar="testando" value="#{cadastroPropriedadeBean.propriedade.cidade}" required="true" requiredMessage="Informe a cidade a qual pertence a propriedade" onchange="geocode(this)">
<f:selectItem itemLabel=""/>
<f:selectItems value="#{cadastroPropriedadeBean.listCidades}" var ="cidade"
itemValue="#{cidade}" itemLabel="#{cidades.cidadeNome}" />
<!-- <p:ajax listener="#{cadastroPropriedadeBean.onGeocode}" update="geoGmap"/> -->
</p:selectOneMenu>
<p:outputLabel value="Forme a área da propriedade" for="geoGmap"/>
<p:panel id="panelMap" style="margin-top:30px;margin-left:100px;width:900px;">
<p:gmap id="geoGmap" widgetVar="geoMap"
center="#{geocodeBean.centerGeoMap}" zoom="8" type="ROADMAP"
model="#{geocodeBean.geoModel}" style="width:100%;height:400px">
<p:ajax event="geocode" listener="#{geocodeBean.onGeocode}"
update="@this"/>
</p:gmap>
</p:panel>
</p:panelGrid>
</h:form>
</ui:define>
</ui:composition>
Notem que bem no início do arquivo, coloquei dois código em javascript, um para mostrar o Gmap e outro para centralizar o Gmap em determinado local. No SelectOneMenu “cidade” existe um atributo OnChange que está chamando este javascript.
CadastroPropriedadeBean.java
@Named
@ViewScoped
public class CadastroPropriedadeBean implements Serializable {
private static final long serialVersionUID = 1L;
@Inject
private UsuariosRep usuariosRep;
@Inject
private CadastroPropriedadeService cadastroPropriedadeService;
@Inject
private EstadosRep estadosRep;
@Inject
private CidadeRep cidadeRep;
private MapModel geoModel;
private String centerGeoMap = "41.850033, -87.6500523";
private Propriedade propriedade;
private Estado estado;
private Cidade cidade;
private Usuario usuario;
private List<SelectItem> listUsuarios;
private List<SelectItem> listEstados;
private List<SelectItem> listCidades;
public CadastroPropriedadeBean() {
limpar();
}
public void mexerMapa(GeocodeEvent event){
List<GeocodeResult> results = event.getResults();
LatLng center = results.get(0).getLatLng();
centerGeoMap = center.getLat() + "," + center.getLng();
for (int i = 0; i < results.size(); i++) {
GeocodeResult result = results.get(i);
geoModel.addOverlay(new Marker(result.getLatLng(), result.getAddress()));
}
}
public boolean isEditando() {
boolean resultado = false;
if (this.propriedade != null) {
resultado = propriedade.getId() != null;
}
return resultado;
}
public void inicializar() {
geoModel = new DefaultMapModel();
listUsuarios = new ArrayList<SelectItem>();
listEstados = new ArrayList<SelectItem>();
List<Usuario> usuario = usuariosRep.raizes();
List<Estado> estados = estadosRep.raizes();
for(Usuario u : usuario){
SelectItem item = new SelectItem();
item.setLabel(u.getNome());
item.setValue(u);
listUsuarios.add(item);
}
if(this.usuario != null){
usuario = usuariosRep.raizes();
}
for (Estado e : estados) {
SelectItem item = new SelectItem();
item.setLabel(e.getEstado_sigla());
item.setValue(e);
listEstados.add(item);
}
if(!isEditando()){
propriedade.setStatus("Ativo");
}
if (this.estado != null) {
estados = estadosRep.raizes();
}
}
public void limpar() {
propriedade = new Propriedade();
listUsuarios = new ArrayList<SelectItem>();
}
public void salvar() {
this.propriedade = cadastroPropriedadeService.salvar(this.propriedade);
limpar();
FacesUtil.addInfoMessage("Propriedade salva com sucesso!");
}
public void carregarCidades(){
listCidades = new ArrayList<SelectItem>();
List<Cidade> cidades = cidadeRep.cidadesDe(propriedade.getEstado());
for (Cidade c : cidades) {
SelectItem item = new SelectItem();
item.setLabel(c.getCidadeNome());
item.setValue(c);
listCidades.add(item);
}
}
public void onGeocode(GeocodeEvent event) {
List<GeocodeResult> results = event.getResults();
System.out.println("resultado = " + results.size());
if (results != null && !results.isEmpty()) {
LatLng center = results.get(0).getLatLng();
centerGeoMap = center.getLat() + "," + center.getLng();
for (int i = 0; i < results.size(); i++) {
GeocodeResult result = results.get(i);
geoModel.addOverlay(new Marker(result.getLatLng(), result.getAddress()));
}
}
}
public MapModel getGeoModel() {
return geoModel;
}
public String getCenterGeoMap() {
return centerGeoMap;
}
public Propriedade getPropriedade() {
return propriedade;
}
public void setPropriedade(Propriedade propriedade) {
this.propriedade = propriedade;
if(this.propriedade != null)
{
this.usuario = this.propriedade.getUsuario();
}
}
public List<SelectItem> getListUsuarios() {
return listUsuarios;
}
public void setListUsuarios(List<SelectItem> listUsuarios) {
this.listUsuarios = listUsuarios;
}
public Usuario getUsuario() {
return usuario;
}
public void setUsuario(Usuario usuario) {
this.usuario = usuario;
}
public List<SelectItem> getListEstados() {
return listEstados;
}
public void setListEstados(List<SelectItem> listEstados) {
this.listEstados = listEstados;
}
public EstadosRep getEstadosRep() {
return estadosRep;
}
public void setEstadosRep(EstadosRep estadosRep) {
this.estadosRep = estadosRep;
}
public CidadeRep getCidadeRep() {
return cidadeRep;
}
public void setCidadeRep(CidadeRep cidadeRep) {
this.cidadeRep = cidadeRep;
}
public Estado getEstado() {
return estado;
}
public void setEstado(Estado estado) {
this.estado = estado;
}
public Cidade getCidade() {
return cidade;
}
public void setCidade(Cidade cidade) {
this.cidade = cidade;
}
public UsuariosRep getUsuariosRep() {
return usuariosRep;
}
public void setUsuariosRep(UsuariosRep usuariosRep) {
this.usuariosRep = usuariosRep;
}
public List<SelectItem> getListCidades() {
return listCidades;
}
public void setListCidades(List<SelectItem> listCidades) {
this.listCidades = listCidades;
}
}
GeoCodeBean.java
@ManagedBean
public class GeocodeBean {
private MapModel geoModel;
private String centerGeoMap = "-23.5489, -46.6388";
@PostConstruct
public void init() {
geoModel = new DefaultMapModel();
}
public void onGeocode(GeocodeEvent event) {
List<GeocodeResult> results = event.getResults();
if (results != null && !results.isEmpty()) {
LatLng center = results.get(0).getLatLng();
centerGeoMap = center.getLat() + "," + center.getLng();
for (int i = 0; i < results.size(); i++) {
GeocodeResult result = results.get(i);
geoModel.addOverlay(new Marker(result.getLatLng(), result.getAddress()));
}
}
}
public MapModel getGeoModel() {
return geoModel;
}
public String getCenterGeoMap() {
return centerGeoMap;
}
}
Agradeço por qualquer resposta ou opinião.