<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
}
@media (prefers-color-scheme: dark) {
body {
background-color: rgb(0, 0, 0);
}
}
.container {
display: grid;
grid-template-rows: max-content 1fr;
width: 100dvw;
height: 100dvh;
}
.container > :first-child {
margin: 1rem 0;
justify-self: center;
}
.container :is(#map, #detail) {
display: none;
}
.container:has(select[value=map]) #map,
.container:has(select[value=detail]) #detail {
display: block;
overflow: scroll;
}
</style>
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js"
crossorigin async
data-callback="initMapKit"
data-libraries="full-map,services"
data-token="IMPORTANT: ADD YOUR TOKEN HERE">
</script>
<script type="module">
const setupMapKitJs = async() => {
if (!window.mapkit || window.mapkit.loadedLibraries.length === 0) {
await new Promise(resolve => { window.initMapKit = resolve });
delete window.initMapKit;
}
};
const main = async() => {
await setupMapKitJs();
document.addEventListener("change", ev => {
if (ev.target?.tagName === "SELECT") {
ev.target.setAttribute("value", ev.target.value);
}
});
const id = "I63802885C8189B2B";
const lookup = new mapkit.PlaceLookup();
lookup.getPlace(id, annotatePlace);
};
const annotatePlace = (error, place) => {
const center = place.coordinate;
const span = new mapkit.CoordinateSpan(0.01, 0.01);
const region = new mapkit.CoordinateRegion(center, span);
const colorScheme = mapkit.Map.ColorSchemes.Adaptive;
const map = new mapkit.Map("map", { region, colorScheme });
const annotation = new mapkit.PlaceAnnotation(place);
map.addAnnotation(annotation);
const accessory = new mapkit.PlaceSelectionAccessory();
annotation.selectionAccessory = accessory;
const detailElement = document.getElementById("detail");
const detail = new mapkit.PlaceDetail(detailElement, place, {
colorScheme: mapkit.PlaceDetail.ColorSchemes.Adaptive
});
};
main();
</script>
</head>
<body>
<div class="container">
<div>
<select name="display" id="display" value="map">
<option value="map">Map</option>
<option value="detail">Place Detail</option>
</select>
</div>
<div id="map"></div>
<div id="detail"></div>
</div>
</body>
</html>