A step-by-step guide to getting started with MapKit JS – a JavaScript API for embedding interactive maps into webpages.
Step 1: Setup an Apple Developer Account
You’ll need an Apple Developer account, which is a paid service with a $99 yearly fee. You can set it up by going to developer.apple.com/account and following the instructions. If you don’t have an Apple account you’ll need to create one first.
Step 2: Create a Maps Identifier
In your Apple Developer Account, select Certificates, Identifiers & Profiles in the left menu:
Next, select Identifiers in the left menu, and then click the Register an App ID button:
Under Register a new identifier, select Maps ID option at the bottom, and then click Continue:
Under Register a Maps ID, in the Description, enter a string for the description. This could be your app name, team name, project name, or something that conveys context and is meaningful to you. Under Identifier, enter a reverse-domain-style string for the identifier (for example, maps.com.mywebsite), then click Continue:
Review the information, then click Register. Click Done.
Step 3: Create a MapKit JS Private Key
Once you have created your Maps ID, the next steps are to create a private key, add the MapKit JS service to this key, and associate it with a Maps ID.
In Certificates, Identifiers & Profiles, select Keys in the left menu, then click the Create a key button:
Under Key Name, enter a unique name for the key. Select the checkbox next to MapKit JS, then click Configure:
Choose a Maps ID to associate to this key from the pop-up menu, then click Save:
Review your newly created key configuration, then click Register:
Download your newly created private key. Note that you can only download the key once. Save it in the same place where you store your other sensitive information like passwords. Never share your private key and never store it on publically accessible servers.
All Done! You can always find your key in your Developer Account, under Certificates, Identifiers & Profiles -> Keys:
You can review the official MapKit JS documentation here: Creating a Maps Identifier and a Private Key