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

Question

[user_tm]

У компании в контактах на Gogle карте три адреса, есть так же кнопка нажав на которую, один адрес сменяется на второй и так далее по нажатию.

В скрипте имеется три маркера 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, то адрес на карте тоже меняется. Может это все вообще по другому решается? Подскажите пожалуйста.

Answer 1

[0xD34F]

$('#btn').click(function() {
  i = (i + 1) % arrLatLng.length;
  map.setCenter(arrLatLng[i]);
});

Comments

[user_tm]

АААААААААААААААААААААААААААААААААААААААААААААААА ЧЕЛ спасибо огромное. Ты не представляешь как я ща РАААААААААААААААААДД

[user_tm]

Уважаемый 0xD34F, сегодня я решаю такую же задачу, но уже не на гугл карте, а на яндекс кате. Мне как человеку еще пока не освоившему JS сделать это сложно и по этому я прошу Вас помочь мне в этом деле. Я уже создал вопрос Как менять центр яндекс карты по клику на кнопку? и увидев Вас в списке экспертов не смог не пригласить Вас.

Answer 2

[Максим Ангарков]

Сложный процесс это
Отдыхай

Answer 3

[Сергей Абдулов]

так а толку от гугл карт с ее ограничениями, все только за деньги - бросьте этих барыг