Giters

GoogleWebComponents / google-map

Google Maps web components

Home Page:https://elements.polymer-project.org/elements/google-map

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Google Maps does not support alpha overlays

ebidel opened this issue · comments

commented

From @AOrobator on November 13, 2015 4:31

When I make an overlay over the google-map tag, it can't contain an alpha value in the background color, even an alpha value of 0xff. Otherwise the overlay will completely disappear.

Copied from original issue: Polymer/polymer#2729

commented

Can you provide working jsbin or that repos the problem? You can use polygit.org/ for the imports.

commented

Couldn't get the polygit import to quite work, but I hope the following gives you an idea of what's going on. The initial bug report was a bit mis worded. If you remove the alpha values on the div tag completely the color will be completely opaque and cover the google map. If it has any value set as its background color with alpha, even 0xff, it becomes completely translucent.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>0x1a4</title>
    {% load staticfiles %}
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="{% static "bower_components/google-map/google-map.html" %}">
    <link rel="import" href="{% static 'bower_components/paper-header-panel/paper-header-panel.html' %}">
    <link rel="import" href="{% static 'bower_components/paper-toolbar/paper-toolbar.html' %}">
</head>

<body class="fullbleed layout vertical">
    <paper-header-panel>
        <paper-toolbar class="tall">
            <div class="middle middle-container center horizontal layout">
                <div class="app-name" style="font-size: 60px;">Issue #232</div>
            </div>

            <div class="bottom bottom-container center horizontal layout">
                <div style="font-size: 20px;">Google Maps does not support alpha overlays</div>
            </div>

        </paper-toolbar>
        <google-map class="content fit oxley-map" latitude="37.8197" longitude="-122.4786" disable-zoom="true"
                    disable-default-ui="true"></google-map>
        <div class="content fit" style="background-color: #ff43a047;left: 0;top: 0;">
        </div>
    </paper-header-panel>
</body>
</html>