Embedded Map
This sample demonstrates simply displaying a map with minimal code.
This sample demonstrates simply displaying a map with minimal code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#map-container {
width: 100%;
height: 600px;
}
</style>
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js"
crossorigin async
data-callback="initMapKit"
data-libraries="map"
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 cupertino = new mapkit.CoordinateRegion(
new mapkit.Coordinate(37.3316850890998, -122.030067374026),
new mapkit.CoordinateSpan(0.167647972, 0.354985255)
);
// Create a map in the element whose ID is "map-container".
const map = new mapkit.Map("map-container");
map.region = cupertino;
};
main();
</script>
</head>
<body>
<div id="map-container"></div>
</body>
</html>