Basics of Creating Panoramas

The panorama submodule inserts a viewer that can show panorama images in a specified DOM element to enable you to offer the panorama services such as Street View and Aerial View.

For panorama examples, refer to Panorama examples.

Load submodules

To use the panorama services, you should load the JavaScript file of the panorama submodule. Load the file as in the code below.
This submodule requires the NAVER Maps API v3 to be loaded in advance. For more information, refer to Submodule System.

The NAVER Maps API v3 supports both http and https protocols.

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=panorama"></script>

Specify a DOM element for panoramas

Specify a DOM element to insert a map to your web page. Usually a <div></div> element is used.

<div id="pano" style="width:100%;height:400px;"></div>

If the size of PanoramaOptions is not specified when a map is initialized, the map is created in the same size as that of the map DOM container at the point of initialization. The size of the map is fixed until it is changed with the setSize method.

Set panorama options

Being created with object literals, panorama options are used to initialize properties of a panorama to create. For more information on panorama options, refer to PanoramaOptions specifications.

var panoramaOptions = {
    position: new naver.maps.LatLng(37.3599605, 127.1058814),
    size: new naver.maps.Size(800, 600),
    pov: {
        pan: -135,
        tilt: 29,
        fov: 100
    }
};

Create panoramas

The Panorama class represents panoramas. Create a new instance with the new operator.
To show a panorama, you should specify the DOM element to insert a panorama viewer into or its id.

var pano = new naver.maps.Panorama(document.getElementById("pano"), {
    position: new naver.maps.LatLng(37.3599605, 127.1058814)
});

Or

var pano = new naver.maps.Panorama("pano", {
    position: new naver.maps.LatLng(37.3599605, 127.1058814)
});

Pass the following two arguments when creating a new instance.

• Container element to show a panorama. It is required. You can directly pass the id string of the DOM element previously specified to show a panorama, or the reference to the DOM element by using the document.getElementById method.
• Panorama option used to initialize properties of a panorama. It is required.You must specify either panoId or position.

Panorama locations and POV

Panorama locations

The PanoramaLocation object represents location information of a panorama.

var pano = new naver.maps.Panorama("pano", {
    position: new naver.maps.LatLng(37.3599605, 127.1058814)
});

naver.maps.Event.addListener(pano, "pano_changed", function() {
    console.log("PanoramaLocation", pano.getLocation()); // panoId, title, address, coord, photodate
});

POV

The PanoramaPov object represents the point of view (POV) of a panorama.

var pano = new naver.maps.Panorama("pano", {
    position: new naver.maps.LatLng(37.3599605, 127.1058814)
});

naver.maps.Event.addListener(pano, "pov_changed", function() {
    console.log("PanoramaPov", pano.getPov()); // pan, tilt, fov
});

Panorama events

The Panorama object provides notifications of state changes, and events.

State change notifications

• pano_changed: Occurs when the panorama id is changed. This event does not occur when the POV is changed. It occurs when the panorama id or location is changed to get a new panorama.
• pov_changed: Occurs when the panorama POV is changed. This event does not occur when the panorama id or location is changed.

Events

• init: Occurs when the panorama initialization is completed. If you need to add an overlay, such as a marker, on the panorama, you should do that after this event occurs.
• pano_status: Occurs when the panorama is viewed. It is OK if the panorama is successfully viewed, and ERROR if it is not successfully viewed or there is no panorama to view.

var pano = new naver.maps.Panorama("pano", {
    position: new naver.maps.LatLng(37.3599605, 127.1058814),
    pov: {
        pan: -135,
        tilt: 29,
        fov: 100
    },
    visible: false
});

naver.maps.Event.addListener(pano, "init", function() {
    pano.setVisible(true);
});

naver.maps.Event.addListener(pano, "pano_status", function(status) {
    $("#pano_status_cell").text(status + ", " + pano.getPanoId());
});

naver.maps.Event.addListener(pano, "pano_changed", function() {
    $("#id_cell").text(pano.getPanoId());
    $("#position_cell").text(pano.getPosition());
    $("#roadname_cell").text(pano.getLocation().title);
    $("#address_cell").text(pano.getLocation().address);
    $("#photodate_cell").text(pano.getLocation().photodate);
});

naver.maps.Event.addListener(pano, "pov_changed", function() {
    $("#pan_cell").text(pano.getPov().pan);
    $("#tilt_cell").text(pano.getPov().tilt);
    $("#fov_cell").text(pano.getPov().fov);

    $("#zoom_cell").text(pano.getZoom());
    $("#min_zoom_cell").text(pano.getMinZoom());
    $("#max_zoom_cell").text(pano.getMaxZoom());
});

This example contains jQuery code.

Examples: Handling panorama events