将自定义全屏谷歌地图嵌入网页

Question

我想知道如何为网页嵌入全屏谷歌地图(作为背景).我希望这张地图是自定义的,没有您在常规谷歌地图在线界面中使用的默认控件(只能用鼠标滚动).这是我想要实现的一个例子:

http://www.ijb.ca/contact/

任何见解都会很棒.我是编码的新手.

Answer 1

这很简单,我在http://jsfiddle.net/paulalexandru/T2F5Z/做了一个例子,我还添加了以下代码:

HTML代码

<div id="map"></div>

<div id="menu">
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>
    <h4>Header 4</h4>
</div>

CSS代码

#map {
    height: 100%;
    width: 100%;
    left: 0;
    position: absolute;
    top: 0;    
}

#menu {
    position: absolute;
    top: 10px;
    left: 10px;
}

JAVASCRIPT代码

jQuery(document).ready(function () {
    var map;

    var style = [
        {
        stylers: [
            { saturation: "-100" },
            { lightness: "20" }
        ]
        },{
        featureType: "poi",
        stylers: [
            { visibility: "off" }
        ]
        },{
        featureType: "transit",
        stylers: [
            { visibility: "off" }
        ]
        },{
        featureType: "road",
        stylers: [
            { lightness: "50" },
            { visibility: "on" }
        ]
        },{
        featureType: "landscape",
        stylers: [
            { lightness: "50" }
        ]
        }
    ]

    var options = {
        zoom: 7,
        center:  new google.maps.LatLng(45.50867, -73.553992),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

    map = new google.maps.Map($('#map')[0], options);
    map.setOptions({
        styles: style
    });

});

注意:要删除您需要使用的控件disableDefaultUI: true(请参阅https://developers.google.com/maps/documentation/javascript/examples/control-disableUI),要使颜色为黑色和白色,您需要设置地图样式,要使地图全屏,你必须设置宽度和高度100%,并且不要忘记你在css中看到的绝对位置.