Google Map

Front Google Maps allows you to use the potential of Google Maps in a simple way.

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

            
              <script src="assets/vendor/gmaps/gmaps.min.js"></script>
            
          

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

            
              <script src="assets/js/helpers/hs.g-map.js"></script>
            
          

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

            
              <script>
                // initialization of google map
                function initMap() {
                  $.HSCore.components.HSGMap.init('.js-g-map');
                }
              </script>
            
          

API

Include your API key in the following script, in the place of YOURAPIKEY.

            
              <script src="//maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap" async defer></script>
            
          

Examples

Road map

                  
                    <div id="GMapRoadmap" class="js-g-map embed-responsive embed-responsive-21by9"
                         data-lat="40.748866"
                         data-lng="-73.988366"
                         data-pin="true"></div>
                  
                

Satellite

                  
                    <div id="GMapSatellite" class="js-g-map embed-responsive embed-responsive-21by9"
                         data-type="satellite"
                         data-lat="40.748866"
                         data-lng="-73.988366"
                         data-title="Front"
                         data-pin="true"></div>
                  
                

Terrain

                  
                    <div id="GMapTerrain" class="js-g-map embed-responsive embed-responsive-21by9"
                         data-type="terrain"
                         data-lat="40.748866"
                         data-lng="-73.988366"
                         data-title="Front"
                         data-pin="true"></div>
                  
                

Street view

                  
                    <div id="GMapStreetView" class="js-g-map embed-responsive embed-responsive-21by9"
                   data-type="street-view"
                   data-lat="40.748866"
                   data-lng="-73.988366"></div>
                  
                

Custom light

                  
                    <div id="GMapCustomized-light" class="js-g-map embed-responsive embed-responsive-21by9"
                         data-type="custom"
                         data-lat="40.674"
                         data-lng="-73.946"
                         data-zoom="12"
                         data-title="Front"
                         data-pin="true"
                         data-pin-icon="../../assets/img/map-markers/map-marker6.png"
                         data-styles='[
                           ["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]],
                           ["", "labels", [{"visibility":"on"}]],
                           ["water", "", [{"color":"#bac6cb"}]]
                         ]'></div>
                  
                

Custom dark

                  
                    <div id="GMapCustomized-dark" class="js-g-map embed-responsive embed-responsive-21by9"
                         data-type="custom"
                         data-lat="40.674"
                         data-lng="-73.946"
                         data-zoom="12"
                         data-title="Front"
                         data-pin="true"
                         data-pin-icon="../../assets/img/map-markers/map-marker6.png"
                         data-styles='[
                           ["", "", [{"saturation":-100},{"lightness":50},{"visibility":"simplified"}]],
                           ["", "geometry", [{"color":"#1e303d"}]],
                           ["road", "", [{"color":"#ffffff"},{"lightness":-100}]],
                           ["road", "labels.text.fill", [{"color":"#ffffff"},{"lightness":-50}]],
                           ["water", "", [{"color":"#0e171d"}]]
                         ]'></div>
                  
                

Geolocation

                  
                    <div id="GMapGeolocation" class="js-g-map embed-responsive embed-responsive-21by9"
                         data-lat="40.748866"
                         data-lng="-73.988366"
                         data-zoom="16"
                         data-geolocation="true"
                         data-title="Front"
                         data-pin="true"
                         data-pin-icon="../../assets/img/map-markers/map-marker6.png"></div>
                  
                

Polygon

                  
                    <div id="GMapPolygon" class="js-g-map embed-responsive embed-responsive-21by9"
                         data-lat="-12.043333"
                         data-lng="-77.028333"
                         data-zoom="14"
                         data-pin="true"
                         data-polygon="true"
                         data-polygon-cords="[
                           [-12.040397656836609,-77.03373871559225],
                           [-12.040248585302038,-77.03993927003302],
                           [-12.050047116528843,-77.02448169303511],
                           [-12.044804866577001,-77.02154422636042]
                         ]"
                         data-polygon-styles='{"strokeColor":"#BBD8E9","strokeOpacity":1,"strokeWeight":3,"fillColor":"#BBD8E9","fillOpacity":0.6}'></div>
                  
                

Polylines

                  
                    <div id="GMapPolylines" class="js-g-map embed-responsive embed-responsive-21by9"
                         data-lat="-12.043333"
                         data-lng="-77.028333"
                         data-zoom="14"
                         data-pin="true"
                         data-polylines="true"
                         data-polylines-cords="[
                           [-12.044012922866312, -77.02470665341184],
                           [-12.05449279282314, -77.03024273281858],
                           [-12.055122327623378, -77.03039293652341],
                           [-12.075917129727586, -77.02764635449216],
                           [-12.07635776902266, -77.02792530422971],
                           [-12.076819390363665, -77.02893381481931],
                           [-12.088527520066453, -77.0241058385925],
                           [-12.090814532191756, -77.02271108990476]
                         ]"
                         data-polylines-styles='{"strokeColor":"#131540","strokeOpacity":0.6,"strokeWeight":6}'></div>
                  
                

