Чем заменить карты Гуугл на своём сайте - простое решение

Карты компании Google хороши. Сервис GoogleMaps предоставляет владельцам сайтов возможность использовать их карты. (Как и большинство других картографических сервисов.)

Недавно возникла необходимость искать замену сервису GoogleMaps. Сервис GoogleMaps бесплатный только до определённого предела. Когда количество показов карты на вашем сайте превышает определённый лимит, за пользование сервисом придётся заплатить. Но, российские банковские карты (на момент подготовки статьи) не работают за границей, заплатить не удастся, и GoogleMaps оказался недоступным для российских владельцев сайтов.

Пришлось срочно искать замену. Заменить есть чем. Для карт территории России склоняюсь к картам Яндекса, а для других стран, возможно это будет Mapbox.

Проблема: для установки этих карт на сайт нудно "покопаться" в коде. Для непрограммиста это может быть сложно.

Но нашлось простое решение.
JОказывается, на картах созданных с АПИ GoogleMap можно вместо карты Гуугл показывать слой с бесплатной картой GoogleMap. Достаточно внести несколько исправлений в код, и всё работает, и ваши карты, и маркеры, и меню карты. Сообщение, что карту не удалось загрузить, больше не показывается.

Что нужно сделать?
В частности:
При инициализации карты указать
"mapTypeId: "OSM",
mapTypeControl: false,
streetViewControl: false".

Создать слой OSM
"//Define OSM map type pointing at the OpenStreetMap tile server
map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
// "Wrap" x (longitude) at 180th meridian properly
// NB: Don't touch coord.x: because coord param is by reference, and changing its x property breaks something in Google's lib
var tilesPerGlobe = 1 << zoom;
var x = coord.x % tilesPerGlobe;
if (x < 0) {
x = tilesPerGlobe+x;
}
// Wrap y (latitude) in a like manner if you want to enable vertical infinite scrolling

return "https://tile.openstreetmap.org/" + zoom + "/" + x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18"

Добавить информацию, что карта создана с использованием OpenStreetMap.

Примеры кода вы найдёте здесь - https://wiki.openstreetmap.org/wiki/Google_Maps_Example.

А работающий пример карты с заменой GoogleMaps на OpenStreetMap можно посмотреть здесь (пока не заменил на другой сервис) - https://www.visit-plus.com/map/destinations#map

Качество OpenStreetMap "неровное" для разных мест, но как быстрая замена вполне подходит, хотя бы как временное решение.

Recommended for travel lovers - our telegram channels:
Trawel worldwide telegram-chanel - https://t.me/go_vacation
Tietoja pietarista telegram-kanava - https://t.me/pietarissa
Телеграм- канал для любителей путешестаий - https://t.me/visitplus