Apple Maps on the Web - Maps- Apple Developer

Embed

Create an embedded map in an element on the page.

<!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>

Add Annotations

Create a map with two annotations. Shift-clicking on the map adds a new annotation where the shift-click is detected and removes the annotation on the map that was previously added with shift-click, if one exists.

<!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>

Custom Callout

Create annotations with custom callouts for the landmarks of San Francisco.

<!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;
        }
        
        a:link, a:visited {
            color: #2aaef5;
            outline: none;
            text-decoration: none;
        }
        
        .landmark {
            width: 250px;
            padding: 7px 0 0 0;
            background: rgba(247, 247, 247, 0.75);
            border-radius: 5px;
            box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.29);
            font-family: Helvetica, Arial, sans-serif;
            -webkit-transform-origin: 0 10px;
            transform-origin: 0 10px;
        }
        
        .landmark h1 {
            margin-top: 0;
            padding: 5px 15px;
            background: #2aaef5;
            color: rgba(255, 255, 255, 0.9);
            font-size: 16px;
            font-weight: 300;
        }
        
        .landmark section {
            padding: 0 15px 5px;
            font-size: 14px;
        }
        
        .landmark section p {
            margin: 5px 0;
        }
        
        .landmark:after {
            content: "";
            position: absolute;
            top: 7px;
            left: -13px;
            width: 0;
            height: 0;
            margin-bottom: -13px;
            border-right: 13px solid #2aaef5;
            border-top: 13px solid rgba(0, 0, 0, 0);
            border-bottom: 13px solid rgba(0, 0, 0, 0);
        }
        
        @-webkit-keyframes scale-and-fadein {
            0% {
                -webkit-transform: scale(0.2);
                opacity: 0;
            }
        
            100% {
                -webkit-transform: scale(1);
                opacity: 1;
            }
        }
        
        @keyframes scale-and-fadein {
            0% {
                transform: scale(0.2);
                opacity: 0;
            }
        
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        </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();
            }
        });
        
        // Landmarks data
        var sanFranciscoLandmarks = [
            { coordinate: new mapkit.Coordinate(37.7951315, -122.402986), title: "Transamerica Pyramid", phone: "+1-415-983-5420", url: "http://www.transamericapyramidcenter.com/" },
            { coordinate: new mapkit.Coordinate(37.7954201, -122.39352), title: "Ferry Building", phone: "+1 (415) 983-8030", url: "http://www.ferrybuildingmarketplace.com" },
            { coordinate: new mapkit.Coordinate(37.8083396, -122.415727), title: "Fisherman's Wharf", phone: "+1 (415) 673-3530", url: "http://visitfishermanswharf.com" },
            { coordinate: new mapkit.Coordinate(37.8023553, -122.405742), title: "Coit Tower", phone: "+1 (415) 249-0995", url: "http://sfrecpark.org/destination/telegraph-hill-pioneer-park/coit-tower/" },
            { coordinate: new mapkit.Coordinate(37.7552305, -122.452624), title: "Sutro Tower", phone: "+1 (415) 681-8850", url: "http://www.sutrotower.com" },
            { coordinate: new mapkit.Coordinate(37.779267, -122.419269), title: "City Hall", phone: "+1 (415) 701-2311", url: "http://sfgsa.org/index.aspx?page=1085" },
            { coordinate: new mapkit.Coordinate(37.8184493, -122.478409), title: "Golden Gate Bridge", phone: "+1 (415) 921-5858", url: "http://www.goldengatebridge.org" },
            { coordinate: new mapkit.Coordinate(37.7785538, -122.514035), title: "Cliff House", phone: "+1 (415) 386-3330", url: "http://www.cliffhouse.com/" }
        ];
        
        // Landmark annotation callout delegate
        var CALLOUT_OFFSET = new DOMPoint(-148, -78);
        var landmarkAnnotationCallout = {
            calloutElementForAnnotation: function(annotation) {
                return calloutForLandmarkAnnotation(annotation);
            },
        
            calloutAnchorOffsetForAnnotation: function(annotation, element) {
                return CALLOUT_OFFSET;
            },
        
            calloutAppearanceAnimationForAnnotation: function(annotation) {
                return ".4s cubic-bezier(0.4, 0, 0, 1.5) 0s 1 normal scale-and-fadein";
            }
        };
        
        // Landmarks annotations
        var annotations = sanFranciscoLandmarks.map(function(landmark) {
            var annotation = new mapkit.MarkerAnnotation(landmark.coordinate, {
                callout: landmarkAnnotationCallout,
                color: "#c969e0"
            });
            annotation.landmark = landmark;
            return annotation;
        });
        
        var map = new mapkit.Map("map");
        map.showItems(annotations);
        
        // Landmark annotation custom callout
        function calloutForLandmarkAnnotation(annotation) {
            var div = document.createElement("div");
            div.className = "landmark";
        
            var title = div.appendChild(document.createElement("h1"));
            title.textContent = annotation.landmark.title;
        
            var section = div.appendChild(document.createElement("section"));
        
            var phone = section.appendChild(document.createElement("p"));
            phone.className = "phone";
            phone.textContent = annotation.landmark.phone;
        
            var link = section.appendChild(document.createElement("p"));
            link.className = "homepage";
            var a = link.appendChild(document.createElement("a"));
            a.href = annotation.landmark.url;
            a.textContent = "website";
        
            return div;
        }
        </script>
        </body>
        </html>

