> For the complete documentation index, see [llms.txt](https://docs.atomui.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.atomui.com/maps/google-maps.md).

# Google Maps

This section will guide you to setup basic google maps. for more information checkout [Google Developer API](https://developers.google.com/maps/documentation/javascript/tutorial). 

{% hint style="danger" %}
Google Maps will not work without API Key. please create one before implementing maps
{% endhint %}

#### Step 1

Add Google maps JavaScript

```markup
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
```

#### Step 2

Add the markup

```
 <div id="map" style="height:450px;width:100%"></div>
```

#### Step 3

Initialize the map

```javascript
 var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
```

### Map themes

You can checkout more themes at [snazzymaps](https://snazzymaps.com/)&#x20;