Problemas com javascript e primefaces

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.