CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
user2596615
user2596615

Reputation: 131

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

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>

Upvotes: 2

Views: 21226

Answers (2)

Olav Ask Dybdahl
Olav Ask Dybdahl

Reputation: 1

Like this, the answers above do not work.

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

Upvotes: 0

LarryFisherman
LarryFisherman

Reputation: 322

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.

Upvotes: 2

Related Questions