Додаємо катру через 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
});