Question

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

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

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

Answer 1

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

HTML CODE

<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 CODE

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中看到的绝对位置。

Answer 2

它有效，但当然你应该添加所有脚本：

<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>

Answer 3

以下是地图的自定义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>

将其放在页面底部，然后将div添加到HTML正文

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

Div的css是

#map{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    position:absolute;
}

现在使用任何类名称或Id名称在HTML标记中创建任何div，并将其放置在您想要放置某个css的位置，如果您想重新设置地图，请使用此工具。这非常有用

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

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

3 个答案: