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/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>

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