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

我想知道如何嵌入一个网页的全屏谷歌地图（作为背景）。我希望这张地图是自定义的，没有默认控件，您可以在常规的谷歌地图在线界面中使用（只能用鼠标滚动）。下面是我试图实现的一个例子：

---

任何洞察都会很好。我不熟悉编码。

这很简单，我在这里举了一个例子，还添加了下面的代码：

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>

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

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

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
    });

});

JAVASCRIPT代码

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

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

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

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

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

（请参阅）；要使颜色为黑白，您需要设置地图样式；要使地图全屏显示，您必须将宽度和高度设置为100%，并且不要忘记css中显示的绝对位置

下面是Map的定制Javascript代码

<script type="text/javascript">
            google.maps.event.addDomListener(window, 'load', init);

            function init() {
                var mapOptions = {
                    zoom: 11,
                    center: new google.maps.LatLng(40.578466,-73.840963),
                    scrollwheel: false, 
                    disableDefaultUI: true,

                    styles: [{stylers:[{hue:'#2c3e50'},{saturation:250}]},{featureType:'road',elementType:'geometry',stylers:[{lightness:50},{visibility:'simplified'}]},{featureType:'road',elementType:'labels',stylers:[{visibility:'off'}]}]
                };

                var mapElement = document.getElementById('map');

                var map = new google.maps.Map(mapElement, mapOptions);

                 var marker = new google.maps.Marker({
                            position: map.getCenter(),
                            map: map,
                            title: 'Click to zoom'
                            });
            }
  </script>

现在，用任何类名或Id名在HTML标记中创建任何div，并给它一个位置，在该位置放置一些css，如果要重新设置地图样式，请使用此工具。它非常有用

---

它可以工作，但您当然应该添加所有脚本：

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>     
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

阅读谷歌地图api。您可以轻松地从地图中删除控件。把它作为背景。您创建一个包含地图的div，并将div设置为100%高度/宽度和

位置：绝对

顶部的内容考虑使用，这是一个非常酷的嵌入自定义地图的服务。paulalexandru：我尝试使用上述示例。我把每一块都放在了正确的地方，什么也没发生。我的页面是空白的，没有地图……我做错了什么？我是否必须在某个地方激活API密钥（我昨天尝试过这样做）…对于我天真的编码问题，我提前表示歉意…另外，我正在通过wordpress Patti主题使用看似HTML5的东西…谢谢你最新消息：我照你说的做了，但我的网页上什么都没有显示（完全白色）…这与之前出现的不同…因此可能正在取得某种进展…只是为了明确我所做的：1）将上述每个类别（HTML、CSS、JS）中的编码插入wordpress中的相应位置…我用上面新回复的链接替换了HTML中的所有内容。我目前在一个临时网站上主持。。。。访问：你们可以看到我所说的“联系方式2”和“联系方式3”的意思。什么都并没有出现。再次感谢你的帮助，我会的。这是非常有用的。我不明白为什么代码会很混乱。但我想我理解你重复编码的意思。我把从查看源代码到我的wordpress文本编辑器中的所有内容都输入到了我的wordpress文本编辑器中…它也在主题选项中的CSS和JS的单独框中。一个令人困惑的问题是，它仍然无法正确显示在我的wordpress站点中…即使我将所有内容从fiddle复制并粘贴到新的fiddle窗口中，它也无法工作。这一定是jquery的问题，因为我输入的所有内容都是正确的。删除