Apple's MapKit JS Lets You Embed Apple Maps On the Web

Apple this week released MapKit JS in beta, a new JavaScript library that lets developers add interactive maps to web pages. It supports an array of functions, such as annotations, overlays, and other Apple Maps services such as search and directions. This is your web alternative to Google Maps.

Apple has been working on this one for a while. The MapKit JS API was first spotted on Apple's web site by 9to5Mac back in 2016. While some hoped the API would arrive sooner rather than later, it is now available. The library offers the same functionality as MapKit API for iOS. It pulls live data from Apple Maps' data sources. The framework is meant specifically fort mobile and desktop platforms and supports existing gestures that Apple users are already familiar with. An examples might be pinch-to-zoom. 

Apple's beta software includes examples and sample code. These will let developers easily add Maps to their web sites. Apple says developers will need to set up core Maps identifiers, keys, and tokens via their developer accunt. These are specifically found under the Certificates, Identifiers & Profiles heading of the Apple developer account dashboard. 

WebGL is the prefered way to render map cartography, which Apple says mirrors how native Apple Maps look. Apple says MapKit JS can "gracefully degrade to a rasterised image tile approach on older hardware." When implementing, embedding maps in web sites requires just a few lines of code.

The core functions are as follows: 1. Embed. This lets developer put any Apple Map ionto their web site; 2. Annotate. To add custom legends and landmarks; 3. Custom Callouts. For locations that are specific to a single region; and 4. Draggable Annotations. This allows developers to move annotations around on an embedded map. Code samples for each of these is availble from Apple's web site. 

If you need more information, Apple has a video demonstration of how it works available here, along with step-by-step directions on how to score a MapKit JS key here. Let's nor forget documentation and discussion forums, which are also available to help when embedding maps on web sites. 

Google Maps may be the kind of embedded maps on the web, but Apple developers can now give their users a consistente experience whether they are using Safari on a Mac, on an iPhone, or on an iPad. 

Be sure to read the next Mapping article: Bing Maps Time Zone API Now Generally Available

 

Comments (1)

Alex-Chris

Agreed, this is a great post with some great insights into some of the things we often see from the other side of the glass, as members of communities - are you planning more of these with other perhaps prominent communities?

get more about it communicate with iPad at Apple Application Support.