Как несколько раз использовать скрипт Яндекс Карт на странице?

Question

[Александр Филатов]

Всем привет!
есть код Яндекс карт который по адресу определяет ближайшее метро....
Как сделать так чтобы он обработал сразу несколько адресов на одной странице?

<?php
echo"<div id=\"map\" style=\"width: 100%; height: 300px\"></div>

<div id=\"metro_name\"></div>
<script src=\"http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU\" type=\"text/javascript\"></script>
 
<script type='text/javascript'>
    ymaps.ready(init);
    var metroData = {
      \"метро Бабушкинская\": \"red\",
      \"метро ВДНХ\": \"red\",
      \"метро Крапоткинская\": \"blue\",
      \"метро Щукинская\": \"brown\",
    };
    function setMetro(name){
        var el = document.getElementById('metro_name')
        el.innerHTML = name;
        
        if(typeof metroData[name] != \"undefined\"){
            el.className = metroData[name];
        }
    }
    function init(){
        var geocoder = new ymaps.geocode(
            // Здесь указан адрес из перемнной
            '$text[3]',
            // требуемое количество результатов
            {results: 4 }
        );
        
        // После того, как поиск вернул результат, вызывается callback-функция
        geocoder.then(
                function (res) {
                    // координаты объекта
                    var coord = res.geoObjects.get(0).geometry.getCoordinates();
                    var map = new ymaps.Map('map', {
                        // Центр карты - координаты первого элемента
                        center: coord,
                        // Коэффициент масштабирования
                        zoom: 7,
                        // включаем масштабирование карты колесом
                        behaviors: ['default', 'scrollZoom'],
                        controls: ['mapTools']
                    });
                    // Добавление метки на карту
                    map.geoObjects.add(res.geoObjects.get(0));
                    
                    var myGeocoder = ymaps.geocode(coord, {kind: 'metro'}).then(function(res1) {
                      var nearest = res1.geoObjects.get(0); 
                      var name = nearest.properties.get('name');
                      setMetro(name)
                      //map.geoObjects.add(nearest);
                    });
                    
                    
                    // устанавливаем максимально возможный коэффициент масштабирования - 1
                    map.zoomRange.get(coord).then(function(range){
                        map.setCenter(coord, range[1] - 3)
                    });
                    // Добавление стандартного набора кнопок
                    map.controls.add('mapTools')
                        // Добавление кнопки изменения масштаба
                            .add('zoomControl')
                        // Добавление списка типов карты
                            .add('typeSelector');
                }
        );
    }
   </script>";
?>

Answer 1

[Вячеслав Барсуков]

Создаем другую метку, к примеру map2
В коде карты так же меняем map на map2

<?php
echo"<div id=\"map\" style=\"width: 100%; height: 300px\"></div>
<div id=\"map2\" style=\"width: 100%; height: 300px\"></div>


<div id=\"metro_name\"></div>
<script src=\"http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU\" type=\"text/javascript\"></script>

<script type='text/javascript'>
    ymaps.ready(init);
    var metroData = {
      \"метро Бабушкинская\": \"red\",
      \"метро ВДНХ\": \"red\",
      \"метро Крапоткинская\": \"blue\",
      \"метро Щукинская\": \"brown\",
    };
    function setMetro(name){
        var el = document.getElementById('metro_name')
        el.innerHTML = name;
        
        if(typeof metroData[name] != \"undefined\"){
            el.className = metroData[name];
        }
    }
    function init(){
        var geocoder = new ymaps.geocode(
            // Здесь указан адрес из перемнной
            '$text[3]',
            // требуемое количество результатов
            {results: 4 }
        );
        
        // После того, как поиск вернул результат, вызывается callback-функция
        geocoder.then(
                function (res) {
                    // координаты объекта
                    var coord = res.geoObjects.get(0).geometry.getCoordinates();
                    var map = new ymaps.Map('map', {
                        // Центр карты - координаты первого элемента
                        center: coord,
                        // Коэффициент масштабирования
                        zoom: 7,
                        // включаем масштабирование карты колесом
                        behaviors: ['default', 'scrollZoom'],
                        controls: ['mapTools']
                    });
                    // Добавление метки на карту
                    map.geoObjects.add(res.geoObjects.get(0));
                    
                    var myGeocoder = ymaps.geocode(coord, {kind: 'metro'}).then(function(res1) {
                      var nearest = res1.geoObjects.get(0); 
                      var name = nearest.properties.get('name');
                      setMetro(name)
                      //map.geoObjects.add(nearest);
                    });
                    
                    
                    // устанавливаем максимально возможный коэффициент масштабирования - 1
                    map.zoomRange.get(coord).then(function(range){
                        map.setCenter(coord, range[1] - 3)
                    });
                    // Добавление стандартного набора кнопок
                    map.controls.add('mapTools')
                        // Добавление кнопки изменения масштаба
                            .add('zoomControl')
                        // Добавление списка типов карты
                            .add('typeSelector');
                }
        );
    }
   </script>

<script type='text/javascript'>
    ymaps.ready(init);
    var metroData = {
      \"метро Бабушкинская\": \"red\",
      \"метро ВДНХ\": \"red\",
      \"метро Крапоткинская\": \"blue\",
      \"метро Щукинская\": \"brown\",
    };
    function setMetro(name){
        var el = document.getElementById('metro_name')
        el.innerHTML = name;
        
        if(typeof metroData[name] != \"undefined\"){
            el.className = metroData[name];
        }
    }
    function init(){
        var geocoder = new ymaps.geocode(
            // Здесь указан адрес из перемнной
            '$text[3]',
            // требуемое количество результатов
            {results: 4 }
        );
        
        // После того, как поиск вернул результат, вызывается callback-функция
        geocoder.then(
                function (res) {
                    // координаты объекта
                    var coord = res.geoObjects.get(0).geometry.getCoordinates();
                    var map2 = new ymaps.Map('map', {
                        // Центр карты - координаты первого элемента
                        center: coord,
                        // Коэффициент масштабирования
                        zoom: 7,
                        // включаем масштабирование карты колесом
                        behaviors: ['default', 'scrollZoom'],
                        controls: ['mapTools']
                    });
                    // Добавление метки на карту
                    map2.geoObjects.add(res.geoObjects.get(0));
                    
                    var myGeocoder = ymaps.geocode(coord, {kind: 'metro'}).then(function(res1) {
                      var nearest = res1.geoObjects.get(0); 
                      var name = nearest.properties.get('name');
                      setMetro(name)
                      //map2.geoObjects.add(nearest);
                    });
                    
                    
                    // устанавливаем максимально возможный коэффициент масштабирования - 1
                    map2.zoomRange.get(coord).then(function(range){
                        map2.setCenter(coord, range[1] - 3)
                    });
                    // Добавление стандартного набора кнопок
                    map2.controls.add('mapTools')
                        // Добавление кнопки изменения масштаба
                            .add('zoomControl')
                        // Добавление списка типов карты
                            .add('typeSelector');
                }
        );
    }
   </script>";
?>