Are you using Google Maps or another similar Map Provider and would like to switch over to using Amplify Geo or Amazon Location Service? This tutorial will show you how to take your existing Google Maps APIs and switch over to using Amplify Geo.
## Getting Started
Amplify Geo provides APIs for using location based functionality. Under the hood Amplify uses [Amazon Location Service](https://aws.amazon.com/location/) and is designed to work with open source mapping library [MapLibre](https://maplibre.org/).
This guide assumes that you are already familiar with the Google Maps JavaScript API and with front-end web development concepts including HTML, CSS, and JavaScript.
To complete this tutorial, you will need:
- **Amplify Geo**
- **A text editor**
## Key differences between Amplify Geo and Google Maps
### Coordinates Conventions
A key difference to notice between using Amplify Geo and Google Maps is with Google Maps Platform their convention for specifying coordinates is `[lat, lng]`. When migrating over to Amplify Geo the order is swapped to be `[lng, lat]`. This was done to match the [geojson spec](https://geojson.org/) which is also used by MapLibre.
### Authorization
When using Google Maps Platform or other similar services like Mapbox you will first be prompted to go to the Google Cloud Console to set up APIs and create an API key where you will then use the API key when requesting the Google Maps JS API. With Amplify Geo you will instead setup Amplify Auth using Amplify CLI and the `MapView` component will read the auth configuration from the `aws-exports.js` file. Behind the scenes Amplify Auth uses Amazon Cognito to set up client credentials with access to Location Service and Geo will use those credentials when making any location related API calls. More information on setting Amplify Auth and Geo can be found below in the `Setting Up Amplify` section.
## Create a webpage
1. Open your text editor and create a new file called `index.html`.
1. Paste the following code into the file to set up the framework for a webpage with a map.
```html
Display a map on a webpage
```
This code imports the MapLibre GL JS library and CSS, one of the popular options for map rendering we recommend for use with Amplify Geo. In the HTML body you create a `
` element with an id of 'map' that will be the map's container. Finally in the script section you'll setup some Amplify configuration that is required for Amplify Geo to understand what Amplify AWS resources have been created.
### Setting up Amplify
1. You will need to use the [Amplify CLI to setup Amplify Geo Map resources](/cli/geo/maps). Follow instructions for creating a map.
1. Once the CLI workflow has completed you should have an `aws-exports.js` file in the same directory as your `index.html` file.
1. Save your `index.html` file.
## Display a map
In this step we will show you how to add code to display a map in your application.
With Amplify Geo and MapLibre you can add the following code to your index.html file inside the `