` element of the page, with a Look Around preview displays inside the `
` element. The code centers the map on the area near the New York Public Library in New York City using a PlaceID. The Look Around preview on the map shows a view of The New York Public Library building. For more information on obtaining a PlaceID for a specific location. For more information on Place IDs, see [Identifying unique locations with Place IDs](https://developer.apple.com/maps/place-id-lookup/).
```javascript
async function initializeMapKitJS() {
if (!window.mapkit || window.mapkit.loadedLibraries.length === 0) {
await new Promise(res => window.initMapKit = res)
delete window.initMapKit
}
}
(async () => {
await initializeMapKitJS();
// Look Around view code
const placeLookup = new mapkit.PlaceLookup();
const place = await new Promise(
resolve => placeLookup.getPlace(
// The New York Public Library, 42nd St & 5th Ave,New York, NY
"I88F02FEA4499C61D",
(error, result) => resolve(result)
)
);
const lookAround = new mapkit.LookAroundPreview(
document.getElementById("container"),
place
);
const map = new mapkit.Map("map", {
center: place.coordinate,
cameraDistance: 7000,
showsPointsOfInterest: false,
annotations: [
new mapkit.PlaceAnnotation(place, {
selected: true
})
]
});
})()
```
## Handling Look Around loading states
LookAroundPreview object dispatches the following events:
- `load`: A DOM `Event`. The Look Around view loaded.
- `error`: A [`LookAroundErrorEvent`](/documentation/MapKitJS/LookAroundErrorEvent). The Look Around view encountered an error, for example, in an unsupported browser, or a location with no Look Around imagery.
- `readystatechange`: A DOM `Event`. The ready state changed.
- `open-dialog`: A DOM `Event`. The Look Around view is about to expand.
- `leave-dialog`: A DOM `Event`. The Look Around view is about to contract.
- `close`: A DOM `Event`. A person interacted with the close control.
## Topics
### Creating a Look Around preview
[`LookAroundPreview()`](/documentation/MapKitJS/LookAroundPreview/LookAroundPreviewConstructor)
Creates a Look Around preview you embed on a webpage and initializes it with the constructor options you choose.
### Controlling the interactions with a Look Around view
[`isNavigationEnabled`](/documentation/MapKitJS/AbstractLookAround/isNavigationEnabled)
A Boolean value that indicates whether someone can navigate inside the Look Around view.
[`isScrollEnabled`](/documentation/MapKitJS/AbstractLookAround/isScrollEnabled)
A Boolean value that indicates whether someone can scroll the Look Around view.
[`isZoomEnabled`](/documentation/MapKitJS/AbstractLookAround/isZoomEnabled)
A Boolean value that indicates whether someone can zoom the Look Around view.
### Controlling additional information the Look Around view displays
[`showsPointsOfInterest`](/documentation/MapKitJS/AbstractLookAround/showsPointsOfInterest)
A Boolean value that indicates whether the Look Around view shows points of interest (POIs).
[`showsRoadLabels`](/documentation/MapKitJS/AbstractLookAround/showsRoadLabels)
A Boolean value that indicates whether the Look Around view shows road labels.
### Positioning a badge
[`badgePosition`](/documentation/MapKitJS/LookAroundPreview/badgePosition)
A value you set to specify the position of a badge on the Look Around preview.
[`LookAroundBadgePosition`](/documentation/MapKitJS/LookAroundBadgePosition)
Values that control the positions of a badge on a Look Around preview.
### Controlling the LookAround dialog
[`openDialog`](/documentation/MapKitJS/AbstractLookAround/openDialog)
Opens the Look Around view in a dialog.
### Getting information about the Look Around object and its state
[`element`](/documentation/MapKitJS/AbstractLookAround/element)
A property that represents the Look Around view’s containing Document Object Model (DOM) element.
[`scene`](/documentation/MapKitJS/AbstractLookAround/scene)
The Look Around scene the framework is displaying.
[`padding`](/documentation/MapKitJS/AbstractLookAround/padding)
The padding options for the Look Around view.
[`readyState`](/documentation/MapKitJS/AbstractLookAround/readyState)
A value that represents the loading state of the Look Around object.
[`LookAroundReadyState`](/documentation/MapKitJS/LookAroundReadyState)
Values that indicate the state of the Look Around object in the browser.
### Closing and releasing a Look Around view
[`destroy()`](/documentation/MapKitJS/AbstractLookAround/destroy)
Releases the Look Around view and its resources from memory.
### Static properties
[`BadgePositions`](/documentation/MapKitJS/LookAroundPreview/BadgePositions)
A static property that allows you to access the Look Around ready state enumeration.
[`ReadyStates`](/documentation/MapKitJS/LookAroundPreview/ReadyStates)
A static property that allows you to access to access the look around ready state enumeration.
---
Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)