Forums

C5-8.3: maps script doesn't show map

Permalink
The following html works fine on its own, the map loads and shows:
<html>
<head>
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
ymaps.ready(init);
function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.76, 37.64],
            zoom: 10
        });
    }
</script>

But when I copy that into my block's view.php:
<?php
defined('C5_EXECUTE') or die("Access Denied.");
?>
<div id="map"></div>
<script type="text/javascript">
ymaps.ready(init);
function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.76, 37.64],
            zoom: 10
        });
}
</script>

the map doesn't show up. However, if I inspect the element in the browser, the <div> is full of code. So, the script loads, but doesn't show up.

I load the script in the header in the controller:
public function on_start() {
        $html = $this->app->make('helper/html');
        $this->addHeaderItem($html->javascript('https://api-maps.yandex.ru/2.1/?lang=ru_RU'));
    }

and I checked it does load in the header.

Why doesn't the map show up? What's wrong?

Thank you.
linuxoid
 
linuxoid replied on at Permalink Reply
linuxoid
Geeeeeez, I styled the class but I forgot to define dimensions of the 'map' div:
.yandex-maps #map {
    height: 400px;
    width: 100%;
}

I thought I was gong mad...