Map not visible when extending twig template

[andrius-kulbis]

I have the layout.html.twig file with {% block body %}, {% block stylesheet %} and {% block javascript }%.

When I try to render the map with {{ google_map(map) }} everything is ok, but if I do the following:

{% extends 'MyBundle::layout.html.twig %}
{% block body %}
{{ google_map(map) }}
{% endblock  %}

The map is not visible, the javascript code is in html, the css style for #map_canvas is there and the <div id="map_canvas"></div> is there, but the map is not visible.

Also the <div> element has different attribute values:

// Visible version, without extending base template
<div id="map_canvas" style="width: 800px; height: 600px; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>

// Not visible version, with extending the base template
<div id="map_canvas" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);"></div>

I tried rendering the css, javascript and map container with google_map_js, google_map_css and google_map_container in different blocks of the template with no luck.

The code for map creation:

$mapBuilder = $this->get('ivory_google_map.map.builder');

$mapBuilder->setCenter(55.117100, 23.940332);
$mapBuilder->setMapOptions(array(
            'mapTypeId' => 'roadmap',
            'zoom' => 7
));
$mapBuilder->setStylesheetOptions(array(
            'width' => 800,
            'height' => 600
 ));

$map = $mapBuilder->build();