谷歌地图API全屏 [英] google maps api full screen

问题描述

嗨我工作的，需要一个特定的全屏谷歌地图页眉和页脚之间坐一个项目。我敢肯定的答案很简单，但想到我会问反正。该项目包括一个表单，用户可以删除标志，一旦他们填写他们的地址等，不知道是否有任何的定制可能会干扰或任何...

当我在过去的谷歌地图API的工作我通常只是改变CSS的高度为100％，但由于某些原因，而不是改变它的大小完全删除该地图。

  #map {
高度：500像素;
宽度：1200像素;
}
 

这里的code。

  VAR地图;
VAR标记;
VAR经度= -1.8822221000000354;
VAR纬度= 50.72569620000001;
变种变焦= 20;
VAR边界=新的google.maps.LatLngBounds（）;
VAR标记;
VAR new_marker;
VAR℃;
变种popupbubblepath = LT;％= this.popupbubble.ToString（）％取代;
VAR信息窗口=新google.maps.InfoWindow（）;
VAR IB;功能LoadMap（）{    //创建的样式的数组。
    VAR风格= [
        {
            造型器：
                {饱和度：-100}，{亮度：-100}
            ]
        }，{
            类型特征：一切，
            元素类型：一切，        }
    ];    //创建一个新StyledMapType的对象，并向它的样式数组
    //以及名称，以在地图上型对照显示。
    // VAR styledMap =新的google.maps.StyledMapType（款式，{名字：样式地图}）;    VAR myOptions = {
        变焦：变焦，
        中心：新google.maps.LatLng（经纬度），
        MapTypeControl中：假的，
        scaleControl：假的，
        将streetViewControl：真实，
        overviewMapControl：假的，
        zoomControl，用于：真实，
        mapTypeControlOptions中：{
            风格：google.maps.MapTypeControlStyle.DROPDOWN_MENU，
            位置：google.maps.ControlPosition.LEFT_BOTTOM
        }，
        ZoomControlOptions来：{
            风格：google.maps.ZoomControlStyle.SMALL
        }，
        panControl：假的，
        mapTypeId设为：google.maps.MapTypeId.ROADMAP
    }    地图=新google.maps.Map（的document.getElementById（地图），myOptions）;
 

解决方案

的问题是与你的HTML不是你的JavaScript。尝试后续

 ＆LT; D​​IV ID ='包装'＆GT;
     ＆LT; D​​IV ID ='头'＆GT;头的东西＆LT; D​​IV＆GT;
     ＆LT; D​​IV ID ='地图画布'＆GT;＆LT; / DIV＆GT;
     ＆LT; D​​IV ID ='尾'＆GT;页脚东西＆LT; D​​IV＆GT;
＆LT; / DIV＆GT;
 

添加以下CSS

  HTML，身体，#wrapper指定{
    高度：100％;
    宽度：100％;
}
{的#header
    高度：100像素; //管他呢。注像素不是％。
    宽度：100％;
}
#footer {
    高度：100像素; //管他呢。注像素不是％。
    宽度：100％;
}
＃地图帆布{
    高度：100％;
    宽度：100％;
    的margin-top：100px的;
    保证金底：100像素;}
 

我没有得到一个机会，但测试，但是这应该给你需要做什么的想法。

Hi i'm working on a project that requires a specific full screen google map to sit between a header and footer. I'm sure the answer is quite simple but thought i'd ask anyway. The project consists of a form where users can drop markers once they've filled in their address etc, not sure if any of the customisation might have interfered or anything...

When I've worked with the google map API in the past I'd normally just change the css height to 100% but for some reason instead of changing the size it removes the map entirely.

#map {
height:500px;
width:1200px;
}

Here's the code.

var map;
var marker;
var Longitude = -1.8822221000000354;
var Latitude = 50.72569620000001;
var zoom = 20;
var bounds = new google.maps.LatLngBounds();
var markers;
var new_marker;
var C;
var popupbubblepath = <%= this.popupbubble.ToString() %>;
var infowindow = new google.maps.InfoWindow();
var ib;

function LoadMap() {

    // Create an array of styles.
    var styles = [
        {
            stylers: [
                { saturation: -100 }, { lightness: -100 }
            ]
        },{
            featureType: "all",
            elementType: "all",

        }
    ];

    // Create a new StyledMapType object, passing it the array of styles,
    // as well as the name to be displayed on the map type control.
    //var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});

    var myOptions = {
        zoom: zoom,
        center: new google.maps.LatLng(Latitude, Longitude),
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: true,
        overviewMapControl: false,
        zoomControl: true,
        mapTypeControlOptions: {
            style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position:google.maps.ControlPosition.LEFT_BOTTOM 
        },
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        panControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map"), myOptions);

解决方案

The issue is with your html not with your javascript. try the follow

<div id='wrapper'>
     <div id='header'>header stuff<div>
     <div id='map-canvas'></div>
     <div id='footer'>footer stuff<div>
</div>

Add the following css

html, body, #wrapper{
    height: 100%;
    width: 100%;
}
#header{
    height: 100px; //or whatever. Note px not %.
    width: 100%;
}
#footer{
    height: 100px; //or whatever. Note px not %.
    width: 100%;
}
#map-canvas{
    height: 100%;
    width: 100%;
    margin-top: 100px;
    margin-bottom: 100px;

}

I didn't get a chance to test this yet, but this should give you an idea of what needs to be done.

这篇关于谷歌地图API全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！