Как перейти в центр маркера при нажатии кнопки HTML

Question

Я использую API Google Maps и хочу установить центр карты в определенном месте при нажатии кнопки (html).

Я попытался добавить функцию newLocation, которая принимает два параметра для долготы и широты. Затем к кнопке с идентификатором «TestButton» подключается другая функция.

HTML-кнопки

<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="TestButton"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>

CSS

     #map {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

Создание карты и настроек

 var map;
        function initMap() {

            //Set center map
            var CenterLoc = { lat: 51.34, lng: 5.53 };

            //Set map settings
            map = new google.maps.Map(document.getElementById('map'),
                {
                    center: CenterLoc,
                    disableDefaultUI: true,
                    zoom: 3,
                });

создание функции и настройка центра

            //Center function
            function newLocation(newLat, newLng) {
                map.setCenter({
                    lat: newLat,
                    lng: newLng
                });
            }

             google.maps.event.addDomListener(window, 'load', initMap);

            //Setting location center 
            $(document).ready(function () {
                $("TestButton").on('click', function () {
                    newLocation(48.1293954, 11.556663);
                });
            });

<script src="http://code.jquery.com/jquery.min.js"></script>

Это все части кода, которые, я думаю, имеют отношение к этой проблеме. Однако весь код здесь: https://pastebin.com/dzFYYtDH

Я не получаю никаких ошибок в консоли браузера. Но ничего не происходит, когда я нажимаю кнопку.

Answer 1

В JQuery, чтобы выбрать или найти уникальный элемент HTML, используя его атрибут id, вам нужно будет использовать селектор #id.

В вашем случае используйте следующее:

 $(document).ready(function () {
   $("#TestButton").on('click', function () {
     newLocation(48.1293954, 11.556663);
   });
 });

Вот рабочий пример в jsfiddle .Подробнее о JQuery #id Selector здесь .

Надеюсь, это поможет!

Answer 2

Для этого вы можете использовать метод panTo, например:

var latLng = new google.maps.LatLng(lat, lng);
map.panTo(latLng);

Документация здесь .