Routes

                  
                    <div id="GMapRoutes" class="js-g-map embed-responsive embed-responsive-21by9"
                         data-lat="-12.043333"
                         data-lng="-77.028333"
                         data-zoom="14"
                         data-pin="true"
                         data-routes="true"
                         data-routes-cords="[
                           [-12.044012922866312, -77.02470665341184],
                           [-12.090814532191756, -77.02271108990476]
                         ]"
                         data-routes-styles='{"travelMode":"driving","strokeColor":"#131540","strokeOpacity":0.6,"strokeWeight":6}'></div>
                  
                

Geocoding

                  
                    <div id="GMapGeocoding" class="js-g-map embed-responsive embed-responsive-21by9"
                         data-lat="-12.043333"
                         data-lng="-77.028333"
                         data-zoom="14"
                         data-geocoding="true"
                         data-cords-target="#GMapGeocodingAddress"
                         data-pin="true"
                         data-pin-icon="../../assets/img/map-markers/map-marker6.png"></div>
                  
                

Multiple markers

                  
                    <div id="GMapMultipleMarkers" class="js-g-map embed-responsive embed-responsive-21by9"
                         data-type="terrain"
                         data-lat="-33.92"
                         data-lng="151.25"
                         data-zoom="10"
                         data-multiple-markers="true"
                         data-markers-locations='[
                           ["Bondi Beach", -33.890542, 151.274856, 4],
                           ["Coogee Beach", -33.923036, 151.259052, 5],
                           ["Cronulla Beach", -34.028249, 151.157507, 3],
                           ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
                           ["Maroubra Beach", -33.950198, 151.259302, 1]
                         ]'></div>
                  
                

Multiple custom markers and info window

                  
                    <div id="gMapMultipleCustomMarkersAndInfoWindow" class="embed-responsive embed-responsive-21by9 u-gmap-interactive min-height-450"
                         data-type="custom"
                         data-lat="37.4040344"
                         data-lng="-122.0289704"
                         data-zoom="13"
                         data-pin="true"
                         data-multiple-markers="true"
                         data-styles='[[
                          "", "", [
                            {"saturation": -100},
                            {"lightness": 50},
                            {"visibility": "simplified"}
                          ]],[
                            "",
                            "geometry", [
                              {"color": "#f3f3f3"}
                          ]],[
                            "road", "", [
                              {"color": "#ffffff"},
                              {"lightness": 100}
                          ]],[
                            "road",
                            "labels.text.fill", [
                              {"color": "#ffffff"},
                              {"lightness": -50}]
                          ],[
                            "water", "", [
                              {"color": "#377dff"}
                          ]]
                         ]'
                         data-markers-locations='[[
                            "../../assets/img/map-markers/map-marker1.png",
                            "Twisters Sports",
                            37.4037277, -122.0093084,
                            "../../assets/img/150x80/img1.jpg",
                            "Image description",
                            "17:48, April 27, 2017",
                            "United States",
                            "Twisters Sports"
                          ],[
                            "../../assets/img/map-markers/map-marker5.png",
                            "Equinix Data Center",
                            37.4011793, -122.013562,
                            "../../assets/img/150x80/img5.jpg",
                            "Image description",
                            "17:30, May 21, 2017",
                            "United States",
                            "Equinix Data Center"
                          ],[
                            "../../assets/img/map-markers/map-marker2.png",
                            "Amazon Lab126",
                            37.4093023, -122.0385558,
                            "../../assets/img/150x80/img2.jpg",
                            "Image description",
                            "11:48, June 3, 2017",
                            "United States",
                            "Amazon Lab126"
                          ],[
                            "../../assets/img/map-markers/map-marker3.png",
                            "Google Building TC4",
                            37.4061573, -122.0400798,
                            "../../assets/img/150x80/img3.jpg",
                            "Image description",
                            "9:48, January 1, 2017",
                            "United States",
                            "Google Building TC4"
                          ],[
                            "../../assets/img/map-markers/map-marker4.png",
                            "Sheraton Sunnyvale",
                            37.4040344, -122.0289704,
                            "../../assets/img/150x80/img4.jpg",
                            "Image description",
                            "9:48, January 1, 2017",
                            "United States",
                            "Sheraton Sunnyvale"
                          ]]'></div>
                  
                
                  
                    <!-- JS Plugins Init. -->
                    <script>
                      // initialization of google map
                      function initMap() {
                        $.HSCore.components.HSGMap.init('.js-g-map');
                        $.HSCore.components.HSGMap.init('#gMapMultipleCustomMarkersAndInfoWindow', {
                          infoWindowTemplate: function (imgsrc, imgalt, date, locationname, title) {
                            return '<div class="u-gmap-interactive__info">' +
                              '<img class="img-fluid mb-2" src="' + imgsrc + '" alt="' + imgalt + '">' +
                              '<small class="d-block text-muted mb-2">' + date + '</small>' +
                              '<h4 class="h6 mb-0">' + title + '</h4>' +
                              '<p class="mb-0">' + locationname + '</p>' +
                              '</div>';
                          }
                        });
                      }
                    </script>
                  
                

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-type="".

