49 lines
1.7 KiB
HTML
49 lines
1.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js" crossorigin async data-callback="initMapKit"
|
||
|
|
data-libraries="map"
|
||
|
|
data-initial-token="eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkJHV0M3OTI1V0MifQ.eyJpc3MiOiJWRTdZTTVWVkpCIiwiaWF0IjoxNjY4MzYyMzYzLCJleHAiOjE2OTk4MzM2MDAsIm9yaWdpbiI6Imh0dHBzOi8vKi5ybWNnLmRldiwgaHR0cDovLzEyNy4wLjAuMTozMDAwLCBodHRwOi8vbG9jYWxob3N0OjMwMDAifQ.JOAnDMffZ90tk03qH1BEVCNpFo_-5eaUj1gmTgwHXl0tK-sfA4kVhNQ1UyOUaPuM1SR57rwImhjTiX-mNMwKtA"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#map {
|
||
|
|
width: 100%;
|
||
|
|
height: 600px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="map"></div>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const tokenID = "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkJHV0M3OTI1V0MifQ.eyJpc3MiOiJWRTdZTTVWVkpCIiwiaWF0IjoxNjY4MzYyMzYzLCJleHAiOjE2OTk4MzM2MDAsIm9yaWdpbiI6Imh0dHBzOi8vKi5ybWNnLmRldiwgaHR0cDovLzEyNy4wLjAuMTozMDAwLCBodHRwOi8vbG9jYWxob3N0OjMwMDAifQ.JOAnDMffZ90tk03qH1BEVCNpFo_-5eaUj1gmTgwHXl0tK-sfA4kVhNQ1UyOUaPuM1SR57rwImhjTiX-mNMwKtA";
|
||
|
|
|
||
|
|
if (!window.mapkit || window.mapkit.loadedLibraries.length === 0) {
|
||
|
|
// mapkit.core.js or the libraries are not loaded yet.
|
||
|
|
// Set up the callback and wait for it to be called.
|
||
|
|
await new Promise(resolve => { window.initMapKit = resolve });
|
||
|
|
|
||
|
|
// Clean up
|
||
|
|
delete window.initMapKit;
|
||
|
|
}
|
||
|
|
|
||
|
|
mapkit.init({
|
||
|
|
authorizationCallback: function (done) {
|
||
|
|
done(tokenID);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const map = new mapkit.Map("map");
|
||
|
|
})();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|