将z-index添加到Google Maps API v3自动填充搜索框

时间:2014-10-19 01:30:49

标签: javascript css google-maps-api-3 google-places-api

我正在使用Google Maps API v3中的Places search box,我正在尝试将搜索框放在DIV上。这个DIV的z-index为200 000,这个DIV的背景为{100}的z-index

CSS:

.dim-page-view-background {
    background-color : rgba(255, 255, 255, 0.7);
    background-image : url(../../images/backgrounds/lined.png);
    display : none;
    height : 100%;
    left : 0;
    position : absolute;
    top : 0;
    width : 100%;
    z-index : 100000;
}

.dim-page-view-content {
    background-color : #ffffff;
    border-radius : 10px;
    display : none;
    margin-left : 20px;
    padding : 25px 30px;
    position : absolute;
    text-align : justify;
    top : 60px;
    width : 500px;
    z-index : 200000;
}

HTML:

<div class="dim-page-view-background"></div>
<div class="dim-page-view-content"></div>

<input type="text" name="textfield-address" id="search-place">

JavaScript的:

function google_maps() {
    geocoder = new google.maps.Geocoder();

    var input = (document.getElementById('#search-place'));
    var search_field = new google.maps.places.SearchBox((input));

    map_options = {
        center: new google.maps.LatLng(59.4, 13.5),
        draggable: true,
        zoom: 4,
        minZoom: 3,
        maxZoom: 18,
        panControl: true,
        streetViewControl: false,
        zoomControl: true,
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById(id_google_maps), map_options);


    google.maps.event.addListener(search_field, 'places_changed', function() {
        // Run my code
    });
}

我希望你能得到你需要的所有代码:)我如何才能在dim-page-view-backgrounddim-page-view-content DIV上看到搜索结果? Demo(点击网站顶部菜单中的cog,在文本字段中输入占位符“Sökrefteren plats(resultatetärgömdbakominnehållet,sådetmåstefixas)”)。<) p>

0 个答案:

没有答案