{% extends '@Core/base.html.twig' %}
{% block sidebar %}
    {% render controller('CoreBundle:Default:sidebarConfiguration') %}
{% endblock %}
{% block sectionTitle %}
    Grupo {{ group.name }}{% endblock %}


{% block breadcrumbLinks %}
    <li><a href="{{ path('groups') }}">Grupos</a></li>
    <li class="active">Geocoding Web Orders</li>
{% endblock %}

{% block content %}


    <div class="panel panel-flat">


    <div class="panel-body">

        <div id="map-canvas12" style="height: 100vh"></div>

    </div>



</div>


    {% for flash_message in app.session.flashBag.get('success') %}
        <div class="alert alert-success alert-styled-left">
            <span class="text-semibold">{{ flash_message }}</span>
        </div>
    {% endfor %}




{% endblock%}

{% block script %}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB65tARzUDDc8PgKRSAmxAa9LWNdfMFtzg&libraries=places"></script>


     <script>

         window.onload = function () {
             LoadMap();
         }

         function LoadMap() {
             var mapOptions = {
                 center: new google.maps.LatLng(48.499998, 23.3833318),
                 zoom: 4,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             };
             var map = new google.maps.Map(document.getElementById("map-canvas12"), mapOptions);

             //Create and open InfoWindow.
             var infoWindow = new google.maps.InfoWindow();

             {% for marker in weborders %}
                 var myLatlng = new google.maps.LatLng({{ marker.latitude }}, {{ marker.longitude }});
                 var marker = new google.maps.Marker({
                     position: myLatlng,
                     map: map,
                     title: "{{ marker.address }} - {{ marker.city }} - {{ marker.zip }}"
                 });

             {% endfor %}
         }

     </script>
{% endblock %}