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

                  
                    <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

Result
HTML

                  
                    <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

Result
HTML

                  
                    <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

Result
HTML

                  
                    <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

Result
HTML

                  
                    <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

Result
HTML

                  
                    <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

Result
HTML

                  
                    <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

Result
HTML

                  
                    <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

Result
HTML

                  
                    <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

Result
HTML

                  
                    <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

Result
HTML

                  
                    <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

Result
HTML

                  
                    <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: `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: `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: `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: `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: `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:
`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:
`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:
`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:
`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:
`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>'; } });`