# How to use Google Maps in Blup

<figure><img src="https://4209426742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me1x4TD1HxodVbK1aDe%2Fuploads%2Fgit-blob-b7fbf8ac866fe904d709ba8dc8892116a2849580%2Fmap-view-.gif?alt=media" alt="Google Map"><figcaption><p>Google Maps</p></figcaption></figure>

1\. **Get Google Maps API Key:** Obtain an API key from Google Maps for your application.

2\. **Add API Key to App Settings:** Go to the Google Maps API keys section in your app settings and add the API key you obtained.

3\. **Add Map View Widget:** To add a map to your UI screen, go to the Insert tab and choose the Map View widget. You can then adjust its size and where it shows up on the screen. If you need more help, check out the Google Map Component guide [here](https://github.com/BlupGithub/blup-docs/blob/main/wiki/design-ui/insert-widgets/mapview-widget.md).

4\. **Set Initial Coordinates:** Specify the initial coordinates that you want to show when the app starts. This determines the initial position and zoom level of the map.

5\. **Run the App:** Once you've configured the Map View widget, run your app to see the Google Maps integration in action.

{% hint style="info" %} <mark style="color:blue;">Note: To know how to get Google API key</mark> [<mark style="color:blue;">Click Here</mark>](https://developers.google.com/maps/documentation/javascript/get-api-key)<mark style="color:blue;">.</mark>
{% endhint %}

If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303)

## Music to go with.

{% embed url="<https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM?si=2c7f55bd3f944878>" %}
Lofi music
{% endembed %}