Как использовать API Карт Google

Карты Google — очень популярный API, и на то есть веские причины. Это мощный инструмент, который пригодится в самых разных ситуациях. В этой статье будут рассмотрены некоторые из множества различных способов использования API Google в ваших приложениях.

Для начала вам нужно получить ключ API от Google. Это очень легко сделать. Просто зайдите на developers.google.com и нажмите на значок Карты. Отсюда у вас есть варианты для различных платформ, с которыми вы можете использовать Карты. В этом руководстве предполагается, что вы создаете веб-приложение с использованием JavaScript, поэтому щелкните значок веб-приложения, и отсюда вы можете щелкнуть ссылку, чтобы получить ключ. Если вы никогда не делали этого раньше, вам придется создать учетную запись разработчика Google, но это очень легко сделать. Если у вас есть учетная запись, вы можете создать проект. Просто выберите имя для своего проекта, и Google предоставит вам новый блестящий ключ API.

Теперь, когда у вас есть ключ, вы готовы к работе. Давайте начнем.

Основы

Для этого руководства создайте файл index.html и файл map.js. В ваш index.html вставьте следующий код:

<!DOCTYPE html>
<html>
<head>
  <title>Google Maps Demo</title>
  <style>
   #map {
     width: 100%;
     height: 500px;
     background-color: grey;
   }
  </style>
</head>
<body>
  <h3>My Google Maps Demo</h3>
  <div id="map"></div>
  <script src="map.js"></script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap">
  </script>
</body>
</html>

Здесь у нас есть некоторые базовые стили, которые применяются к пустому в данный момент div с идентификатором map. Это холст, на котором в итоге появится наша карта. Фоновый цвет существует только для того, чтобы вы могли видеть, где в конечном итоге появится ваша карта. Вы можете удалить эту линию в любой момент. Тег script под div карты — это ссылка на ваш файл JavaScript, в котором мы фактически создадим нашу карту. Следующий тег сценария загрузит для вас Maps API. Обязательно вставьте свой ключ API, если вы не создаете его в JSFiddle.

Затем добавьте следующий код в файл map.js:

function initMap() {
  var tokyo = {lat: 35.6895, lng: 139.6917};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: tokyo
  });
var marker = new google.maps.Marker({
    position: tokyo,
    map: map
  });
};

Теперь, если вы запустите свой index.html, у вас должна быть карта с маркером в центре Токио.

В настоящее время это приложение функционально, но не очень динамично. Одна полезная функция, которую вы можете добавить, — это возможность использовать геолокацию для отображения вашего текущего местоположения на карте. Это можно сделать с помощью нескольких простых изменений.

Найти себя

Вместо использования маркера для отображения вашего местоположения было бы полезно отобразить информационное окно. Идем дальше и удаляем переменную маркера и ее функцию. Далее замените его на это:

var infoWindow = new google.maps.InfoWindow;

Как вы понимаете, эта строка кода создает новое информационное окно, но оно еще не используется. Сначала вам нужно найти место, которое вы ищете, а затем вы можете настроить информационное окно на это место. Это потребует немного больше кода. Вставьте следующее в вашу функцию initMap:

// Check to see if browser supports Geolocation
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }

Это будет работать с вашим браузером, чтобы попытаться получить доступ к вашему местоположению. Если по какой-либо причине это не удается, для обработки ошибки будет вызвана функция handleLocationError. Давайте удостоверимся, что эта функция включена:

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
  infoWindow.open(map);
}

Если вы запустите свое приложение сейчас, ваш браузер разрешит вашему приложению узнать ваше местоположение. На данный момент ничего не изменится, но ваше приложение работает. Откуда вы знаете? Вы просто должны доверять мне! Но если вам нужно доказательство, измените свой предыдущий код, чтобы он выглядел так:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var pos = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    infoWindow.setPosition(pos);
    infoWindow.setContent('Location found.');
    infoWindow.open(map);
    map.setCenter(pos);
  }, function() {
    handleLocationError(true, infoWindow, map.getCenter());
  });
....

Теперь ваша карта будет сосредоточена на полученных координатах и установит информационное окно на это место, которое, надеюсь, ваше!

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

Накладки

Во-первых, удалите код infoWindow и GeoLocation. Затем добавьте объект imageBounds, который будет определять, где наше наложение будет отображаться на карте, а также его размер. Сделав это, вы можете объявить наложение и назначить его новому экземпляру класса Google Maps GroundOverlay.

var imageBounds = {
    north: 35.8040,
    south: 35.5680,
    east: 139.9840,
    west: 139.5980
  };
var tokyoMetroOverlay = new google.maps.GroundOverlay();
};

Чтобы класс GroundOverlay работал, вам нужно передать 2 аргумента. Первый — это изображение, которое вы хотите использовать. Второй — это объект, содержащий параметры границ изображения, которые вы уже определили. Идите вперед и передайте их в качестве аргументов.

var tokyoMetroOverlay = new google.maps.GroundOverlay(
 'https://upload.wikimedia.org/wikipedia/commons/5/5b/Tokyo_metro_map_en_-_Tokyo_Metro_lines.png',
 imageBounds);

После этого последний шаг — разместить оверлей на карте с помощью tokyoMetroOverlay.setMap(map);. Ваш готовый код должен выглядеть так:

function initMap() {
  var tokyo = {lat: 35.6895, lng: 139.6917};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: tokyo
  });
var imageBounds = {
    north: 35.8040,
    south: 35.5680,
    east: 139.9840,
    west: 139.5980
  };
var tokyoMetroOverlay = new google.maps.GroundOverlay(
 'https://upload.wikimedia.org/wikipedia/commons/5/5b/Tokyo_metro_map_en_-_Tokyo_Metro_lines.png',
 imageBounds);
  tokyoMetroOverlay.setMap(map);
}

Если вы загрузите свой index.html, вы должны увидеть карту метро Токио, наложенную на Токио.

Есть много других вещей, которые вы можете сделать с помощью Google Maps API, но это должно помочь вам освоиться с основами. На сайте разработчиков Google есть много отличных руководств, поэтому, если вы хотите расширить свои знания помимо этой статьи, не стесняйтесь изучать их руководства. При этом ставьте лайк, если статья оказалась полезной, и спасибо за прочтение!

Как использовать API Карт Google

Основы

Найти себя

Накладки

Вопросы по теме