logologo-dark
logologo-dark

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
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Clean
Shady
Softy
Header Style
White
Light
Dark
Theme
Header Option
Regular
Fixed
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?