Javascript 谷歌地图未放大&页面加载时未显示标记_Javascript_Google Maps

Javascript 谷歌地图未放大&页面加载时未显示标记

javascript google-maps

Javascript 谷歌地图未放大&页面加载时未显示标记,javascript,google-maps,Javascript,Google Maps,我面临谷歌地图的问题。页面加载时未正确显示标记。当我们放大显示的地图时，它似乎正确地显示在标记上谢谢你的帮助这是javascript代码：- var GoogleMap = function(canvas, address) { var _parent = this; this.location = new google.maps.LatLng(-34.397, 150.644); var options = { center: this

我面临谷歌地图的问题。页面加载时未正确显示标记。当我们放大显示的地图时，它似乎正确地显示在标记上

谢谢你的帮助

这是javascript代码：-

var GoogleMap = function(canvas, address)
{
    var _parent = this;

    this.location = new google.maps.LatLng(-34.397, 150.644);

    var options = 
    {
        center: this.location,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: 
        {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_CENTER
        },
        streetViewControl: false
    };

    this.map = new google.maps.Map(canvas, options);

    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': address}, function(results, status) 
    {
        if (status != google.maps.GeocoderStatus.OK)
            return;

        _parent.location = results[0].geometry.location;

        var marker = new google.maps.Marker(
        {
            map: _parent.map,
            position: _parent.location
        }); 

        _parent.resize();
    });
};

GoogleMap.prototype.resize = function() 
{
    google.maps.event.trigger(this.map, "resize");

    this.map.setCenter(this.location);
}

var Maps = function(classes)
{

    var _parent = this;

    _parent.maps = new Array();

    classes.each(function()
    {
        _parent.maps.push(new GoogleMap($(this).get(0), $(this).attr("data-address")));  
    });
};

Maps.prototype.resize = function() 
{
    for (var cnt = 0; cnt < this.maps.length; cnt++) 
    {
        this.maps[cnt].resize();
    }
};

var maps;

$(window).load(function()
{
     maps = new Maps($(".gMapsCanvas"));
});

这是HTML代码：-

<div class="gMapsCanvas" data-address="Address,City,State,Country"></div>

这对我来说很好。你提供了什么地址。控制台中是否有错误

将此示例复制到一个plain.html文件中，您将看到它是有效的。然后找出整个页面的不同之处：

<!DOCTYPE html>
<html>
<head>    
    <title>Getting Zoom Demo</title>
    <style type="text/css">
        html, body{ height: 100%; height: 100%; margin: 0; padding: 0; }
        .gMapsCanvas{ height: 100%; width: 100%; min-width:500px; min-height:300px; }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>    
</head>
<body>
    <div>
        <label id="display-zoom-label">

        </label>
    </div>
    <div class="gMapsCanvas" data-address="3209 West Smith Valley Road, Greenwood, IN"></div>
    <script>
        var GoogleMap = function (canvas, address) {
            var _parent = this;

            this.location = new google.maps.LatLng(-34.397, 150.644);

            var options =
            {
                center: this.location,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControlOptions:
                {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.TOP_CENTER
                },
                streetViewControl: false
            };

            this.map = new google.maps.Map(canvas, options);

            var geocoder = new google.maps.Geocoder();

            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status != google.maps.GeocoderStatus.OK)
                    return;

                _parent.location = results[0].geometry.location;

                var marker = new google.maps.Marker(
                {
                    map: _parent.map,
                    position: _parent.location
                });

                _parent.resize();
            });
        };

        GoogleMap.prototype.resize = function () {
            google.maps.event.trigger(this.map, "resize");

            this.map.setCenter(this.location);
        }

        var Maps = function (classes) {

            var _parent = this;

            _parent.maps = new Array();

            classes.each(function () {
                _parent.maps.push(new GoogleMap($(this).get(0), $(this).attr("data-address")));
            });
        };

        Maps.prototype.resize = function () {
            for (var cnt = 0; cnt < this.maps.length; cnt++) {
                this.maps[cnt].resize();
            }
        };

        var maps;

        $(window).load(function () {
            maps = new Maps($(".gMapsCanvas"));
        });
    </script>
</body>
</html>

它对我有用，你提供了什么地址？这是一个例子地址3209西史密斯谷路，格林伍德，在。。控制台中没有错误。我用这个地址更新了我的exemble，它工作了，你测试了我的示例吗？谢谢你的代码。我已经测试了这个示例，它工作得很好。我的地图宽250像素，高250像素。当我使用100%宽度/高度时，我发现地图的某些部分是空的。如果在地图初始化后调整div的大小，则必须触发google.maps.event.triggermap，“resize”将填充空白。