CODEWITHSUNDEEP
angularjsyandex-maps
Movsar Bekaev
Movsar Bekaev

Reputation: 908

Angularjs + Yandex Maps

I'm trying to use Yandex Maps with this AngularJS module. Here they have demonstrations, and here's my code:

index.html 

  <!DOCTYPE html>
<html lang="ru" xmlns:vml="urn:schemas-microsoft-com:vml" ng-app="myApp" ng-controller="myController">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1" />
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <link rel="stylesheet" href="style.css">

    <script src="angular.min.js"></script>
    <script src="ya-map-2.1.min.js"></script>


    <script src="script.js" type="text/javascript"></script>
</head>
<body>

     <div id="map" class="w3-col s10 w3-dark w3-border">    
        <!-- 
         <ya-map ya-zoom="8" ya-center="[37.64,55.76]" style="width:400px;height:500px;"></ya-map>
         -->
     </div>

</body>
</html>

script.js

console.log("script starts");

var myApp = angular
    .module('myApp', ['yaMap'])
    .controller("myController", function ($scope) {
        console.log("In the controller");
        var _map;


        $scope.afterMapInit = function (map) {
            _map = map;
        };
        $scope.del = function () {
            _map.destroy();
        };

        console.log("After $scope ops");

        $scope.initialize = function () {
            var mapOptions = {
                center: [50.5, 30.5],
                zoom: 8
            };
            ymaps.ready(function () {
                $scope.map = new ymaps.Map("map", mapOptions);
            })
        }
    });

style.css

body {
    background-color: #fff;
    margin: 40px;
}

#body {
    margin: 0 15px 0 15px;
}

#frmMain {
    width: 100%;
    height: 100%;
}

Please, if you know why I can't load the map and what's wrong with that code, (I suppose it's all wrong though), tell me about it!

I'm total novice in AngularJS and Yandex Maps, so, it may appear a silly question for you, but I cannot find anything useful on the Internet.

Upvotes: 0

Views: 824

Answers (1)

Grundy
Grundy

Reputation: 13381

Promblem here in style for non-standard tag ya-map. By default browser set it display property to "inline", so without text element collapse to width:0, height:0.

Also, you not use any functions declared in controller.

You can see samples in Demo Page

var myApp = angular
  .module('myApp', ['yaMap'])
  .controller("myController", function($scope) {
    var _map;

    $scope.afterMapInit = function(map) {
      _map = map;
    };
    $scope.del = function() {
      _map.destroy();
    };

  });
ya-map {
  display: block;
  width: 400px;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//rawgit.com/tulov/angular-yandex-map/master/ya-map-2.1.min.js"></script>

<div id="map" class="w3-col s10 w3-dark w3-border" ng-app="myApp" ng-controller="myController">
  <ya-map ya-zoom="8" ya-center="[37.64,55.76]" ya-after-init="afterMapInit($target)"></ya-map>
  <button ng-click="del()">Удалить</button>
</div>

Upvotes: 1

Related Questions