Admire
  • Introduction
  • Folder Structure
  • HTML
    • Introduction
    • HTML Structure
      • Header
      • Left Side Menu
      • Right Side Menu
      • Main Content
        • Buttons
        • Carousel and sliders
        • Charts
        • Icons
        • Progress Bars
        • Maps
        • Modals
        • Lock Screen
    • Plugins
    • FAQ's
    • Fonts Used
    • Start New Page
      • Black scheme
      • White scheme
    • Hide/Remove section
      • white scheme
      • Black scheme
  • Laravel Version
    • Installation
      • Previous Versions
        • Laravel 8
        • Laravel 7
        • Laravel 5.6
    • Layouts
      • default
      • Fixed header
      • Fixed menu
      • Fixed Menu Header
      • Compact Menu
    • Blank Page
    • How to change the layout
  • Updates
    • 3.x
    • 2.3
    • 2.8
    • 2.7
    • 2.2
    • 2.1
    • 2.0
    • 1.4
    • 1.3
Powered by GitBook
On this page

Was this helpful?

  1. HTML
  2. HTML Structure
  3. Main Content

Maps

PreviousProgress BarsNextModals

Last updated 5 years ago

Was this helpful?

There are two divergent maps used included in this template.

1) Google Maps :

We can find different styles of this kind in the page .

It has the following structure:

<div id="gmap-top" class="map">
</div>

parameters:

i) zoom - This attribute sets the scale of the map (by default - '8').This option is available is in the js file.

zoom : 8

ii) center [lat , lng] - these attributes set the coordinates of the center of the map and the point of the map (by default - '17.400408 and '78.507905'). This option is available in Js file.

center : [17.400408, 78.507905]

iii) hue - sets the hue of the feature to match the hue of the color supplied. Note that the saturation and lightness of the feature is conserved, which means that the feature will not match the color supplied exactly. Valid values: An RGB hex string, i.e. '#ff0000'. This opion is available in the js file.

hue : '#0075c2'

iv) Address - This feature allows us to mention the current location. This option is available in the js file.

address : "nallakunta,hyderabad"

v) Marker - This feature allows the user to explicitly indicate the location. This option is available in the js file.

icon : "images/location-mark.png"

2) Vector Maps :

It has the following structure:

<div id="world-map-gdp" class="vector-maps">
    <svg>...</svg>
    ....
    ....
</div>

We can find different styles of this kind in the page .

Vector Maps
Google Maps