Skip to main content

Google Map

Space 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 Space to enable it.

            
              <script src="../../assets/js/components/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>
            
          

Example

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="Space"
                   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="Space"
                   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="Space"
                   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="Space"
                   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="Space"
                   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>
            
          

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.

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="fa fa-map-marker mr-2"></i>' + locationname + '</p>' +
                             '<h3 class="h5 mb-0">' + title + '</h3>' +
                             '</div>';
                         }
                        });