Статьи

Пример файла Google Maps JSON

Октябрь 18, 2018

Эта серия статей была переписана в середине 2017 года с актуальной информацией и свежими примерами.

Google Maps — это онлайн-картографический сервис, запущенный Google в 2005 году. Он предлагает несколько услуг, которые включают планирование маршрута, спутниковые снимки, обновления трафика в реальном времени и многие другие. Лично я часто использую его, чтобы найти дорогу к месту встречи.

В секторе мобильных телефонов Google Карты стали одним из самых популярных приложений для смартфонов и были названы номером один в 2013 году согласно опросу, проведенному GlobalWebIndex . Он также имеет API, который позволяет разработчикам встраивать его в свои сайты.

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

Маркеры JSON Data: 

{
  "markers": [
    {
      "name": "Rixos The Palm Dubai",
      "position": [25.1212, 55.1535],
    },
    {
      "name": "Shangri-La Hotel",
      "location": [25.2084, 55.2719]
    },
    {
      "name": "Grand Hyatt",
      "location": [25.2285, 55.3273]
    }
  ]
}

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

Использование API-ключа : 

 <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=loadMap">
</script>

В этом примере мы получим доступ к API Карт Google без ключа. Ожидайте получить предупреждение (в консоли) об этом. Для простоты я покажу вам весь рабочий код в одном HTML-файле.

HTML + JavaScript : 

 <!DOCTYPE html>
<html>
  <head>
   <title>Dubai Hotels</title>
  </head>

  <body onload = "loadMap()">
    <h2>Dubai Hotels</h2>
    <div id = "map" style = "width:640px; height:480px;"></div>
      <script>

        // fake JSON call
        function getJSONMarkers() {
          const markers = [
            {
              name:  "Rixos The Palm",
              location: [25.1212, 55.1535]
            },
            {
              name: "Shangri-La Hotel",
              location: [25.2084, 55.2719]
            },
            {
              name: "Grand Hyatt",
              location: [25.2285, 55.3273]
            }
          ];
          return markers;
        }

        function loadMap() {
          // Initialize Google Maps
          const mapOptions = {
            center:new google.maps.LatLng(25.2048, 55.2708),
            zoom: 11
          }
          const map = new google.maps.Map(document.getElementById("map"), mapOptions);

          // Load JSON Data
          const hotelMarkers = getJSONMarkers();

          // Initialize Google Markers
          for(hotel of hotelMarkers) {
            let marker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(hotel.location[0], hotel.location[1]),
              title: hotel.name
            })
          }
        }
      </script>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
  </body>
</html>

Чтобы узнать больше о классах Google Map, которые использовались здесь, вы можете ознакомиться со справочными руководствами для следующего:

Если вы немного покопаетесь в документации, вы сможете узнать, как добавлять анимацию и пользовательские значки в маркеры карты Google. Чтобы узнать больше, ознакомьтесь с руководствами Работа с Geolocation & Google Maps API и Google Maps Made Easy с GMaps .

Вот другие примеры из этой серии:

54
Share: