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
