Google Map - General | DashLite Admin Template

Components

## Google Map

Google map is using with Embed code and API Scripts

For more info please visit Google Cloud.

##### Map with Embed

For using map with embed code you need to go on Google Map site. Set your location & take embed script for display your location.

###### Code Example

    <div class="card card-bordered w-100">
        <iframe src="https://www.google.com/maps/[Your Location]" class="google-map border-0" allowfullscreen="" loading="lazy"></iframe>
    </div>;

##### Map with API

For using map with JavaScript API script you need to go on Google Maps Platform. Set your API script & added Javascript code for display your location.

#### Use Instruction

As using map with API in our system you will need take additional step as below.

###### Maps Script

You can simply add `<script>` into `<body>` tag on each page as below reference.

`<!-- Map API Script -->
<script src="https://maps.google.com/maps/api/js?key=[API key]"></script>`

###### JavaScript API Script

To edit map, you will need to edit the `/js/example-map.js` file. You can follow the instruction below for edit.

`// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
// Use function
// How zoomed in you want the map to start at (always required)
zoom: 14,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(33.4465154, -86.7318209), // New York
// Get the HTML DOM element that will contain your map
var mapElement = document.getElementById('gMap');
// Markers identify locations on the map
// the element can be dragged
draggable: true,
// Clicking on the marker will toggle the animation between a BOUNCE
animation: google.maps.Animation.DROP,
// You can use a LatLng literal in place of a google.maps.LatLng object when creating the Marker object Once the Marker object is
// instantiated, its position will be available as a google.maps.LatLng object.
position: new google.maps.LatLng(33.4465154, -86.7318209),
// you can use image link into this quote
icon: '' // null = default icon
`

##### Select Your Country

- Argentina
- Australia
- Bangladesh
- Canada (English)
- Centrafricaine
- China
- France
- Germany
- Iran
- Italy
- México
- Philippines
- Portugal
- South Africa
- Spain
- Switzerland
- United Kingdom
- United State