Google Maps plugin for Craft CMS

Ground Overlays

Sometimes the most useful map is an image. A floor plan, a campus map, or a historic map can be placed directly onto a dynamic map, and stretched to cover the exact area it shows. Google calls this a ground overlay (opens new window).

The groundOverlay method is part of the Universal API, so you can use it in any available language...

map.groundOverlay(url, bounds, options);

The url is the location of the image, and the bounds determine where the image will be placed. Each edge of the image is pinned to a line of latitude or longitude...

map.groundOverlay('/images/historic-bermuda.jpg', {
    'north': 32.3960,
    'south': 32.2460,
    'east': -64.6420,
    'west': -64.8880
}, {
    'id': 'my-overlay',
    'opacity': 0.75
});

The image will be stretched to fill those bounds, so be sure the image has been cropped to match the area it covers.

# The options parameter

All options are optional.

Option Type Description
id string Reference point for each ground overlay.
opacity float Opacity of the image, from 0 (invisible) to 1 (solid). Defaults to 1.
clickable bool If false, the image will ignore clicks.

No Map ID needed

Unlike datasets and boundaries, a ground overlay works on any map.

# Bringing the image into view

Adding a ground overlay will not move the map. To bring the image into view, set the map's center and zoom, or call fit after adding the image...

map.groundOverlay(url, bounds).fit();

# Hiding or showing a ground overlay

To dynamically hide or show a ground overlay, use hideGroundOverlay and showGroundOverlay...

// Hide the ground overlay
map.hideGroundOverlay('my-overlay');

// Show the ground overlay
map.showGroundOverlay('my-overlay');

# Beyond hiding and showing

When you need to do more than hide or show an image, you can get the raw Google Ground Overlay object (opens new window), and manipulate it further using Google's own API.

This method is only available in JavaScript.

// Get the raw Google Ground Overlay object
const overlay = map.getGroundOverlay('my-overlay');

← Datasets & Boundaries →