CODEWITHSUNDEEP
javascripthtmlgoogle-mapsdomgoogle-maps-api-3
Dachi
Dachi

Reputation: 847

Google Maps Hidden Div Overflows half map

I'm using Google maps, with Drawning Manager

    var latlng = new google.maps.LatLng(41.7318187, 44.8627138);

    var mapOptions = {
        zoom: 8,
        center: latlng,
        disableDoubleClickZoom: true
    }

    bounds = new google.maps.LatLngBounds();

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    //Define a symbol using SVG path notation, with an opacity of 1.
    var lineSymbol = {
        path: 'M 0,-1 0,1',
        strokeOpacity: 1,
        scale: 4
    };

    drawingManager = new google.maps.drawing.DrawingManager({
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                google.maps.drawing.OverlayType.MARKER,
                google.maps.drawing.OverlayType.POLYLINE
            ]
        },
        markerOptions: {
            icon: $imgFolderFullPath + '/' + $('#TourObjectType').val() + '.png',
            draggable: true
        },
        polylineOptions: {
            strokeColor: $("#LineType").val()
        }
    });


    drawingManager.setMap(map);

The problem is when map renders some element that has visibility hidden and z-index 107 which overflows half of the map and i cant insert, edit, move, poly lines and markers in that part

enter image description here

DOM structure of the problematic part looks like this :

<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;">
  <div style="cursor: default; width: 53px; height: 191px; visibility: hidden;">...</div>
</div>

and also when i comment visibility hidden in the code snippet above, there is something like white comment box with star shown on the map

i what to know what causes the problem

Upvotes: 1

Views: 314

Answers (2)

Flo Win
Flo Win

Reputation: 184

I can not tell you why this occurs, only that for me it also does in the example that is provided in the documentation. You can't draw in that area, but you can zoom into it, etc. https://developers.google.com/maps/documentation/javascript/examples/drawing-tools.

EDIT: It seems to be a bug with the signed-in mode, as @MrUpsidown pointed out

Upvotes: 1

MrUpsidown
MrUpsidown

Reputation: 22490

This happens when the signed_in=true is used.

Bug report: https://code.google.com/p/gmaps-api-issues/issues/detail?id=7788

I added a link to this post in the bug report for reference. Hope Google will fix that very soon.

Upvotes: 1

Related Questions