Rare
  • Introduction
  • HTML
    • Introduction
    • Html Structure
      • Header
      • Left Side Menu
      • Main Content
    • Main Content
      • Buttons
      • Fonts
      • Lock Screens
      • Maps
      • Modals
      • Plugins Used
      • Progress Bars
    • Css Files
    • Java Script Used
    • Scss
    • Fonts Used
    • Images used
    • Starts New page
      • Centered Logo
      • Compact Menu
      • Default
      • Horizontal
      • Light Side Bar
      • Mmenu
  • Rare Builder
    • Layouts
      • Default
      • Centered Logo
      • Compact Menu
      • Fixed Menu
      • Fixed Header
      • Horizontal
      • Icon Horizontal
      • Dark
      • Full Width
      • Header Style
      • Fixed Footer
      • Mmenu
      • Light Sidebar
    • Macros
      • Layouts
      • Breadcrumb
    • Partials
      • Headers
        • Header
        • Centered Logo Header
      • Heads
        • Head
      • Breadcrumbs
        • Breadcrumb 1
        • Breadcrumb 2
        • Breadcrumb 3
        • Breadcrumb 4
        • Breadcrumb 5
        • Breadcrumb Default
      • Ends
        • End
      • Menus
        • Default
        • Horizontal
        • Icon Horizontal
        • Compact
        • Mmenu
      • Footer
        • Footer
        • Fixed Footer
      • Messages
      • Notifications
      • User Profile
    • Add Builder
    • Commands
    • New Page
  • FAQ
    • Change Left Menu Content
    • Setting Layout As Default
    • Change Breadcrumb
    • Change Colors In scss
Powered by GitBook
On this page

Was this helpful?

  1. HTML
  2. Main Content

Maps

PreviousLock ScreensNextModals

Last updated 5 years ago

Was this helpful?

There are two divergent maps included in this template. we have further classified the maps into different categories.

1) Google Maps :

we have included the four different types of gmaps in this template, let us have a look at each one briefly one after the another.

i) Gmap Routes :

There are three different Gmap Routes being included in this template, you can find more about this map in the page of this template.

It has the following design

It has the following structure:

<div id="gmap_routes3 class="gmap">
</div>

ii) Gmap Utils :

It has the following design :

<div id="gmap6" class="map">
</div>

iii) Basic Maps

It has the followig design :

<div id="map_events" class="gmap m-t-40">
</div>

iv) Gmap Services

It has the followig design :

<div id="geo_code" class="gmap m-t-40">
</div>

All the Gmaps basically will have the following parameters and they are

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 option 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" class="vector_maps m-t-40">
    ...
</div>

There are six different Gmap Utils being included in this template, you can find more about this map in the page of this template.

It has the following structure:

There are five different types of Basic maps being included in this template, you can find more about this map in the page of this template.

It has the following structure :

There are five different types of Gmap services being included in this template, you can find more about this map in the page of this template.

It has the following structure :

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

gmap_utils.html
gmaps_basic.html
gmaps_services.html
vectormaps.html
gmap_routes.html