Html 将自定义全屏谷歌地图嵌入网页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23091732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Embed Custom Fullscreen Google Map into webpage
提问by user3537256
I want to know how to embed a fullscreen google map for a webpage (as background). I'd like this map to be custom with no default controlsyou'd use in the regular google maps online interface (only be able to scroll with mouse). Here's an example of what I'm trying to achieve:
我想知道如何为网页（作为背景）嵌入全屏谷歌地图。我希望这张地图是自定义的，没有您在常规谷歌地图在线界面中使用的默认控件（只能用鼠标滚动）。这是我要实现的目标的示例：
Any insight would be great. I'm new to coding.
任何见解都会很棒。我是编码新手。
回答by paulalexandru
It is very simple, i made an example here http://jsfiddle.net/paulalexandru/T2F5Z/and i also added the code bellow:
这很简单，我在这里做了一个例子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 CODE
代码
#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
});
});
Note: To remove the controls you need to use disableDefaultUI: true(see https://developers.google.com/maps/documentation/javascript/examples/control-disableUI), to make the color black and white you need to set the map style, to make the map fullscreen you have to set the width and height 100%, and don't forget the absolute position like you see in the css.
注意：要删除您需要使用的控件disableDefaultUI: true（请参阅https://developers.google.com/maps/documentation/javascript/examples/control-disableUI），要使颜色为黑白，您需要设置地图样式，要使地图全屏，您必须将宽度和高度设置为 100%，并且不要忘记您在 css 中看到的绝对位置。
回答by Kristof Van Cauwenbergh
It works, but of course you should add all scripts:
它有效，但当然您应该添加所有脚本：
<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>
回答by Harman Preet
Here is the Customized Javascript Code for 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>
Put it at the bottom of the page and then add a div to the HTML Body
放在页面底部，然后在HTML Body中添加一个div
<div id="map"></div>
And the css for the Div is
而 Div 的 css 是
#map{
width:100%;
height:100%;
margin:0;
padding:0;
position:absolute;
}
Now Create any div in your HTML Markup with any class name or Id name and give it a position where you want to place with some css and if you want to restyle your map use this tool . it is pretty useful
现在在您的 HTML 标记中使用任何类名或 Id 名称创建任何 div，并为其指定一个位置，您希望在其中放置一些 css，如果您想重新设置地图的样式，请使用此工具。它非常有用
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
