How to use Look Around and Collections in Maps on your iPhone, iPad, or iPod touch – Apple Support
Use Maps in iOS 13 to explore destinations before you get there, organize your favorite places into sharable collections, and more.
To learn more about this topic, visit the following article:
Use Maps on your iPhone, iPad, or iPod touch: apple.co/3333YMX
Embed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<style>
#map {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapkit.init({
authorizationCallback: function(done) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/services/jwt");
xhr.addEventListener("load", function() {
done(this.responseText);
});
xhr.send();
}
});
var Cupertino = new mapkit.CoordinateRegion(
new mapkit.Coordinate(37.3316850890998, -122.030067374026),
new mapkit.CoordinateSpan(0.167647972, 0.354985255)
);
var map = new mapkit.Map("map");
map.region = Cupertino;
</script>
</body>
</html>
Region and Zoom Limits
<!DOCTYPE html>
<html>
<head>
<title>Region and Zoom Limits</title>
<meta charset="utf-8">
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<style>
html, body {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
}
#city-regions {
width: 100%;
height: 40px;
cursor: default;
font-family: "-apple-system-font", Futura, "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
}
#city-regions div {
float: left;
width: 50%;
height: 100%;
text-align: center;
background-color: white;
}
#city-regions p {
margin-top: 9px;
margin-bottom: 10px;
}
#city-regions div.selected-city {
background-color: #08f;
color: #f8f9f0;
}
#map {
width: 100%;
height: 560px;
}
</style>
</head>
<body>
<div id="city-regions">
<div id="sanfrancisco">
<p>San Francisco</p>
</div>
<div id="toronto">
<p>Toronto</p>
</div>
</div>
<div id="map"></div>
<script>
var SELECTED_CITY_CLASS = "selected-city";
// Define camera boundaries and zoom ranges for San Francisco and Toronto.
var CITIES = {
sanfrancisco: {
region: new mapkit.CoordinateRegion(
new mapkit.Coordinate(37.7812, -122.44755),
new mapkit.CoordinateSpan(0.10, 0.11)
),
zoomRange: new mapkit.CameraZoomRange(250, 15000)
},
toronto: {
region: new mapkit.CoordinateRegion(
new mapkit.Coordinate(43.6451, -79.37505),
new mapkit.CoordinateSpan(0.05, 0.11)
),
zoomRange: new mapkit.CameraZoomRange(250, 20000)
}
}
// Initialize mapkit.
mapkit.init({
authorizationCallback: function(done) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/services/jwt");
xhr.addEventListener("load", function() {
done(this.responseText);
});
xhr.send();
}
});
// Create the map and set the current city to San Francisco when ready.
var map = new mapkit.Map("map");
mapkit.addEventListener("configuration-change", function configurationChanged() {
mapkit.removeEventListener("configuration-change", configurationChanged);
setCity("sanfrancisco");
});
// Show the selected city on the map and highlight its name.
function setCity(name) {
// Highlight the current city.
var div = document.getElementsByClassName(SELECTED_CITY_CLASS)[0];
if (div) {
div.classList.remove(SELECTED_CITY_CLASS);
}
document.getElementById(name).classList.add(SELECTED_CITY_CLASS);
// Show it on the map, with camera boundaries and zoom range for this city.
var city = CITIES[name];
map.cameraZoomRange = city.zoomRange;
map.cameraBoundary = city.region;
map.region = city.region;
}
// Listen to click events to change the city.
var cityRegionsElement = document.getElementById("city-regions");
cityRegionsElement.addEventListener("click", function(event) {
setCity(event.target.id || event.target.parentNode.id);
});
</script>
</body>
</html>
Add Annotations
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<style>
#map {
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var MarkerAnnotation = mapkit.MarkerAnnotation,
clickAnnotation;
var sfo = new mapkit.Coordinate(37.616934, -122.383790),
work = new mapkit.Coordinate(37.3349, -122.0090201);
mapkit.init({
authorizationCallback: function(done) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/services/jwt");
xhr.addEventListener("load", function() {
done(this.responseText);
});
xhr.send();
}
});
var map = new mapkit.Map("map");
// Setting properties on creation:
var sfoAnnotation = new MarkerAnnotation(sfo, { color: "#f4a56d", title: "SFO", glyphText: "✈️" });
// Setting properties after creation:
var workAnnotation = new MarkerAnnotation(work);
workAnnotation.color = "#969696";
workAnnotation.title = "Work";
workAnnotation.subtitle = "Apple Park";
workAnnotation.selected = "true";
workAnnotation.glyphText = "";
// Add and show both annotations on the map
map.showItems([sfoAnnotation, workAnnotation]);
// Drop an annotation where a Shift-click is detected:
map.element.addEventListener("click", function(event) {
if(!event.shiftKey) {
return;
}
if(clickAnnotation) {
map.removeAnnotation(clickAnnotation);
}
var coordinate = map.convertPointOnPageToCoordinate(new DOMPoint(event.pageX, event.pageY));
clickAnnotation = new MarkerAnnotation(coordinate, {
title: "Click!",
color: "#c969e0"
});
map.addAnnotation(clickAnnotation);
});
</script>
</body>
</html>
developer.apple.com/maps