Atmos
  • Getting Started
  • Build System
    • Gulp
      • Gulp 4
    • Page Structure
    • Sass Modules
  • UI Elements
    • Colors
    • Buttons
    • Icons
    • Cards
    • Alerts
    • Modals
    • Avatar
    • Tables
    • Mail Templates
  • forms
    • Form Layouts
    • Switch
    • Tag Input
    • Radio Box
    • Select2
    • Datepickers
    • Masked Input
    • Rangeslider
    • Dropzone Fileupload
    • Form Wizard
    • Form Validation
  • Charts
    • Charts
    • Apex Charts
    • Chartjs
    • Google Charts
    • Chartist
  • Maps
    • Google Maps
    • Vector Maps
  • Starter Template
    • blank template Markup
Powered by GitBook
On this page
  1. Maps

Google Maps

PreviousChartistNextVector Maps

Last updated 6 years ago

This section will guide you to setup basic google maps. for more information checkout .

Google Maps will not work without API Key. please create one before implementing maps

Step 1

Add Google maps JavaScript

<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

 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

Google Developer API
snazzymaps