Зміна css стилів Google maps (javaScript api)

Додаємо катру через API

Для отримання доступу до редагування стилів мапи, потрібно створити апі ключ: лінк

Втавляємо його замість YOUR_API_KEY:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Если нужно вызывать коллбэк после загрузки api, после ключа надо будет дописать YOUR_API_KEY&callback=initMap с названием вашей функции. Подключаем скрипт на странице и создаем в разметке блок для будущей карты:

Якщо потрібно викликати коллбек після завантаження api, після ключа треба буде дописати YOUR_API_KEY&callback=initMap з назвою вашої функції. Підключаємо скрипт на сторінці і створюємо в розмітці блок для майбутньої карти:

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

Теперь необходимо инициализировать карту:

var map;
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(50.381357, 30.503876),
        zoom: 15,
        scrollwheel: false,
        disableDoubleClickZoom: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });
}

Вписуємо координати, і можемо спостерігати карту на сайті

Властивості, які можуть відразу знадобитися:

  • zoom: number — визначає первинний масштаб.
  • disableDefaultUI: boolean – прибирає елементи управління.
  • scrollwheel: boolean — відключає масштабування коліщатком миші (буває корисно, якщо карта на всю ширину сторінки і перебиває прокрутку вниз).

Редагувати стилі мапи можна в зручному редакторі а на виході отримати масив стилів: https://snazzymaps.com/editor
вставляємо масив в параметр Styles

map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(50.381357, 30.503876),
        zoom: 15,
// zoomControl: false,
// scaleControl: false,
        scrollwheel: false,
        disableDoubleClickZoom: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles:     [
            {
                "featureType": "landscape",
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#e7e7e7"
                    }
                ]
            }
        ]

    });

З маркером теж все просто:

function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        if (html) {
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
            });
        }
        return marker;
    }

    var image = {
        url: '/img/map.png',
        scaledSize : new google.maps.Size(75, 75),
    };

    var marker0 = createMarker({
        position: new google.maps.LatLng(50.381357, 30.503876),
        map: map,
        icon: image
    });