Question

美好的一天。

我需要谷歌地图选项方面的帮助。

我的网站已阻止Google地图。如果他在Google+（gmail）中注册，地图可以选择显示头像用户。头像具有圆形，diametr约为32px（示例中如何：https://developers.google.com/maps/documentation/javascript/examples/map-coordinates?hl=ru）。

我希望这个头像具有方形，大小为60x60px，边距为右70px。

怎么做？

谢谢你提前！

Google地图上的代码头像：

     <iframe src="https://www.google.com/maps/api/js/widget?pb=!1m2!1u22!2s12a!2sru#WzEsMTUxXQ.."
        frameborder="0" allowtransparency="true" scrolling="no"
        style="border: 0px; overflow: hidden; position: absolute; right: 0px; visibility: visible; width: 37px; height: 37px;">

    <html jstcache="0">
    <head>
        <link id="__2__" type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
        <style type="text/css">
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <style>div.login-control{color:white;font-family:Roboto,Arial;font-size:11px;font-weight:500}div.login{border-radius:2px;background-color:#5f84f2;padding:4px 8px 4px 8px;cursor:pointer}.login-control .tooltip-anchor{color:#5B5B5B;display:inline;font-family:Roboto,Arial;font-size:13px;font-weight:normal;-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;width:50%}.login-control .tooltip-content{background-color:white;font-weight:normal;right:0px}div.login a:link{text-decoration:none;color:inherit}div.login a:visited{color:inherit}div.login a:hover{text-decoration:underline}div.profile-photo{border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,0.2);width:32px;height:32px;overflow:hidden}div.profile-photo-light{background-color:white}div.profile-photo-light div{color:black}div.profile-photo-dark{background-color:black}div.profile-photo-dark:hover{background-color:white;color:black}div.profile-photo img{float:right;width:32px;height:32px}.tooltip-anchor{width:100%;position:relative;float:right;z-index:1}.tooltip-anchor>.tooltip-tip-inner{background-color:transparent;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid white;height:0;left:-8px;position:absolute;top:5px;width:0;z-index:1}.tooltip-content{border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);display:inline-block;line-height:100%;padding:10px 11px 9px 11px;position:absolute;margin:0;top:10px;white-space:nowrap}.tooltip-content a{color:#3a84df;text-decoration:none}.tooltip-content a:hover{text-decoration:underline}.tooltip-content .user-email,.tooltip-content .user-name{padding-right:12px}.sign-in-explanatory-text{margin-bottom:6px}.tooltip-content a{overflow:hidden}.g-logo{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/white_google_icon.png);background-size:14px 12px;display:inline-block;height:12px;padding-right:6px;vertical-align:middle;width:8px}.gm-china .g-logo{background-image:url(http://maps.gstatic.cn/mapfiles/api-3/images/white_google_icon.png)}@media (-webkit-min-device-pixel-ratio:1.2),(min-resolution:1.2dppx),(min-resolution:116dpi){.g-logo{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/white_google_icon_hdpi.png)}.gm-china .g-logo{background-image:url(http://maps.gstatic.cn/mapfiles/api-3/images/white_google_icon_hdpi.png)}}.sprite-sheet{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/signed_in_api_icons2.png);background-size:100px 50px}.gm-china .sprite-sheet{background-image:url(http://maps.gstatic.cn/mapfiles/embed/images/signed_in_api_icons2.png)}@media (-webkit-min-device-pixel-ratio:1.2),(min-resolution:1.2dppx),(min-resolution:116dpi){.sprite-sheet{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/signed_in_api_icons2_hdpi.png);background-size:100px 50px}.gm-china .sprite-sheet{background-image:url(http://maps.gstatic.cn/mapfiles/embed/images/signed_in_api_icons2_hdpi.png)}}</style>
    </head>
    <body jstcache="0" style="overflow: hidden;">
    <script>
        window.parent.frames['gm-master'].initWidget(window);
    </script>
    <div jstcache="0" style="position: absolute; top: 0px; right: 0px; width: 500px; height: 500px;">

        <div jstcache="0" style="position: absolute; top: 0px; right: 4px;">
            <div jstcache="69" class="login-control" jsaction="mouseenter:loginControl.resize;mouseleave:loginControl.resize;loginControl.resize">
                <div jstcache="2" jsaction="loginControl.login" class="login" style="display: none">
                    <a jstcache="3"> <span class="g-logo"> </span><span>Войти</span></a>
                </div>
                <div jstcache="4" class="profile-photo-light profile-photo" jsan="7.profile-photo-light,7.profile-photo">
                    <img jstcache="5" src="https://lh5.googleusercontent.com/-R_xY89bx5Ss/AAAAAAAAAAI/AAAAAAAAABg/xx_czODJ35o/s32-c/photo.jpg">
                </div>
                <div class="tooltip-anchor">
                    <div class="tooltip-tip-inner"></div>
                    <div class="tooltip-content">
                        <div jstcache="6" class="sign-in-explanatory-text" style="display: none">Войдите в свой аккаунт, и Google Карты станут ещё удобнее</div>
                        <div>
                            <a jstcache="7" class="" style="display: none"></a>
                            <a target="_blank" jstcache="8" href="https://plus.google.com/113092786366482147078?socpid=238&amp;socfid=maps_api_v3:logincontrol" class="user-name" jsan="7.user-name,8.href,0.target">+aleksandr</a>
                            <a target="blank_" jstcache="9" href="https://support.google.com/maps/?p=thirdpartymaps&amp;hl=ru" jsaction="mouseup:loginControl.learnMore">Подробнее...</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

标签：

<img jstcache="5" src="https://lh5.googleusercontent.com/-R_xY89bx5Ss/AAAAAAAAAAI/AAAAAAAAABg/xx_czODJ35o/s32-c/photo.jpg">

Answer 1

目前无法为Signed In体验自定义UI。我建议在描述您的用例的Google Maps API Issue Tracker上打开功能请求，以便团队开始跟踪对其的兴趣。

Answer 2

我知道这是2个月大的问题，已经选择了一个答案，但如果有人在寻找这个。你可以实现将css直接应用于iframe元素的边缘事物。

这是我正在使用的代码

iframe[src^="https://www.google.com/maps/api/js/widget?"] {
    margin-top: 50px;
    margin-right: 52px;
}

How it looks

谷歌地图设置头像用户

2 个答案: