灰色嵌入谷歌地图

时间:2012-03-07 17:05:23

标签: javascript google-maps google-maps-api-3

我试图使用在example中找到的示例,我可以显示主地图,但是小的是灰色的,我的意思是,没有地图。 我的代码出了什么问题?

@section Stylesheets只是来自ASPNET MVC 3,但无关紧要,可以输入为html。

提前致谢。吉列尔莫。

@section Stylesheets
{
<style type="text/css">

#minimap {
 position: absolute;
 right: 0;
 bottom: 0;
 width: 160px;
 height:150px;
 z-index: 100;
 visibility:visible;
 border-top: 4px double #bbb;
 border-left: 4px double #bbb;
}


#closebutton {
 position: absolute;
 right: 0;
 bottom: 0;
 background: url('http://maps.gstatic.com/mapfiles/mapcontrols3d7.png') no-repeat;
 background-position: -40px -386px;
 width: 19px;
 height: 19px;
 z-index: 110;
 cursor: pointer;
}

#closebutton.closed {
 background-position: -40px -405px;
}

</style>
}
@section Scripts
{
    <script type="text/javascript" src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
    <!--For the tabs in the infoWindow-->
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
}
<script type="text/javascript">

    function init(sv_visible) {
        var g = google.maps;
        var map, pano, mini;
        var mapDiv = document.getElementById('map_canvas');

        var center = new g.LatLng(37.422, -122.084);

        var optionsMainMap = {
            zoom: 13,
            center: center,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            panControl: true,
            scaleControl: true,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE
            }
        };

        map = new g.Map(mapDiv, optionsMainMap);

        var optionsMiniMap = {
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            panControl: true,
            scaleControl: true,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            }
        };

        var miniMapDiv = document.createElement("div");
        miniMapDiv.id = "minimap";
        miniMapDiv.style.visibility = "visible";

        mini = new g.Map(miniMapDiv, optionsMiniMap);
        mapDiv.appendChild(miniMapDiv);
    }

    window.onload = function () { init(true); };

</script>
<div id="map_canvas" style="width: 1870px; height: 804px;">
</div>
<div style="position: absolute; top: 10px; left: 680px; width: 210px">
</div>

1 个答案:

答案 0 :(得分:1)

问题在于嵌入式地图没有定义中心,当我定义它时,地图出现了。 问候。吉列尔莫。