{% block google_maps_widget %}
    {% if jquery %}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    {% endif %}
    <div class="col-md-12 col-sm-12 col-xs-12">
        <input style="width: {{ map_width }};" id="pac-input" type="text" placeholder="{{ input_placeholder }}"><br /><br />
    </div>
    <div id="map" style="width: {{ map_width }}; height: {{ map_height }};"></div>

    {{ form_row(form.lat) }}
    {{ form_row(form.lng) }}
    {% if city %}
        {{ form_row(form.city) }}
    {% endif %}
    {% if address %}
        {{ form_row(form.address) }}
    {% endif %}
    <div id="infowindow-content">
        <script>
            var default_lat = {{ default_lat }};
            var default_lng = {{ default_lng }};
            var map_template = '';
            var map_type = '{{ map_type }}';
            $(document).ready(function () {
                if ($('#pac-input').val() === '') {
                    $('#place-icon').show()
                }
            })
        </script>
        <img src="" width="16" height="16" id="place-icon">
        <span id="place-name" class="title"></span><br>
        <span id="place-address"></span>
    </div>

    {% if map_template %}
        {% if map_template == 'night' %}
            <script src="{{ asset('bundles/googlemaps/js/google_maps_night.js') }}"></script>
        {% elseif map_template == 'styled' %}
            <script src="{{ asset('bundles/googlemaps/js/google_maps_styled.js') }}"></script>
        {% elseif map_template == 'custom' %}
            <script src="{{ asset('bundles/googlemaps/js/google_maps_custom.js') }}"></script>
        {% endif %}
    {% endif %}
    <script src="{{ asset('bundles/googlemaps/js/GoogleMaps.js') }}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key() }}&libraries=places&callback=initMap"
            async defer></script>
{% endblock google_maps_widget %}