Google Map (Gmap)
This is a Google map. It leverages the Google Maps JavaScript API.
Usage:
- Include the
@h4h_theme/gmap/gmap.twig
file passing it the needed map id. - Populate the drupalSettings.gMaps object with the needed data.
Example drupalSettings.gMaps
:
"gMaps":[
{
"id": "map1",
"center":{
"lat": -25.363,
"lng": 131.044
},
"markers":[
{
"title": "Some label 1",
"style": "red",
"position": {
"lat": -10.363,
"lng": 120.044
},
"details": {
"title": "Seminole / Apopka ReStore",
"desc": "<p>110 Americana Blvd</p><p>Sanford, FL 32773-8027</p>",
"phone": "tel:+17709956211",
"email": "mailto:[email protected]",
"website": "https://example.com/"
}
},
{
"title": "Some label 1",
"style": "blue",
"position": {
"lat": -15.151,
"lng": 131.044
},
"details": {
"title": "Some Other ReStore",
"desc": "<p>First Line Address</p><p>City, FL 32773-8027</p>",
"phone": "tel:+17709956211"
}
},
{
"title": "Some label 1",
"style": "blue",
"position": {
"lat": -40.363,
"lng": 100.044
}
}
]
}
]
{{ attach_library('h4h_theme/gmap') }}
<section class="gmap {{ modifier_class }}">
<div class="gmap__info">
{%
include "@h4h_theme/info-window/info-window.twig" with {
id: id
} only
%}
</div>
<div class="gmap__buttons">
<button class="gmap__button btn btn--reversed" id="gmap__location">{{ "Local Habitat"|t }}</button>
<button class="gmap__button btn" id="gmap__restore">{{ "ReStore"|t }}</button>
</div>
<div class="gmap__item {{ className }}" id="{{ id }}"></div>
</section>