Dima Vleskov Dima Vleskov - 3 months ago 13
Javascript Question

Problems with angular.js routing and maps

I have a problem that when i using a Routing, I don't understand why but maps duplicate, instead one map i have two.

Html file:

<div id="contacts" ng-controller="twoCtrl">
<section class="map-wrapper">
<div class="maps" id="mapOne"></div>
<div class="maps" id="mapTwo"></div>
</section>
</div>


Css :
section.map-wrapper {
margin-top: 30px;
position: relative;
height: 310px;
width: 100%;
}

section.map-wrapper .maps {
position: absolute;
height: auto;
height: 310px;
width: 100%;
z-index: 0;
opacity: 0;
transition: opacity .5s;
}

section.map-wrapper .maps.active {
z-index: 1;
opacity: 1;
}


js

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html",
controller: 'oneCtrl'
})
.when("/contacts", {
templateUrl : "pages/contacts.html",
controller: 'twoCtrl'
})
});
app.controller('twoCtrl',function($scope){
$(function() {
//maps' active classes
maps();
function maps() {
$(".load-block:first").addClass('active');
$(".maps:first").addClass('active');
$(".office-block[id='office']").addClass("active");
$("#office").click(function() {
$(".office-block[id='branch']").removeClass("active");
$(".office-block[id='office']").addClass("active");
$(".maps").removeClass("active");
$("#mapOne").addClass("active");
});

$("#branch").click(function() {
$(".office-block[id='office']").removeClass("active");
$(".office-block[id='branch']").addClass("active");
$(".maps").removeClass("active");
$("#mapTwo").addClass("active");
});
};

//map
ymaps.ready(init);
var myMap1,
myMap2,
myPlacemark,
myPlacemark2

function init(){
myMap1 = new ymaps.Map("mapOne", {
center: [50.0094033, 36.2345667],
zoom: 16,
controls: []
});

myMap2 = new ymaps.Map("mapTwo", {
center: [49.7118034, 37.6141396],
zoom: 16,
controls: []
});

myPlacemark = new ymaps.Placemark([50.0094033, 36.2345667], {
hintContent: 'Охрана и технологии',
balloonContent: 'г. Харьков, ул. Данилевского, 12 офис 22'
}, {
iconLayout: 'default#image',
iconImageHref: 'includes/icons/map-mark.png',
iconImageSize: [35, 35]
});

myPlacemark2 = new ymaps.Placemark([49.7118034, 37.6141396], {
hintContent: 'Охрана и технологии',
balloonContent: 'г.Купянск, пл.Ленина, оф.34'
}, {
iconLayout: 'default#image',
iconImageHref: 'includes/icons/map-mark.png',
iconImageSize: [35, 35]
});

myMap1.geoObjects.add(myPlacemark);
myMap2.geoObjects.add(myPlacemark2);
}
});

});

Answer

Just remove ng-controller="twoCtrl" from your html code

<div id="contacts" ng-controller="twoCtrl">

You have already assigned it in your $routeConfig

Comments