.map{
    width: 100%;
    height: 300px;
    position: relative;
}
.map iframe,
.map .map-preload{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
}
.map .map-preload:before{
    content:'';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background-color: #cecece;
}
.map .map-preload:after{
    content:'\2688';
    position: absolute;
    top:calc(50% - 15px);
    left:calc(50% - 15px);
    width:30px;
    height:30px;
    line-height: 1;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation:map-preload 2s linear infinite;
}
@keyframes map-preload{
    from{
        transform:rotate(0);
    }
    to{
        transform:rotate(360deg);
    }
}