View in English

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">

<style>

#container {
    height: 600px;
}
</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">
// Wait for MapKit JS to be ready to use.
const setupMapKitJs = async() => {
    // If MapKit JS is not yet loaded...
    if (!window.mapkit || window.mapkit.loadedLibraries.length === 0) {
        // ...await <script>'s data-callback (window.initMapKit).
        await new Promise(resolve => { window.initMapKit = resolve });
        // Clean up.
        delete window.initMapKit;
    }
};

/**
 * Script Entry Point
 */
const main = async() => {
    await setupMapKitJs();

    const addressFilter = mapkit.AddressFilter.including([
        mapkit.AddressCategory.Locality
    ]);
    const citySearch = new mapkit.Search({ addressFilter });
    citySearch.search("Cupertino", showMap);
};

const showMap = (error, cities) => {
    // Draw a map centered on the city.
    const center = cities.places[0].coordinate;
    const span = new mapkit.CoordinateSpan(0.02, 0.02);
    const region = new mapkit.CoordinateRegion(center, span);
    const map = new mapkit.Map("container", { region });

    const searchSpan = new mapkit.CoordinateSpan(0.01, 0.01);
    const searchRegion = new mapkit.CoordinateRegion(center, span);

    // Draw an overlay (visually represent search bounds).
    const minX = center.longitude - searchSpan.longitudeDelta;
    const maxX = center.longitude + searchSpan.longitudeDelta;
    const minY = center.latitude - searchSpan.latitudeDelta;
    const maxY = center.latitude + searchSpan.latitudeDelta;
    const points = [
        new mapkit.Coordinate(minY, minX),
        new mapkit.Coordinate(minY, maxX),
        new mapkit.Coordinate(maxY, maxX),
        new mapkit.Coordinate(maxY, minX)
    ];
    const style = new mapkit.Style({
        lineWidth: 2,
        strokeColor: "#FF0000",
        fillColor: null
    });
    map.addOverlay(new mapkit.PolygonOverlay(points, { style }));

    // Search for coffee in `searchRegion`.
    const coffeeSearch = new mapkit.Search({
        region: searchRegion,
        regionPriority: mapkit.Search.RegionPriority.Required
    });
    coffeeSearch.search("coffee", (error, results) => {
        for (const place of results.places) {
            const marker = new mapkit.PlaceAnnotation(place);
            map.addAnnotation(marker);
        }
    });
};

main();

</script>
</head>

<body>
    <div id="container"></div>
</body>
</html>