Window appears hidden behind google maps in expanded mode

Asked

Viewed 42 times

1

I am developing a webpage using the languages Asp, c#, javascript with Telerik framework. When I am on the map in expanded mode, I circle a region of the map, and I click on the button of that region, a window should appear with the information of the map. However, the window is hidden behind the map as shown in the attached figure. When the map is not in expanded mode, the window appears.

I tried to use z-index, however I was not successful.

inserir a descrição da imagem aqui Would anyone have any idea how to solve this problem?

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);
}
  • Hello Bianca! Access the chat that I might be able to help you.

  • Hi Sam. Would you have any tips?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.