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

Question

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

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 )，要使颜色变为黑色和白色，您需要设置 map 样式，使 map 全屏你必须将宽度和高度设置为 100%，并且不要忘记你在 css 中看到的绝对位置。