Attribute Description

data-type

Map types. Valid values are:
  1. satellite - satellite imagery Google Earth map. Available parameters for customization:
    • data-lat
    • data-lng
    • data-zoom
    • data-title
    • data-pin
    • data-pin-icon
    • data-geolocation
    • data-geocoding
    • data-cords-target
    • data-multiple-markers
    • data-markers-locations

    Screenshot example:

    Image Description
  2. terrain - physical map on the basis of data on the landscape. Available parameters for customization:
    • data-lat
    • data-lng
    • data-zoom
    • data-title
    • data-pin
    • data-pin-icon
    • data-geolocation
    • data-geocoding
    • data-cords-target
    • data-multiple-markers
    • data-markers-locations

    Screenshot example:

    Image Description
  3. street-view - Provides circular panoramas from these locations within the coverage area. The coverage area of the Street View API is the same as that of the Google Maps application. A list of supported cities for Street View is available on Google Maps Available parameters for customization:
    • data-lat
    • data-lng
    • data-title
    • data-geolocation
    • data-geocoding
    • data-cords-target

    Screenshot example:

    Image Description
  4. static - a static image of the map. The picture is generated according to the parameters. Available parameters for customization:
    • data-lat
    • data-lng
    • data-zoom
    • data-title
    • data-pin
    • data-pin-icon

    Screenshot example:

    Image Description
  5. custom - custom map. Available parameters for customization:
    • data-lat
    • data-lng
    • data-zoom
    • data-title
    • data-styles
    • data-polygon
    • data-polygon-cords
    • data-polygon-styles
    • data-polylines
    • data-polylines-cords
    • data-polylines-styles
    • data-routes
    • data-routes-cords
    • data-routes-styles
    • data-geolocation
    • data-geocoding
    • data-cords-target
    • data-pin
    • data-pin-icon
    • data-multiple-markers
    • data-markers-locations

    Screenshot example:

    Image Description

data-lat

Latitude coordinate.

data-lng

Longitude coordinate.

data-zoom

Zoom level.

data-title

Hover heading on pin.

data-styles

Takes parameters if data-type="" is set to custom. Working with parameters is described here.

data-polygon

If set to true true, it includes the ability to highlight the area on the map with color.

data-polygon-cords

If data-polygon="" is set to true, takes the values of the coordinates of the area for highlighting by color.

data-polygon-styles

If data-polygon="" is set to true, sets styles for selection. Parameters:
  • strokeColor - stroke color
  • strokeOpacity - stroke opacity
  • strokeWeight - stroke thickness
  • fillColor - fill color
  • fillOpacity - fill opacity

Screenshot example:

Image Description

data-routes

If true, then includes the ability to add a route according to the specified coordinates.

data-routes-cords

If data-routes="" is set to true, takes the values of the coordinates of the route.

data-routes-styles

If data-routes="" is set to true, specifies the styles for the route line. Parameters:
  • travelMode - the desired mode of movement. Accepted values:
    • DRIVING - indicates a standard road route using the road network.
    • BICYCLING - request a route for cyclists on bike lanes and preferred streets.
    • TRANSIT - a request for a route on public transport.
    • WALKING - request for a walking route along footpaths and sidewalks.
  • strokeColor - stroke color
  • strokeOpacity - stroke opacity
  • strokeWeight - stroke thickness

Screenshot example:

Image Description

data-geolocation

If true, automatic detection of geo-position is turned on.

data-geocoding

If true, the search functionality on the map is included through the form.

data-cords-target

If data-geocoding="" is set to true, the ID is passed to the value of the input field in which the data will be sent.

data-pin

If true, you can add the custom pin.

data-pin-icon

If data-pin="" is set to true, a value is passed to the path to the image.

Screenshot example:

Image Description

data-multiple-markers

If true, the possibility of adding several markers on the map will be included.

data-markers-locations

Coordinates of places displayed on the map.

Screenshot example:

Image Description

infoWindowTemplate

In order to change the infoWindowTemplate, you need to change it using the following function:
                    
                      $.HSCore.components.HSGMap.init('#GMap', {
                       infoWindowTemplate: function (imgsrc, imgalt, date, locationname, title) {
                         return '<img src="' + imgsrc + '" alt="' + imgalt + '">' +
                           '<div class="p-2">' +
                           '<strong class="d-block mb-1">' + date + '</strong>' +
                           '<p class="mb-1"><i class="fas fa-map-marker mr-2"></i>' + locationname + '</p>' +
                           '<h3 class="h5 mb-0">' + title + '</h3>' +
                           '</div>';
                       }
                      });