Google Maps API, смена центра карты

221
27 января 2018, 00:37

На сайте на диапазоне ниже 992px нужно изменить центр google карты.

Пробовал внутрь функции карты написать уловия if($(window).innerWidth() < 993), но тогда при первом открытии index.html карта совсем не загружается, и в консоли показывает ошибку на строке, где находится условия, а если обновить страницу, то тогда все становится на место, карта появляется, центр ее меняется на диапазоне ниже 992px и ошибки нет.

В чем может быть проблема, как правильно решить вопрос смены центра карты. Саму карту подключал через внешний файл google-maps.js

Код, который в google-maps.js

function initMap() {
var centerLatLng = {lat: 46.485831, lng: 30.662000};
if($(window).innerWidth() < 993) {
    var centerLatLng = {lat: 46.484050, lng: 30.659420};
};
var element = document.getElementById('google-map');
var options = {
    zoom: 17,
    center: centerLatLng,
    scrollwheel: false,
};
var myMap = new google.maps.Map(element, options);
var marker = new google.maps.Marker({
    position: {lat: 46.485550, lng: 30.659420},
    map: myMap,
    icon: 'images/base/google-marker.png'
});
marker.addListener('click', function () {
    InfoWindow.open(myMap, marker);
});
};

Ошибка в консоли при первом запуске index.html

Answer 1

innerWidth() - метод jQuery. Доступен только после загрузки jQuery. Видимо в момент инициализации карты jQuery еще не загружен. Кроме того, судя по документации, этот метод вообще не подходит для $(window).

This method is not applicable to window and document objects; for these, use .width() instead.

В вашем случае достаточно заменить $(window).innerWidth() на window.innerWidth.

window.innerWidth - глобальное свойство. В браузере доступно для скриптов всегда

Если обязательно нужны jQuery методы, придется сделать отложенную инициализацию

READ ALSO
Почему Invalid date при добавлении данных из массива в Date?

Почему Invalid date при добавлении данных из массива в Date?

Есть JSON объект, в котором передаются такие данные: {timestamp,price}, где timestamp это число, price число с плавающей точкой

216
Ошибка в консоли при работе с YouTube IFrame Player API

Ошибка в консоли при работе с YouTube IFrame Player API

Не работает youtube APIВ head добавлен

295
Помогите отправить пост запрос с куками и дата Javascript Request

Помогите отправить пост запрос с куками и дата Javascript Request

Помогите отправить пост запрос на сайт, поставил модуль request, он прекрасно работает если делать запросы без header, но мне надо отправить запрос...

205