четверг, 23 ноября 2017 г.

Полезное для работы с Google Maps API

Часто приходится кастомизировать карты гугла, и каждый раз приходится гуглить гуглить и гуглить.. Решил здесь собрать наработки по своему опыту работы с картами.

1. Инициализация карты

Подключение скрипта к странице
<script async defer src="https://maps.google.ru/maps/api/js?hl=ru&language=ru&region=RU&key=YOUR_CODE&callback=initMap"
            type="text/javascript"></script>
Здесь уже настроена русская локализация, было мной нагуглено. Вместо YOUR_CODE Нужно будет получить код для работы с картами, ссылку привести не могу уже позакрывал все.

Начальная настройка

Стартовая настройка должна быть в функции initMap название которой мы передали гуглу при подключении скрипта, можете проверить!

function initMap() {
   map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 11,
       center: {lat: 0; lng: 0}
   });
}
 
Здесь все просто, мы вещаем карту на элемент #map_canvas даем карте начальный зум 11 и центруем ее в пуп Земли.

Создание маркеров

В моем случае мне был нужен функционал который смог бы динамически добавлять и убирать маркеры с карты, поэтому пока здесь опишу только эти возможности

var myMarker = new google.maps.Marker({
            position: {lat: 0, lng: 0},
            title: 'Realy good marker'
        });

// Поставить маркер на карту
myMarker.setMap(map);
// Убрать маркер
myMarker.setMap(null);
 
Дальше почти 100% вероятность, что маркер у нас кастомный, эта проблема решается вот так

markerImage = new google.maps.MarkerImage(
    '/assets/images/bg-map.png',
    new google.maps.Size(33, 33),
    new google.maps.Point(0,0),
    new google.maps.Point(0,33)
);

// Это просто объект с картинкой, его нужно передать
// В маркер стиль которого нужно поменять
var myMarker = new google.maps.Marker({
            icon: markerImage,
            position: {lat: 0, lng: 0},
            title: 'Realy good marker'
        });
 
И в заключении часто нужно изменить цвета карты под стиль сайта, очень часто цвета просто черно - белые.

var styleArray = [
    {
        featureType: "all",
        stylers: [
            { saturation: -100 }
        ]
    },{
        featureType: "road.arterial",
        elementType: "geometry",
        stylers: [
            { hue: "#00ffee" },
            { saturation: 50 }
        ]
    },{
        featureType: "poi.business",
        elementType: "labels",
        stylers: [
            { visibility: "off" }
        ]
    }
];
map.setOptions({styles: styleArray});
 
Вприципе этого должно быть достаточно для настройки любой карты.

Комментариев нет:

Отправить комментарий

Рабочий способо убрать хрип микрофона в Ubuntu 18.04

Переходим по ссылке и делаем также как в видео https://www.reddit.com/r/Ubuntu/comments/6zq3ca/remove_background_noise_on_the_mic_in_ubun...