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>
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>
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.
Screenshot example:
|
|
|
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:
|
