Form does not appear on google maps in expanded mode

Question

I’m a beginner in javascript and css. The program was developed in . net vistual studio. The problem is this: I have a page that has a map where I make a circle in a region of it. The behavior that the system should have is when I click the circle button, the system should open a form with the information of the region where I made the circle. However, when I expand the map, the form is hidden behind the map. Can anyone tell me how to bring this form forward in the expanded form of the map? Just below I added a print. The blue part of the map is where the window should appear, however it appears behind the map. I tried using z-index, but it didn’t work.

function configPontosMapa(sender, args) {
var label, marker, dataItem, location, circle, coordenadas, polygon, tableView, lats,
    lngs, idPonto, nome, barra, shape, idPtoGlobalAux;
var dataItems = $find(gridPontos).get_masterTableView().get_dataItems();
var latlngBounds = new google.maps.LatLngBounds();

mapa.ClearMap();
MapaLabel.ClearLabels();
clearMapaBotao();
clearMapaBotaoSubPonto();

for (var i = 0; i < dataItems.length; i++) {
    dataItem = dataItems[i];

    idPonto = dataItem.getDataKeyValue("IdPontoGeografico");
    idPtoGlobalAux = dataItem.getDataKeyValue("IdPontoGlobal");
    nome = dataItem.getDataKeyValue("Nome");
    lats = dataItem.getDataKeyValue("LatitudesFormatadas").split('|');
    lngs = dataItem.getDataKeyValue("LongitudesFormatadas").split('|');

    if (lats.length == 1) {
        location = new google.maps.LatLng(parseFloat(lats[0]), parseFloat(lngs[0]));
        var raio = parseFloat(dataItem.getDataKeyValue("Raio"));
        if (!raio) {
            raio = 1;
        }
        circle = new google.maps.Circle({
            center: location,
            radius: raio,
            strokeColor: corPadrao,
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: corPadrao,
            fillOpacity: 0.15,
            map: mapa.Mapa,
            entity: idPonto,
            idPontoGlobal: idPtoGlobalAux,
            zIndex: 0
        });


        if (idPtoGlobalAux) {
            barra = new MapaBarraBotao(mapa.Mapa, circle.getCenter(), circle, showModalPontoGlobal);
        }
        else {
            barra = new MapaBarraBotao(mapa.Mapa, circle.getCenter(), circle, showModalNovoPonto);
        }
        circle.barraBotao = barra;

        shape = circle;

        mapa.NewCircleByShape(circle);

        latlngBounds.union(circle.getBounds());

        marker = mapa.NewMarker();
        marker.bindTo('position', circle, 'center');
        marker.setOptions({ ponto: circle, title: nome });
        marker.setIcon('../../../Images/Ponto/MarcadorPonto1.png');

        //label.bindEvents(marker);

        circle.setEditable(true);
        circle.barraBotao.ocultaBotaoSalvarCancelar();

        google.maps.event.addListener(circle, 'rightclick', function () {
            novoSubponto(this);
        });

        google.maps.event.addListener(circle, 'center_changed', function () {
            this.setOptions({ fillColor: corAlterado, strokeColor: corAlterado });
            this.barraBotao.draw(this.getCenter());
        });

        google.maps.event.addListener(circle, 'radius_changed', function () {
            this.setOptions({ fillColor: corAlterado, strokeColor: corAlterado });
        });
    } else {
        coordenadas = [];
        for (var j = 0; j < lats.length; j++) {
            coordenadas[j] = Mapa.NewLatLng(parseFloat(lats[j]), parseFloat(lngs[j]));
        }

        latlngBounds.extend(coordenadas[0]);

        polygon = mapa.NewPolygonByPaths(coordenadas);
        polygon.setEditable(true);
        polygon.getPath().obj = polygon;

        if (idPtoGlobalAux) {
            barra = new MapaBarraBotao(mapa.Mapa, polygon.getPath().getAt(0), polygon, showModalPontoGlobal);
        }
        else {
            barra = new MapaBarraBotao(mapa.Mapa, polygon.getPath().getAt(0), polygon, showModalNovoPonto);
        }
        polygon.barraBotao = barra;

        shape = polygon;

        polygon.setOptions({
            entity: idPonto,
            idPontoGlobal: idPtoGlobalAux,
            barraBotao: barra,
            zIndex: 0
        });

        marker = mapa.NewMarkerAtPoint(coordenadas[0]);
        marker.setOptions({ ponto: polygon, title: nome });
        marker.setIcon('../../../Images/Ponto/MarcadorPonto1.png');

        polygon.barraBotao.ocultaBotaoSalvarCancelar();
        polygon.marker = marker;

        google.maps.event.addListener(polygon.getPath(), 'set_at', function () {
            var coord = this.getAt(0);
            this.obj.setOptions({ fillColor: corAlterado, strokeColor: corAlterado });
            this.obj.barraBotao.draw(coord);
            this.obj.label.draw(coord);
            this.obj.marker.setPosition(coord);
        });

        google.maps.event.addListener(polygon.getPath(), 'insert_at', function () {
            this.obj.setOptions({ fillColor: corAlterado, strokeColor: corAlterado });
            this.obj.barraBotao.draw(this.getAt(0));
        });

        google.maps.event.addListener(polygon, 'rightclick', function () {
            novoSubPoligono(this);
        });
    }

    google.maps.event.addListener(marker, 'click', function () {
        mapa.Mapa.setCenter(this.getPosition());
        mapa.Mapa.setZoom(15);
    });

    if (idPonto == 0) {
        label = createLabel(dataItem.getDataKeyValue("Nome"), null, shape, showModalPontoGlobal);
    }
    else {
        label = createLabel(dataItem.getDataKeyValue("Nome"), null, shape);
    }

    label.bindEvents(marker);

    shape.label = label;

    arrayBotao.push(barra);
}

mapa.SetBoundsCircle(latlngBounds);

}