Yandex map создает две карты, как исправить?

Question

[Антон Натаров]

Я не силен в JS по этому прошу подсказать как подправить это дело.

JS

<script type="text/javascript">

    function address_value(city_name)
    {
        alert(city_name.value);
        $.ajax({
            url: 'http://geocode-maps.yandex.ru/1.x/?geocode='+ city_name.value +'&format=json&results=1',             // указываем URL и
            dataType : "json",                     // тип загружаемых данных
            success: function (data) { // вешаем свой обработчик на функцию success
                var coords = data.response.GeoObjectCollection.featureMember[0].GeoObject.Point.pos;
                // формат приходит в Широта-Долгота, мы разбиваем координаты на переменные.
                var coordMap = coords.split(' ');
                var longitude = coordMap[0];
                var latitude = coordMap[1];

                ymaps.ready(init);
                var myMap,
                    myPlacemark;

                function init(){
                    myMap = new ymaps.Map("map", {
                        center: [latitude, longitude],
                        zoom: 16
                    });

                    myPlacemark = new ymaps.Placemark([latitude, longitude], {
                        hintContent: 'Москва!',
                        balloonContent: 'Столица России'
                    });

                    myMap.geoObjects.add(myPlacemark);
                }
            }
        });
    }

</script>

HTML

<input type="text" id="find" name="plz" onchange="address_value(this);"/>

<div id="map" style="width: 100%; height: 400px"></div>

При первом запросе все ок. При втором, он генерирует такую же карту ниже с новым городом. Как мне очищать содержимое Map ? Я пробовал через InnerHTML, но безрезультатно. Как мне новый запрос отобразить в той же карте?

Comments

[OVK2015]

При первом запросе все ок. При втором, он генерирует такую же карту...

А это как, что за запуски такие?
Карту(var myMap) вынесите в глобальную область видимости. Инициализируете ее один раз(например, по document.ready). А при каждом новом ajax поиске просто удаляете старый маркер(или что там у вас) и добавляете на нее новый.

[Антон Натаров]

OVK2015: при таком раскладе, карта не перезагружается. поскольку она уже инициализированна ранее. На деле получается, что новые данные как объект существуют только сама карта не обновлена.

[OVK2015]

Антон Натаров: Так так и должно быть. Удалили старый эл-нт слоя с геоданными, добавили новый и отцентрировали карту по нему. Или вам не это нужно?

[Антон Натаров]

OVK2015: Мне это и нужно, но у меня страница то на аяксе, при этом я обновляю только гео кординаты и центровку карты, но не саму карту. Если я начинаю инциализировать карту внутри аякс запроса как в коде выше. То получается, что он с первого запроса инициализирует карту, выставляет метки. При втором запросе, он не удаляет карту, а инициализирует её по новой внутри div map, по сути там две карты лежат. Если я уничтожаю карту. То вторая не отображается и я хз почему.

var myMap,myPlacemark;

    // Дождёмся загрузки API и готовности DOM.
    ymaps.ready(init);
    function init () {
        myMap = new ymaps.Map("map", {
            center: [55.75396, 37.620393],
            zoom: 16
        });

        myPlacemark = new ymaps.Placemark([55.75396, 37.620393], {
            hintContent: 'Москва!',
            balloonContent: 'Столица России'
        });

        myMap.geoObjects.add(myPlacemark);
    }


    function address_value(city_name)
    {
        alert(city_name.value);

        $.ajax({
            url: 'http://geocode-maps.yandex.ru/1.x/?geocode='+ city_name.value +'&format=json&results=1',             // указываем URL и
            dataType : "json",                     // тип загружаемых данных
            success: function (data) { // вешаем свой обработчик на функцию success
                var coords = data.response.GeoObjectCollection.featureMember[0].GeoObject.Point.pos;
                // формат приходит в Широта Долгота, мы разбиваем координаты на переменные.
                var coordMap = coords.split(' ');
                var longitude = coordMap[0];
                var latitude = coordMap[1];

                if(myMap){
                    myMap.destroy();
                    myPlacemark.destroy();
                    
                    myMap = new ymaps.Map("map", {
                        center: [latitude, longitude],
                        zoom: 16
                    });

                    myPlacemark1 = new ymaps.Placemark([latitude, longitude], {
                        hintContent: 'Москва!',
                        balloonContent: 'Столица России'
                    });

                    myMap.geoObjects.add(myPlacemark1);

                }
            }
        });
    }


</script>

Answer 1

[Cyber_bober]

перед var myMap

if(myMap){
myMap.destroy()
}

Comments

[OVK2015]

Зачем при каждом запросе карту удалять/создавать по новой?

[Cyber_bober]

OVK2015: потому что он говорит что генерирует вторую и спрашивает как убрать первую)

[Антон Натаров]

Я так и делал, но не работает. Почему то не уничтожает объект. Хотя в документации уничтожение карты идет таким же способом.

[OVK2015]

Cyber_bober: Глобально вы так подошли. Не, ну как вариант пойдет, конечно. :)

Answer 2

[Антон Натаров]

Решил вопрос таким образом сорс кода. поиск по адресу.

<input type="text" id="find" name="plz" onchange="address_value(this);"/>

<script type="text/javascript">
    var myMap, myPlacemark;

        function address_value(city_name)
        {
            alert(city_name.value);

            $.ajax({
                url: 'http://geocode-maps.yandex.ru/1.x/?geocode='+ city_name.value +'&format=json&results=1',        
                dataType : "json",                   
                success: function (data) { 
                    var coords = data.response.GeoObjectCollection.featureMember[0].GeoObject.Point.pos;
                    var coordMap = coords.split(' ');
                    var longitude = coordMap[0];
                    var latitude = coordMap[1];

                    function init () {
                        if(myMap){
                            myMap.destroy();
                            myMap = null;
                        }
                        myMap = new ymaps.Map("map", {
                            center: [latitude, longitude],
                            zoom: 16
                    });

                        myPlacemark1 = new ymaps.Placemark([latitude, longitude], {
                            hintContent: 'Москва!',
                            balloonContent: 'Столица России'
                        });

                        myMap.geoObjects.add(myPlacemark1);
                    }
                    ymaps.ready(init);
                }
            });
        }
</script>

<div id="map" style="width: 100%; height: 400px"></div>

Answer 3

[Артем]

removeChild, и потом отрисовать новую карту?