Google Map

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

Important!

The Google Map degradation issue is related with the latest changes that were introduced on June 11th, 2018. For more information, see https://developers.google.com/maps/billing/important-updates . Hence, you are required to use your own API.

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>
                
              

Important!

In some cases, Google Map does not work, for this reason, the following Google Map API key script should be included at the bottom of the page, after all scripts, before closing </body> tag.

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>';
                           }
                          });
                        
                      
Contact Us