Google map is not zooming in & marker is not showing on page load

Question

I am facing issue with Google map. 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 :-

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

<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. 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 map is not zooming in & marker is not showing on page load

Question

1 answers

solution1
0 ACCPTED 2014-12-15 13:09:33

Google map is not zooming in & marker is not showing on page load

Question

1 answers

solution1 0 ACCPTED 2014-12-15 13:09:33

solution1
0 ACCPTED 2014-12-15 13:09:33