Ground Overlays

A ground overlay places an image at the specified location (coordinate bounds) on a map, like placing a tile. So, it behaves just like a tile, as users drag, zoom in or out the map.

Add a ground overlay

To use a ground overlay, you should create an object of the GroundOverlay class. Pass an image URL, coordinate bounds, and GroundOverlayOptions object literal as arguments to a constructor.

The following code example places a satellite map image on the basic map.

var bounds = new naver.maps.LatLngBounds(
        new naver.maps.LatLng(36.634249797, 127.129160067),
        new naver.maps.LatLng(36.734249797, 127.410516004)
    );

var map = new naver.maps.Map("map", {
    zoom: 8,
    center: new naver.maps.LatLng(36.634249797, 127.129160067),
    mapTypeId: "normal"
});

var groundOverlay = new naver.maps.GroundOverlay(
    "../images/naver-satellite.png",
    bounds,
    {
        opacity: 1,
        clickable: false
    }
);

groundOverlay.setMap(map);

Examples: Displaying a ground overlay

Remove a ground overlay

To remove a ground overlay, pass null to the setMap method of the ground overlay.

groundOverlay.setMap(null);