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
