CODEWITHSUNDEEP
javascriptgoogle-maps
Nicolas
Nicolas

Reputation: 2367

Stop Google Map from loading beyond certain zoom level

I have a Google Map with some overlays, and when the zoom is higher than a value (say 17), the overlays completely cover the map.

I would like to prevent the map tiles from loading beyond that zoom level, as it is behind an overlay and it causes unnecessary data transfer. Is it possible?

EDIT:

I need something like:

google.maps.event.addListener(map, 'zoom_changed', function() { 
    if(map.getZoom()>=zoomToHideMap)
        stopLoadingTiles();
    else
        startLoadingTiles();
});

Thank you

Upvotes: 1

Views: 1126

Answers (3)

Nicolas
Nicolas

Reputation: 2367

My solution was changing the Map Type to null on the onzoomchanged event.

google.maps.event.addListener(map, 'onzoomchanged', function() {
    if(closeEnough)
        map.setMapTypeId(null)
    else
        map.setMapTypeId(google.maps.MapTypeId.SATELLITE)
})

As the overlay covered the map completely, I used it as a base layer instead of an overlay for a certain level of zoom on.

Upvotes: 1

Cybercartel
Cybercartel

Reputation: 12592

Not from me but interesting:


    
        
        
            html, body { height: 100%;}
            #map_canvas { height: 1000px;}
        
    
    
        
        
        
            var options =
            {
                getTileUrl: function(coord, zoom)
                {
                    // Don't load tiles for repeated maps
                    var tileRange = 1 = tileRange || coord.x = tileRange )
                        return null;

                    // Load the tile for the requested coordinate
                    var file = 'images/zoom' + zoom + '/tile_' + zoom + '_' + (coord.x) + '_' + (coord.y) + '.jpg';

                    return file;
                },
                tileSize: new google.maps.Size(256, 256),
                minZoom: 1,
                maxZoom: 9,
                radius: 1738000, // I got this from an example in the api, I have no idea what this does
                name: 'Map',
            };
            var mapOptions =
            {
                center: new google.maps.LatLng(0,0),
                zoom: 2,
                backgroundColor: '#000',
                streetViewControl: false,
                mapTypeControl: false
            };

            var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
            var mapType = new google.maps.ImageMapType(options);
            map.mapTypes.set('map', mapType);
            map.setMapTypeId('map');

            var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(0,0),
                    map: map,
                    title: "Test"
            });

Upvotes: 0

Oliver Moran
Oliver Moran

Reputation: 5167

If you use OpenLayers you can have more control over the behaviour of your maps. You can use still use Google's map images:

Upvotes: 0

Related Questions