Использование Google Maps API для создания карт

Стандартной карты Google или Яндекс бывает недостаточно. Поэтому для разработчиков были созданы специальные API – средства разработчиков. Сегодня мы рассмотрим Goolgle Maps API и научимся им пользоваться.


Первое, что необходимо сделать – получить ключ API KEY. Это код, который позволяет привязать ваш проект к карте и дает ряд преимуществ для разработчика:
  1. Мониторинг использования приложения в в Google API Console – отслеживание трафика, ошибок и т.д.
  2. Дает доступ к бесплатной квоте на использование карт.
  3. Осуществляет связь между картами Google и вашим приложением.
Для получения ключа перейдите по ссылке и нажмите кнопку «Получение ключа».

Перед вами откроется окно, в котором будет предложено выбрать существующий проект или создать новый. Вы должны быть авторизованы в Google!

Если у вас уже есть проект – выберите его. Если нет – создайте новый.

После нажатия на кнопку «Create and enable API» вам будет выдан персональный ключ проекта.

Сохраните его – ключ понадобится в дальнейшем.
На втором этапе необходимо на сайте PIXLI создать блок и добавить в него HTML-код с помощью виджета.

Растяните родительский блок на весь экран. В дальнейшем это позволит позиционировать в нем карту.
Третий шаг – подключение карты
В HTML-код вставьте скрипт подключения к Google API и вставьте в эту строку свой ключ.
<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJ5Y5umIx7pg-2g5KSHRLnkmEiIueXE6o">
    </script>
Значение атрибута src позволяет обратиться к файлу, отвечающему за работу кода. Фактически мы указываем на скрипт, в котором описаны все объекты, используемые нами. Далее указывается ключ. Этот код является обязательным – без него карта подгружена не будет.
Чтобы экземпляр карты был выведен на экран, нам понадобится блок. Добавим его в код
<div id="map"></div>
Для добавления карты воспользуемся объектом MAP.
map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});
Параметры center и zoom являются обязательными для инициализации. В первом указываются координаты центра, который увидит пользователь. Второй параметр – это увеличение. Уровень детализации карты зависит от значения зума:
  • 1: весь мир;
  • 5: уровень континента;
  • 10: охват города;
  • 15: улица;
  • 20: детализация до здания.
Выберем zoom со значением 10.
Добавьте этот код в блок HTML и запустите.
<style>
  #map{
    width:800px;
    height:400px;
  }
</style>
<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJ5Y5umIx7pg-2g5KSHRLnkmEiIueXE6o">
    </script>
<script>
  window.onload=function(){
    map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});
  }
</script>
<div id="map"></div>
На экране вы увидите карту.

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

Это и есть координаты. Давайте попробуем центрировать нашу карту на Екатеринбурге. Находим на карте гугл город, и считываем координаты любой его точки в центре.

Подставим эти координаты в наш код:
map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 56.8514127, lng: 60.6527127},
  zoom: 8
});
При открытии карты вы увидите Екатеринбург.

Таким образом, вы можете с помощью zoom и center вывести для посетителя любую точку на карте.

Параметры класса MAP


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

Типы карт


Вы можете выбрать карту нужного вида:
  • ROADMAP – карта дорог. Она устанавливается по умолчанию.
  • SATELLITE – спутниковые снимки.
  • HYBRID – улицы на спутниковых снимках.
  • TERRAIN – рельеф и растительность.
Чтобы указать тип, необходимо использовать параметр mapTypeId:
map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 56.8514127, lng: 60.6527127},
  zoom: 8,
  mapTypeId: 'satellite'   
});
В итоге вы увидите такое изображение:

Элементы управления


Вы, наверное, замечали, что на картах в интернете есть как минимум значки «+» и «-« для управления масштабом. Кроме этого вы можете расзметсить значки переключения типов карты, поворота и т.д.
  • Zoom – кнопки масштаба;
  • Pan – управление прокрутки карты.
  • Map Type – выбор типа карты в левом верхнем углу.
  • Street view – значок человечка. Позволяет рассматривать улицы. Чтобы им воспользоваться, перетащите человечка на карту.
  • Scale – шкала масштаба.
  • Rotate – иконка поворота карты.
Попробуйте вывести эти элементы на вашу карту.
<style>
  #map{
    width:800px;
    height:400px;
  }
</style>
<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJ5Y5umIx7pg-2g5KSHRLnkmEiIueXE6o">
    </script>
<script>
  window.onload=function(){

    var mapOptions = {
               center:new google.maps.LatLng(56.8514127,  60.6527127) ,
               zoom:10,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
     var map = new google.maps.Map(document.getElementById("map") ,mapOptions);
         }
 </script>
<div id="map"></div>

Как видите, на карте появились новые значки, которые дают очень интересные возможности вашим посетителям.
Это далеко не все возможности карт, но об остальных мы расскажем в следующей статье. Удачи!
14 августа 2017, 14:24    Ivan Web-дизайн 0    2 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.