HTML5 Geolocation API — Использование Google и Яндекс карт

HTML5 Geolocation API — Использование Google и Яндекс карт
5 (100%) 3 votes

Продолжаем знакомится с HTML5 Geolocation API. В первом уроке мы познакомились с HTML5 Geolocation API и узнали как можно определить местоположение пользователя — узнать широту, долготу и точность определения в метрах.

В этом уроке мы посмотрим на то, как можно определить местоположение пользователя сайта или мобильных приложении и показать на картах Google и Yandex. Мы будем использовать Yandex API Карт и Google Maps API. Так же посмотрим примеры построение маршрутов на картах Google и Yandex.

Для начало давайте создадим три файла — index.html, style.css и scripts.js.

У меня в HTML файле пока вот такой код:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>HTML5 Geolocation API</title>
    <link rel="stylesheet" href="style.css">
  </head>
<body>
  <div id="map"></div>

  <script src="scripts.js"></script>
</body>
</html>

Создали структуру HTML документа и подключили CSS и JavaScript файлы. Так же у меня в HTML коде есть элемент DIV с id map. Тут будет вывод карты Google или Yandex.

В CSS файле у меня такие стили для блока DIV:

#map{
   width: 600px;
   height: 400px;
   border: 1px solid #999;
}

А в JavaScript файле (script.js) практически весь код я взял из первого урока, кроме первой строки кода и вывода результата.

var block = document.getElementById('map');

function success(position) {
  var latitude = position.coords.latitude; // широта
  var longitude = position.coords.longitude; // долгота
  var accuracy = position.coords.accuracy; // точность
}

function error(errorCode) {
  var msg = "";
  switch (errorCode) {
    case 1: msg = "Нет разрешения";
      break;
    case 2: msg = "Техническая ошибка";
      break;
    case 3: msg = "Превышено время ожидания";
      break;
    default: msg = "Что то случилось не так";
  }

  block.innerHTML = msg;
}

if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(success, error);
}

В предыдущем уроке полученные данные мы выводили в алерте, а тут нам не нужно сделать вывод, по этому я убрал вывод, также мы в HTML коде создали div с id map, этот див я взял в переменную block, в дальнейшем тут мы будем выводить карту. А теперь давайте начнем работу с картами Google и Yandex.

Пример работы с Google Maps API и HTML5 Geolocation API




Давайте начнем с Google Maps API. Сначала нам нужно подключить JavaScript файл Google Maps API в нашем HTML документе перед подключением нашего скрипта.

<body>
   <div id="map"></div>

   <script src="http://maps.google.com/maps/api/js"></script>
   <script src="scripts.js"></script>
</body>

После этого нам нужно добавить опции для карты Google в нашем JavaScript файле.

var options = {
   zoom: 13,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};
  • zoom — сколько нужно увеличить масштаб карты
  • mapTypeId — тип используемой карты Google (У Google есть 4 типа карт — ROADMAP, SATELLITE, HYBRID, TERRAIN)

Уже практически у нас все готово, осталось запустить карту, передать тот блок, где нужно вывести карту, опции и местоположение пользователя.

В нашем JavaScript файле, после создание опции, добавляем следующий код:

var map = new google.maps.Map(block, options);

В этом коде мы запустили карту и передали переменную block (место где нужно вывести карту) и опции. Осталось передать местоположение — широта и долгота.

У нас есть функция под названием success где мы получаем широту, долготу и точность. Давайте в эту функцию добавим еще несколько строк кода.

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность

   var loc = new google.maps.LatLng(latitude, longitude);
   map.setCenter(loc);
}

В LatLng мы передаем широту и долготу и в переменную loc получаем специальный гугловский объект, которая нужно передать методу setCenter() объекта map. Он и занимается выводом карты.

Если мы сейчас посмотрим на результат, то увидим карту без маркера / галочки.

HTML5 Geolocation API - пример использование Google Maps API

Для добавление маркера давайте в нашу функцию добавим еще несколько строк кода.

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность

   var loc = new google.maps.LatLng(latitude, longitude);
   map.setCenter(loc);

   var infowindow = new google.maps.InfoWindow();
   infowindow.setContent("<p>Вы здесь!</p>");
   infowindow.setPosition(loc);
   infowindow.open(map);
}

Здесь мы создаем новую информационную панель, потом передаем тот текст, который нужно отображать в инфо. панели, в методе setPosition() передаем координаты и на карте отображается маркер.

пример использование Google Maps API

Ниже представлен весь код файлов index.html и scripts.js.

