Full screen map and mini map
The following code example displays a full screen map and mini map. This example contains jQuery code.
If the `size` property of `MapOptions` is omitted upon map initialization, the map automatically resizes based on the HTML rendering size of a DOM element.
This code displays a map in full screen mode, which requires a new window to open a map. Click here to view the map.
// If the size option is omitted, the map automatically resizes based on the HTML rendering size of a DOM element.
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.5666805, 126.9784147),
zoom: 13,
minZoom: 6,
mapTypeId: naver.maps.MapTypeId.HYBRID,
zoomControl: true,
zoomControlOptions: {
position: naver.maps.Position.TOP_RIGHT
},
mapDataControl: false,
logoControlOptions: {
position: naver.maps.Position.LEFT_BOTTOM
},
disableKineticPan: false
});
var semaphore = false;
naver.maps.Event.once(map, 'init', function() {
map.setOptions({
mapTypeControl: true,
scaleControl: false,
logoControl: false
});
// Add an HTML element to which the mini map is embedded to the controls object. To place it at the bottom right, disable other options for the moment.
map.controls[naver.maps.Position.BOTTOM_RIGHT].push($("#minimap")[0]);
map.setOptions({
scaleControl: true,
});
var minimap = new naver.maps.Map('minimap', { // Create a mini map.
bounds: map.getBounds(),
scrollWheel: false,
scaleControl: false,
mapDataControl: false,
logoControl: false
});
naver.maps.Event.addListener(map, 'bounds_changed', function(bounds) {
if (semaphore) return;
minimap.fitBounds(bounds);
});
naver.maps.Event.addListener(map, 'mapTypeId_changed', function(mapTypeId) {
var toTypes = {
"normal": "hybrid",
"terrain": "satellite",
"satellite": "terrain",
"hybrid": "normal"
};
minimap.setMapTypeId(toTypes[mapTypeId]);
});
naver.maps.Event.addListener(minimap, 'drag', function() {
semaphore = true;
map.panTo(minimap.getCenter());
naver.maps.Event.once(map, 'idle', function() {
semaphore = false;
});
});
});
