{% macro call(core, map, footer, locale) %}
{% import "features/component-info.twig" as componentInfo %}
{% if map.lat and map.lng %}
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key={{ core.auth.apimaps }}"></script>
<script type="text/javascript" src="{{ core.public }}/js/gmaps.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var map = new GMaps({
        div: '#map-container',
        lat: {{ map.lat }},
        lng: {{ map.lng }},
        scrollwheel: false,
        zoom: 17,
        //mapType: 'satellite'
    });

    var marker = map.addMarker({
        lat: {{ map.lat }},
        lng: {{ map.lng }},
        title: '{{ core.title|raw }}',
        infoWindow: {
            content: '<h2 style="margin-bottom: 10px">{{ footer.address.company|raw }}</h2>
                      <p>{{ componentInfo.address(footer.address) }}</p>
                      <br>
                      <p><a class="btn btn-flat flat-button" href="{{ map.url|raw }}" target="_blank"><i class="fa fa-map-marker"></i> {{ locale.extra.howtoget|raw }}</a></p>'
        }
    });
});
</script>
{% endif %}
{% endmacro %}

{% macro view(extra, id = 'map-container', class = 'height-500') %}
{% if extra.static.localization.map.lat and extra.static.localization.map.lng %}
<div id="{{ id }}" class="{{ class }}"></div>
{% endif %}
{% endmacro %}