index.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
     <meta charset="utf-8">
     <title>HTML5 Geolocation API</title>
     <link rel="stylesheet" href="style.css">
  </head>
<body>
   <div id="map"></div>

   <script src="http://maps.google.com/maps/api/js"></script>
   <script src="scripts.js"></script>
</body>
</html>

scripts.js:

var block = document.getElementById('map');

var options = {
   zoom: 13,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(block, options);

function success(position) {
   var latitude = position.coords.latitude; // широта
   var longitude = position.coords.longitude; // долгота
   var accuracy = position.coords.accuracy; // точность

   var loc = new google.maps.LatLng(latitude, longitude);
   map.setCenter(loc);

   var infowindow = new google.maps.InfoWindow();
   infowindow.setContent("<p>Вы здесь!</p>");
   infowindow.setPosition(loc);
   infowindow.open(map);
}

function error(errorCode) {
   var msg = "";
   switch (errorCode) {
     case 1: msg = "Нет разрешения";
       break;
     case 2: msg = "Техническая ошибка";
       break;
     case 3: msg = "Превышено время ожидания";
       break;
     default: msg = "Что то случилось не так";
   }

    block.innerHTML = msg;
}

if(navigator.geolocation){
   navigator.geolocation.getCurrentPosition(success, error);
}

А теперь давайте посмотрим например использование Yandex API карт.

Пример работы с Yandex Maps API и HTML5 Geolocation API

Тут примерно тоже самое. Нам нужно подключить скрипт API Яндекс карт вместо Google.

<body>
   <div id="map"></div>

   <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
   <script src="scripts.js"></script>
</body>

После подключение скрипта Yandex API у нас в коде будет доступно глобальный объект ymaps. Объект ymaps имеет ready() метод, в которую нужно передать функцию, которая проверяет поддерживает ли браузер пользователя Geolocation API. Если поддерживает, то вызываем функцию getLocation().

В функции getLocation() определяем местоположение пользователя, передаем координаты (широта, долгота) в ymaps.Map() и он возвращает карту. В ymaps.Map() можно передать другие опции — например zoom (масштаб карты).

После этого мы можем добавить различны кнопки на карту. Это делается с помощью метода add().

  • zoomControl — кнопки увеличения и уменьшение карты
  • typeSelector — элемент управления «Типы карты»
  • mapTools — тулбар со стандартными кнопками

После этого мы выживаем ymaps.Placemark(), он принимает координаты местоположения пользователя и опции. Он занимается выводом маркера и эти опции нужны для этого. С помощью опции можно изменить тип маркера, цвет и так далее.

После этого в карту добавляем новый объект — маркер. Ниже представлен результат и код.

HTML5 Geolocation API - пример использование Yandex Maps API

Код из файла index.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
     <meta charset="utf-8">
     <title>HTML5 Geolocation API</title>
     <link rel="stylesheet" href="style.css">
  </head>
<body>
   <div id="map"></div>

   <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>
   <script src="scripts.js"></script>
 </body>
</html>

Код из файла scripts.js:

ymaps.ready(init);

function init() {
   if(navigator.geolocation) {
     getLocation();
   }else{
     document.getElementById("map").innerHTML = "Geolocation API не поддерживается в вашем браузере";
   }
}

function getLocation() {
   navigator.geolocation.getCurrentPosition(function (position) {
     var latitude = position.coords.latitude;
     var longitude = position.coords.longitude;
     var map = new ymaps.Map("map", {
       center: [latitude, longitude],
       zoom: 13
     });

     map.controls
       .add('zoomControl')
       .add('typeSelector')
       .add('mapTools');

     var place = new ymaps.Placemark(
       [latitude, longitude],
       {iconContent: "Вы здесь!"},
       {preset: "twirl#redStretchyIcon"}
     );

     map.geoObjects.add(place);
   });
}

Об авторе

Занимаюсь программированием уже более 7 лет. Часто использую JavaScript (Node.js) и Python.

1 комментарий

Вы можете комментировать эту статью


  • Дааа…. Все так просто и хорошо рассказано и показано! Но, к сожалению, на мой вопрос ответа нет и здесь. Интересует вопрос — можно ли в картах Google Maps задать/изменить проекцию, чтобы увидеть карту с центром на Северном Полюсе? Если бы хоть кто-то подсказал, что например это невозможно, то отрицательный результат для меня был бы уже результатом. А пока что мучаюсь в полном неведении…. Дока недоступна.

    Наталья 2 года ago Reply


Комментарии