Draggable Annotations

A “loupe” is used to demonstrate draggable annotations. This example shows how to make a pin draggable, style a map with CSS, observe map events, and update the region of a second map in response to map events.

<!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
        <script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
        <style type="text/css">
        html, body, #container {
            height: 100%;
            overflow: hidden;
        }
        
        body {
            margin: 0;
            padding: 0;
        }
        
        #loupe {
            width: 200px;
            width: 20vw;
            height: 200px;
            height: 20vw;
            position: absolute;
            top: 11px;
            left: 11px;
        
            overflow: hidden;
        
            border: 8px solid #FFF;
        
            -webkit-box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.2);
            -moz-box-shadow:    0 0 5px 4px rgba(0, 0, 0, 0.2);
            box-shadow:         0 0 5px 4px rgba(0, 0, 0, 0.2);
        }
        
        </style>
        </head>
        
        <body>
        <div id="container"></div>
        <div id="loupe"></div>
        
        <script type="text/javascript">
        
        var MAGNIFICATION_FACTOR = 8,
            LOUPE_DIAMETER = 180;
        
        var center = new mapkit.Coordinate(37.7952, -122.4028); // Transamerica Pyramid, SF
        
        mapkit.init({
            authorizationCallback: function(done) {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "/services/jwt");
                xhr.addEventListener("load", function() {
                    done(this.responseText);
                });
                xhr.send();
            }
        });
        
        // Call when the zoom level has changed.
        // Update the loupe to region centered on the marker that is 8x the map.
        function calculateMagnifiedRegion(map, marker) {
            var ratio = Math.min(window.innerWidth, window.innerHeight) / LOUPE_DIAMETER,
                delta = map.region.span.latitudeDelta / (MAGNIFICATION_FACTOR * ratio),
                newSpan = new mapkit.CoordinateSpan(delta, delta);
            return new mapkit.CoordinateRegion(marker.coordinate, newSpan);
        }
        
        var map = new mapkit.Map("container", { center: center });
        map.addEventListener("zoom-end", function() {
            // Update the loupe's magnification after a zoom change
            zoomedMap.setRegionAnimated(calculateMagnifiedRegion(map, marker));
        });
        
        var marker = new mapkit.MarkerAnnotation(map.center, {
            draggable: true,
            selected: true,
            title: "Drag me"
        });
        marker.addEventListener("drag-start", function(event) {
            // No need to show "Drag me" message once user has dragged
            event.target.title = "";
        });
        marker.addEventListener("drag-end", function() {
            // Center the loupe on the marker's new location
            zoomedMap.setCenterAnimated(marker.coordinate);
        });
        map.addAnnotation(marker);
        
        // Initialize the loupe based on the marker's location on the map
        var zoomedMap = new mapkit.Map("loupe", {
            isScrollEnabled: false,
            isZoomEnabled: false,
            showsCompass: mapkit.FeatureVisibility.Hidden,
            showsZoomControl: false,
            showsMapTypeControl: false
        });
        zoomedMap.setRegionAnimated(calculateMagnifiedRegion(map, marker));
        
        </script>
        </body>
        </html>

GeoJSON Import

Create a map with an overlay for each state in the U.S. The color of each overlay represents the population in that state.
This sample uses GeoJSON data derived from cartographic boundary files and 2018 population estimates provided by the United States Census Bureau. The code shows how to use a delegate when importing GeoJSON data to add style and data to the imported items; the color of each overlay gives an indication of its population, and selecting an overlay displays the the information associated with that state.

