@user_tm

Как менять адреса по нажатию на одну кнопку на Google map api JavaScript?

У компании в контактах на Gogle карте три адреса, есть так же кнопка нажав на которую, один адрес сменяется на второй и так далее по нажатию.
5c693176b0469897898924.png
В скрипте имеется три маркера var marker, три переменные var myLatLng1 = {lat: 59.910726, lng: 30.318788}; с присвоенным значением координат и карта map, так же есть массив var arrLatLng = [myLatLng1, myLatLng2, myLatLng3] состоящий из координат. Есть функция "клик по кнопке". Я только начинаю изучать JS и как мне кажется нажав на кнопку, переменная var i которая равна нулю должна изменится на 1, тем самым в объекте map в свойстве (не знаю правильно ли я назвал "свойстве") center: arrLatLng [i] должен поменяться порядковый номер элемента массива ну и соответственно должен поменяться на карте адрес. Но этого не происходит. А если бы и менялось, то что было бы если кликнуть на кнопку больше трех раз, т е как зациклить функцию?
вот код надеюсь все понятно:
jQuery(document).ready(function () {
        function initMap() {         
               
            var myLatLng1 = {lat: 59.910726, lng: 30.318788}; // адрес 'Цветочная улица 50'
            var myLatLng2 = {lat: 59.888609, lng: 30.323378}; // адрес 'Заставская улица 30'
            var myLatLng3 = {lat: 59.889525, lng: 30.330591}; // адрес 'Цветочная улица, 10А' 
            var arrLatLng = [myLatLng1, myLatLng2, myLatLng3]; // массив из адресов 
            
            var i = 2; //переменная указывающая порядковый номер одного из элементов массива
            
            $(function (){
                $("#btn").click(function() { //кнопка по нажатию которой, переменная i увеличивается на 1
                    i++;
                });
            });
            
            
            
            var map = new google.maps.Map(document.getElementById('solid-map'), {
              center: arrLatLng [i],// элемент массива из адресов. 
              zoom: 17
            });
            
            var marker = new google.maps.Marker({ // маркер 'Московский пр. д.50'
                position: myLatLng1,
                map: map,
                title: 'Московский пр. д.50'
            });
            
            var marker2 = new google.maps.Marker({ // маркер 'Заставская улица 30'
                position: myLatLng2,
                map: map,
                title: 'Заставская улица 33'
            });
            
            var marker3 = new google.maps.Marker({ // маркер 'ул. Цветочная 10'
                position: myLatLng3,
                map: map,
                title: 'ул. Цветочная 10'
            });
        }        
    initMap();
});

карта отображается, маркеры тоже, тестировал кнопку работает (консол показывает что переменная var i изменяется при клике), если поменять в ручную значение переменной var i, то адрес на карте тоже меняется. Может это все вообще по другому решается? Подскажите пожалуйста.
  • Вопрос задан
  • 66 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
$("#btn").click(function() {
  i = (i + 1) % arrLatLng.length;
  map.setCenter(arrLatLng[i]);
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы