Gmap adicionar markers com javascript

Front-end
#1

Estou com o seguinte problema:

Tenho os pontos do google maps em meu banco de dados, no qual já possuem a longitude a latitude e a cor de cada ponto, porém preciso pegar cada ponto desses e me trazer para o gmap da tela sem que a tela seja atualizada, por exemplo:

Adicionei um ponto novo em meu banco de dados, o javascript vai me trazer esse ponto e colocar no lugar dele, sem que o mapa atualize (fica um tela branca e da refresh)

Bom para trazer esse pontos do banco de dados para o meu bean ja tenho os métodos:

public void buscaTodosPontos() throws ParseException {

        emptyModel = new DefaultMapModel();
        for (Ponto p : pontoFacade.buscaPontoAbertos()) {
            emptyModel.addOverlay(new Marker(new LatLng(Double.parseDouble(p.getLatitude()), Double.parseDouble(p.getLongitude())), p.getPonto(), "", p.getCor()));
            System.out.println("--------" + pontos.size());
        }
        for (Marker m : emptyModel.getMarkers()) {
            m.setDraggable(true);
        }
        complementos = complementoFacade.findAll();
      
    }

o meu gmap:

<p:gmap id="map" center="#{opcaoBean.latLng}" zoom="#{opcaoBean.zoom}" type="HYBRID"   
                        style="width:100% ;height: 59em " model="#{opcaoBean.emptyModel}">
                    <p:ajax event="overlaySelect" listener="#{opcaoBean.onMarkerSelect}" />

única coisa que precisa fazer é pegar esse pontos do banco e colocar no gmap da tela sem que a tela precise carregar.
Vi um exemplo no primefaces, só que é de adicionar o ponto, tentei entender o código porém não entendo muito de javascript.
Agradeço imensamente quem poder me ajudar, obrigado.

#2