Basics of Creating Maps

A Map object represents a map in a specified DOM element. Refer to Basic map.

Initialize a map

To initialize a map, you should specify the DOM element to represent the map in or its id.

var map = new naver.maps.Map(document.getElementById('map'));

Or

var map = new naver.maps.Map('map');

Specify a map type

A Map object has a map type. To specify a map type, use MapOptions when initializing the map, or use the setMapTypeId method.

var map = new naver.maps.Map('map', {
    mapTypeId: naver.maps.MapTypeId.HYBRID
});

Or

var maps = new naver.maps.Map('map');

map.setMapTypeId(naver.maps.MapTypeId.HYBRID);

Move a map

You can move a map by using its center coordinates, zoom level and coordinate bounds. You can also use screen pixel coordinates to move your map by the specified screen coordinates.

var jeju = new naver.maps.LatLng(33.3590628, 126.534361);

map.setCenter(jeju); // Change the center coordinates
map.setZoom(13);     // Change the zoom level

var seoul = new naver.maps.LatLngBounds(
    new naver.maps.LatLng(37.42829747263545, 126.76620435615891),
    new naver.maps.LatLng(37.7010174173061, 127.18379493229875));

map.fitBounds(seoul); // Move the coordinate bounds

map.panBy(new naver.maps.Point(10, 10)); // Move to the bottom right by 10 px

When the fitBounds method is used, the NAVER Maps API v3 moves the map by calculating the best center coordinates and zoom level to show the coordinate bounds on the screen.