Устанавливаем карту на сайт — API карт 2GIS, Google Maps и Яндекс.Карт
Определение координат метки
- http://dimik.github.io/ymaps/examples/location-tool/
- https://www.google.com/maps/d/viewer?mid=zvb41B-hFceg.kakoKoRlNHXc&hl=en_US
2GIS API
Быстрый старт 2GIS API — http://api.2gis.ru/doc/maps/quickstart/
Размещаем код в head страницы, где:
center — координаты центра карты в формате [широта, долгота];
zoom — коэффициент масштабирования в диапазоне от 1 до 18;
marker — координаты метки.
<script src="http://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
<script type="text/javascript">
var map;
DG.then(function () {
map = DG.map('map', {
center: [00.00, 00.00],
zoom: 10
});
DG.marker([00.00, 00.00]).addTo(map).bindPopup('Текст по клику на метку');
});
</script>
Размещаем код в месте установки карты (в body). Размеры карты по вкусу.
<div id="map" style="width:500px; height:400px"></div>
Яндекс.Карты
Быстрый старт API Яндекс.Карт — https://tech.yandex.ru/
Размещаем код в head страницы, где:
center — координаты центра карты в формате [широта, долгота];
zoom — коэффициент масштабирования в диапазоне от 1 до 16;
Placemark — координаты метки.
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
var myMap,
myPlacemark;
function init(){
myMap = new ymaps.Map("map", {
center: [00.00, 00.00],
zoom: 10
});
myPlacemark = new ymaps.Placemark([00.00, 00.00], {
hintContent: 'Текст при наведении на метку',
balloonContent: 'Текст по клику на метку'
});
myMap.geoObjects.add(myPlacemark);
}
</script>
Размещаем код в месте установки карты (в body). Размеры карты по вкусу.
<div id="map" style="width: 600px; height: 400px"></div>
Google Maps API
Быстрый старт API Яндекс.Карт — https://developers.google.com/
Размещаем код в body страницы, где:
myLatLng — координаты метки [широта, долгота];
zoom — коэффициент масштабирования в диапазоне от 1 до 18;
API_KEY — ключ API. Как получить ключ (требуется авторизация Google).
<script type="text/javascript">
var map;
function initMap() {
var myLatLng = {lat: 00.00, lng: 00.00};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Текст по клику н метку'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
Размещаем код в месте установки карты (в body). Размеры блока по вкусу.
<div id="map"></div>
Продвигаю бизнес в интернете: разработка стратегии, создание сайта, SEO, контент-маркетинг, SMM, обслуживание и техподдержка проектов. Опыт — 15 лет. Подробнее