Google地图未放大，页面加载时未显示标记

Question

I am facing issue with Google map. 我面临Google地图问题。 It is not properly displaying with marker on page load. 页面加载时无法正确显示带有标记的内容。 It appears to display properly with marker when we zoom in on displayed map. 当我们放大显示的地图时，它似乎可以用标记正确显示。

Any help appreciated. 任何帮助表示赞赏。

This is javascript code :- 这是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"));
});

This is HTML code :- 这是HTML代码：-

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

Answer 1

It's working fine to me. 对我来说很好。 What address did you provide. 您提供了什么地址。 Do you have errors in the console? 控制台中是否有错误？

Copy this exemple in a plain .html file and you will see it works. 将此示例复制到一个普通的.html文件中，您将看到它的工作原理。 Then figure out what is different in your entire page: 然后找出整个页面的不同之处：

<!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>

Google地图未放大，页面加载时未显示标记

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-12-15 13:09:33

Google地图未放大，页面加载时未显示标记

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-12-15 13:09:33

解决方案1
0 已采纳 2014-12-15 13:09:33