Google Map
Space Google Maps allows you to use the potential of Google Maps in a simple way.
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 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>
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>
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 |
|---|---|
|
|
Map types. Valid values are:
|
|
|
Latitude coordinate. |
|
|
Longitude coordinate. |
|
|
Zoom level. |
|
|
Hover heading on pin. |
|
|
Takes parameters if data-type="" is set to custom. Working with parameters is described here. |
|
|
If set to true true, it includes the ability to highlight the area on the map with color. |
|
|
If data-polygon="" is set to true, takes the values of the coordinates of the area for highlighting by color. |
|
|
If data-polygon="" is set to true, sets styles for selection.
Parameters:
Screenshot example:
|
|
|
If true, then includes the ability to add a route according to the specified coordinates. |
|
|
If data-routes="" is set to true, takes the values of the coordinates of the route. |
|
|
If data-routes="" is set to true, specifies the styles for the route line.
Parameters:
Screenshot example:
|
|
|
If true, automatic detection of geo-position is turned on. |
|
|
If true, the search functionality on the map is included through the form. |
|
|
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. |
|
|
If true, you can add the custom pin. |
|
|
If data-pin="" is set to true, a value is passed to the path to the image.
|
|
|
If true, the possibility of adding several markers on the map will be included. |
|
|
Coordinates of places displayed on the map.
Screenshot example:
|
|
|
In order to change the infoWindowTemplate, you need to change it using the following function:
|
