Устанавливаем карту на сайт — API карт 2GIS, Google Maps и Яндекс.Карт

02 сентября 2015  3929  карты, api

 

Определение координат метки

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>

 

  Другие замётки в тему

Комментарии для сайта Cackle
наверх