<!DOCTYPE html>
        <html>
            <head>
                <title>GeoJSON Import</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;
            font-family: "-apple-system-font", "HelveticaNeue-Medium", "Helvetica", "Arial", "sans-serif";
        }
        
        .container {
            position: relative;
        }
        
        #map {
            width: 100%;
            max-width: 600px;
            height: 600px;
        }
        
        #infoPopup {
            display: none;
            top: 7px;
            left: 67px;
            background: #FFFFFF;
            padding: 5px 15px;
            position: absolute;
            z-index: 1000;
            min-width:180px;
            font: 13px/16px "-apple-system-font", "HelveticaNeue-Medium", "Helvetica", "Arial", "sans-serif";
            color: #212121;
            border: 1px solid rgba(0,0,0,0.2);
            border-radius: 3px;
        }
        
        .container .map-legend {
            position: absolute;
            z-index: 1000;
            top: 7px;
            left: 7px;
        }
        
        .map-legend div {
            margin-bottom: 5px;
            width: 40px;
            font-size: 12px;
            color: #fff;
            padding: 4px 7px;
        }
        
        #infoPopup .info {
            padding: 10px 0;
            box-sizing: border-box;
        }
        
        #infoPopup .info:first-child {
            border-bottom: 1px solid rgba(0,0,0,0.2);
        }
        
        #infoPopup .info-country,  #infoPopup .info-population{
            margin-left: 5px;
            color: #464545;
            font-style: italic;
        }
        
                </style>
            </head>
            <body>
                <div class="container">
                    <div id="map"></div>
                    <div id="infoPopup">
                        <div class="info">
                            <span>State:</span>
                            <span class="info-country"></span>
                        </div>
                        <div class="info">
                            <span>Population:</span>
                            <span class="info-population"></span>
                        </div>
                    </div>
                    <div class="map-legend"></div>
                </div>
                <script>
        
        var LINE_WIDTH_DEFAULT = 0.5;
        var LINE_WIDTH_SELECTED = 3;
        var MAP_COLORS = [
            {
                color: "#fcc5c0",
                range: "< 1M",
                num: 1000000
            },
            {
                color: "#fa9fb5",
                range: "1M +",
                num: 5000000
            },
            {
                color: "#f768a1",
                range: "5M +",
                num: 10000000
            },
            {
                color: "#dd3497",
                range: "10M +",
                num: 20000000
            },
            {
                color: "#ae017e",
                range: "20M +",
                num: 30000000
            },
            {
                color: "#7a0177",
                range: "> 30M",
                num: Infinity
            }
        ];
        
        // Initialize mapkit and create a new map.
        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", {
            isRotationEnabled: false,
            isZoomEnabled: false,
            showsZoomControl: false
        });
        
        // Setup the UI to show a popup when a state is selected.
        var infoPopup = document.getElementById("infoPopup");
        var infoCountry = infoPopup.querySelector(".info-country");
        var infoPopulation = infoPopup.querySelector(".info-population");
        var mapLegend = document.querySelector(".map-legend");
        
        function showInfo(data) {
            infoCountry.innerText = data.name;
            infoPopulation.innerText = data.population.toLocaleString();
            infoPopup.style.display = "block";
        }
        
        function closeInfo() {
            infoPopup.style.display = "none";
        }
        
        function addLegend() {
            var el, textNode;
            MAP_COLORS.forEach(function (mColor) {
                el = document.createElement("div");
                textNode = document.createTextNode(mColor.range);
                el.appendChild(textNode);
                el.style.background = mColor.color;
                mapLegend.appendChild(el);
            });
        }
        
        addLegend();
        
        // Import GeoJSON data with the shape of the states and their population.
        mapkit.importGeoJSON("states.json", {
        
            // Some states are represented as MultiPolygons; we transform them into
            // a single PolygonOverlay by concatenating the lists of lists of points.
            itemForMultiPolygon: function(collection, geoJSON) {
                var overlays = collection.getFlattenedItemList();
                var points = overlays.reduce(function(points, overlay) {
                    return points.concat(overlay.points);
                }, []);
                return new mapkit.PolygonOverlay(points);
            },
        
            // After an overlay has been created for a feature (either directly or through
            // itemForMultiPolygon above), the properties of the feature are used to add data
            // and set the style (especially the fill color) based on population count.
            itemForFeature: function(overlay, geoJSON) {
                var population = geoJSON.properties.population;
        
                // Add data to the overlay to be shown when it is selected.
                overlay.data = {
                    name: geoJSON.properties.name,
                    population: geoJSON.properties.population
                };
        
                // Find the right color for the population and the set the style.
                for (var i = 0; i < MAP_COLORS.length; ++i) {
                    if (population < MAP_COLORS[i].num) {
                        overlay.style = new mapkit.Style({
                            fillOpacity: 0.7,
                            lineWidth: LINE_WIDTH_DEFAULT,
                            fillColor: MAP_COLORS[i].color
                        });
                        break;
                    }
                }
                return overlay;
            },
        
            // When all the data has been imported, we can show the results.
            geoJSONDidComplete: function(overlays) {
                map.addItems(overlays);
                map.showItems(overlays.getFlattenedItemList().filter(function(overlay) {
                    // Focus the map on the continental states at first.
                    var name = overlay.data.name;
                    return name !== "Alaska" && name !== "Hawaii";
                }), {
                    // Leave some padding for the color key.
                    padding: new mapkit.Padding(0, 0, 0, 67)
                });
            }
        });
        
        // Show info about the selected state.
        map.addEventListener("select", function(event) {
            if (event.overlay && event.overlay.data) {
                event.overlay.style.lineWidth = LINE_WIDTH_SELECTED;
                showInfo(event.overlay.data);
            }
        });
        
        // Hide info when a state is deselected.
        map.addEventListener("deselect", function(event) {
            if (event.overlay) {
                event.overlay.style.lineWidth = LINE_WIDTH_DEFAULT;
                closeInfo();
            }
        });
        
                </script>
            </body>
        </html>

Region and Zoom Limits

Create a map restricted by camera boundaries and zoom range to two cities (San Francisco and Toronto). Click on the desired city to change the 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>

MapKit JS

GeoJSON Import

Region and Zoom Limits

Embed

Add Annotations

Custom Callout

Draggable Annotations

MapKit JS Dashboard

Snapshots