Everyone knows that you can use Google Maps to add a map to your website, but did you know that Apple has a JS SDK too?
This story was originally published on phiilu.com.
I bet at one point in your developer career you were asked or wanted to implement an interactive map on your website. Interactive maps are great to visualize locations and routes for users and have replaced the need of using an old-school map helping us to navigate in the real world!
So you are now on your way to implement such a feature and the first thing you will do is search on google “How do implement an interactive map on a website” and probably the first few results will point you to use Google Maps. But what if I tell you that Google is not the only player in the game and there are different maps provider too!
In this blog post, we will be focusing on Apple Maps! Yeah, you heard correctly Apple Maps. “But doesn’t Apple Maps suck? Apple Maps on a website? I thought that only exists on iOS?” you might ask and the answers are as usual “it depends” and “yeah it exists!”.
You know Apple has released Apple Mapkit for JS in 2015 and since that year you can implement Apple Maps on websites! The most popular service I can find using Apple Maps is DuckDuckGo. If you search “where is vienna” you will find a small map on the right of the search results using Apple Maps. If you click it, you will get redirected to a site that has a bigger map.
DuckDuckGo shows small maps for location searches
Okay now you know you could use Apple Maps on your website, but how do you make it work? Well, it is not as easy as it seems, because Apple handles the API key differently than Google Maps.
Usually, when you want to use a service you will sign up on their site and generate an API key that you then can use. Apple instead will give you a private key which you can use to generate JSON Web Token (JWT) tokens that will be used to validate your access to Apple Maps. This is why we need backend code to hide this private key and therefore we will implement this with a serverless function.
In this post, I will show you how to get the credentials from Apple, create a small example using Apple Maps + serverless function, and finally deploy it using Netlify.
#serveless #web-development #javascript #netlify #apple-maps
