How open a google map in full screen on the same page using Google Maps Api v3?

Question

So, my question is - I have a small map on my page and I want open this map in a full screen on the same page by pressing a button and close it in the same way. I think it can be done by removing div styles when you press the button but I didn't succeed, may be this is a wrong way? I understand that is a simple question but my google skills aren't well developed and I just don't know how to ask this question properly, so I'm asking here.

My code is simply generated by GoogleMapsTileCutter plus I've added some code from here for limit panning. This is all code that I have done.

<!DOCTYPE html>
<html lang="en">
   <head>
    <title>PS_Bramus.GoogleMapsTileCutter</title>
    <meta charset="utf-8" />
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width:100%;
            height:100%;
            color: #CCC;
            background: #EFEFEF;
        }
        span.loading {
            display: block;
            text-align: center;
            font: 300 italic 72px/400px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
        }
    </style>
</head>
<body>
    <div id="map"><span class="loading">loading tiles...</span></div>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>


        /*
         * = PS_Bramus.GoogleMapsTileCutter Config
         * ----------------
         */

            var repeatOnXAxis = false; // Do we need to repeat the image on the X-axis? Most likely you'll want to set this to false



        /*
         * Helper function which normalizes the coords so that tiles can repeat across the X-axis (horizontally) like the standard Google map tiles.
         * ----------------
         */

            function getNormalizedCoord(coord, zoom) {
                if (!repeatOnXAxis) return coord;

                var y = coord.y;
                var x = coord.x;

                // tile range in one direction range is dependent on zoom level
                // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
                var tileRange = 1 << zoom;

                // don't repeat across Y-axis (vertically)
                if (y < 0 || y >= tileRange) {
                    return null;
                }

                // repeat across X-axis
                if (x < 0 || x >= tileRange) {
                    x = (x % tileRange + tileRange) % tileRange;
                }

                return {
                    x: x,
                    y: y
                };

            }


        /*
         * Main Core
         * ----------------
         */

            window.onload = function() {

                // Define our custom map type
                var customMapType = new google.maps.ImageMapType({
                    getTileUrl: function(coord, zoom) {
                        var normalizedCoord = getNormalizedCoord(coord, zoom);
                        if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
                            return zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
                        } else {
                            return 'empty.jpg';
                        }
                    },
                    tileSize: new google.maps.Size(256, 256),
                    maxZoom: 5,
                    name: 'PS_Bramus.GoogleMapsTileCutter'
                });

                // Basic options for our map
                var myOptions = {
                    center: new google.maps.LatLng(0, 0),
                    zoom: 3,
                    minZoom: 3,
                    disableDefaultUI: true,
                    streetViewControl: false,
                    mapTypeControl: false,
                    mapTypeControlOptions: {
                        mapTypeIds: ["custom"]
                    }
                };

                // Init the map and hook our custom map type to it
                var map = new google.maps.Map(document.getElementById('map'), myOptions);
                map.mapTypes.set('custom', customMapType);
                map.setMapTypeId('custom');

                // bounds of the desired area
                var allowedBounds = new google.maps.LatLngBounds(
                     new google.maps.LatLng(-47,-95.61), 
                     new google.maps.LatLng(47,95.61)
                );
                var lastValidCenter = map.getCenter();

                google.maps.event.addListener(map, 'center_changed', function() {
                    if (allowedBounds.contains(map.getCenter())) {
                        // still within valid bounds, so save the last valid position
                        lastValidCenter = map.getCenter();
                        return; 
                    }

                    // not valid anymore => return to last valid position
                    map.panTo(lastValidCenter);
                });

            }
    </script>

</body>

Give some code you've done so far ? – Preview Dec 01 '13 at 22:41 — Preview, Dec 01 '13 at 22:41
Added some code that I've done. – user2596615 Dec 02 '13 at 12:00 — user2596615, Dec 02 '13 at 12:00

score 2 · Accepted Answer · answered Dec 02 '13 at 00:53

If it's a matter of simply resizing your map div, then the following JavaScript should lead you in the right direction:

function resizeMap() {
    var myMap = document.getElementById('map-canvas');
    myMap.style.height = 100%;
    myMap.style.width = 100%;
}

Note that the percentages are only relative to ancestor elements of your map div.

Then you'd map your buttons onclick to the resizeMap() function and you're set!

If you wanted a jQuery approach, this is what the above code could look like:

function resizeMap() {
    $("#map-canvas").css({height: 100%, width: 100%});
}

To revert the map back to its original width and height, you could first check if the width and height are set to 100%, then resize, but a more elegant solution would be to use a class instead of inline styles, which could resemble the following:

function resizeMap() {
    var myMap = document.getElementById('map-canvas');
    myMap.classList.toggle("fullscreen");
}

Then in your css you can have:

.fullscreen {
    width: 100%;
    height: 100%;
}

Clicking the button would just toggle between turning the class on and off.

Ok, but how the button should look like because doesn't work, I think may be it's because I have installed the styles of map-canvas wrong? — user2596615, Dec 02 '13 at 13:14
In the code that you've just provided, we can see that your map div doesn't have an ID of "map-canvas", but rather just "map". — LarryFisherman, Dec 02 '13 at 21:41
And the last question is - how provide loading of a map in a hidden form? I'm asking because your example provides loading of a map in a full screen mode and only after that I can toggle the map view using the button, and also because I've tried to provide loading of a map in hidden form using css styles but the map after that looks like [this](http://i.imgur.com/Yfn0MV2.png). I have no idea why a part of the google tiles not loaded, can you explain why? — user2596615, Dec 05 '13 at 13:07

score 0 · Answer 2 · edited Oct 01 '20 at 06:47

0

Like this, the answers above do not work.

var mapOptions = {
       center: myCenter,
       zoom: 9,
       fullscreenControl: true
};

edited Oct 01 '20 at 06:47

Jignesh Joisar

13,720
5
57
57

answered Feb 01 '17 at 11:51

Olav Ask Dybdahl

1

How open a google map in full screen on the same page using Google Maps Api v3?

2 Answers2