This post exists only to document one thing that Apple has yet to document in about 5 years. How to actually initialise a damn map.

[Update Jan 2025] This hilariously works in most browsers except Safari, which suffers a race condition from disobeying keywords. The solution was to add the script tag to the DOM from within an ES6 module, there is an updated post coming for that.

This requires an active Apple Developer account. This means paying the 99$ yearly ransom. If maps are the only thing you want then this is a terrible idea you should research other things like OpenStreetMap first. We're only using this because we already paid for it anyway as we use other features as well, like Sign In With Apple.

The Apple developer control panel for this has changed 3 times over the past two years. Once you log into Apple Developer, go to Certificates/Identifiers. Find "Services" which at the time of this writing, can be found on the left sidebar very bottom. This has a little tool to generate MapKit tokens which will ask you your Domain name and generate the key for you.

This is one of the few things Apple actually did document. Overly documented in fact. They invented their own version constraint system instead of just using one of the more standard ones we already use with SemVer. The code sample below has a data-token attribute which in has my Template system inserting the MapKit token in there for me. You need to put yours in there, or it wont auth against the domain. Notice I am NOT using data-callback. It is incompatible with any scripting that uses ES6 module stuff so we will just boot up on document ready like anything else.

Those X's in the URL are for real. I'm going full YOLO and accepting anything on the V5 branch.

First you need an HTML element to target.

And then the script to launch it. I still use jQuery, but just write your document ready the way you would normally. You don't need to tell me how you haven't seen anyone use jQuery in 14 years.

You should now be staring at a world map centered on 0,0, so probably looking at Africa right now. This will then position it over North America probably fitting the entire continental US within a 16:9 element.

The Apple documentation for adding pins is actually OK. The normal map pins everyone thinks of are called mapkit.MarkerAnnotation and you add them to the map with the `map.addAnnotation()` method. If you made it this far their documents should be able to limp you along the rest of the way.

Over here is my own wrapper for Apple Maps written in a generic way so I can support OpenStreetMap and Google with the same API """"later"""". It should be a decent example of abstracting the concepts of a map and making it easy to add pins and custom callouts when clicking the pins.