2

こんにちは、特定の全画面表示の Google マップをヘッダーとフッターの間に配置する必要があるプロジェクトに取り組んでいます。答えは非常に簡単だと思いますが、とにかく尋ねたいと思いました。このプロジェクトは、ユーザーがアドレスなどを入力したらマーカーをドロップできるフォームで構成されています。カスタマイズが干渉したかどうかはわかりません...

過去に Google マップ API を使用していたとき、通常は css の高さを 100% に変更していましたが、何らかの理由でサイズを変更する代わりにマップを完全に削除してしまいました。

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

これがコードです。

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

5 に答える 5

6

ここを見てください http://alistapart.com/article/conflictingabsolutepositions上、左、下、右の値を設定して絶対配置を使用します。

#map-canvas{
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 100px;
    right: 0;
}

ウィンドウを心ゆくまでドラッグして、マップがフル サイズのままであることを確認してください。レスポンシブ デザインを行う場合にも最適です。

于 2013-06-13T23:27:48.000 に答える