Инициализация нескольких яндекс карт

Вот html

<div class="map"  data-long="50.6106903" data-lat="36.5612213" data-zoom="13"></div>
<div class="map"  data-long="51.6106903" data-lat="36.5612213" data-zoom="13"></div>
<div class="map"  data-long="52.6106903" data-lat="36.5612213" data-zoom="13"></div>

Вот JavaScript

var counter=0;
var mapZoom;
var lat;
var long;
$(".map").each(function() {
    counter++;
    $(this).attr("id", 'map'+counter);
    mapZoom = $("#map"+counter).attr("data-zoom");
    lat = $("#map"+counter).attr("data-lat");
    long = $("#map"+counter).attr("data-long");
    ymaps.ready(function () {        
        var myMap = new ymaps.Map('map'+counter, {
            center: [long, lat],
            zoom: mapZoom
        }, {
            searchControlProvider: 'yandex#search'
        });
        myPlacemark1 = new ymaps.Placemark([long, lat], {
            hintContent: ''
        }, {
        });
        myMap.geoObjects.add(myPlacemark1);        
    });
});

Но так не работает. Как можно это сделать?