Все готово!

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

Активация Google Maps JavaScript API

Чтобы помочь вам освоиться, мы покажем, как выполнить некоторые необходимые действия в консоли разработчика Google:

  1. Создание или выбор проекта
  2. Активация Google Maps JavaScript API и связанных служб
  3. Создание соответствующих ключей

Прорисовка данных: нанесение на карту землетрясений

Обзор

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

В первых 2-х рамках выше (слева направо) представлены карты с простыми маркерами и кругами разного размера. В третьей рамке отображена карта интенсивности.

Импорт данных

В этом руководства используются данные о землетрясениях в режиме реального времени, полученные от Геологической службы США (USGS). На веб-сайте службы USGS данные представлены в нескольких форматах, которые вы можете скопировать в свой домен, чтобы обеспечить своему приложению локальный доступ к ним. В этом руководстве JSONP запрашивается напрямую с серверов службы USGS путем добавления тега script в заголовок документа.

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

// Create a script tag and set the USGS URL as the source.
        var script = document.createElement('script');

        script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
        document.getElementsByTagName('head')[0].appendChild(script);

Размещение простых маркеров

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

Ниже приведен полный программный код, необходимый для создания карты в данном руководстве.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(2.8,-187.3),
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');
  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });
  }
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Попробуйте сделать это сами

Наведите указатель мыши на верхнюю правую часть блока кода, чтобы скопировать код или открыть его в JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      // Loop through the results array and place a marker for each
      // set of coordinates.
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1],coords[0]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Использование фигур и карт интенсивности для настройки карт

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

Здесь описано несколько вариантов настройки простого маркера.

  • С помощью размера кругов:
    Вы можете добавить круги (или любые другие фигуры), размер которых соответствует магнитуде землетрясения, используя символы. Таким образом, на карте сильные землетрясения будут представлены в виде самых больших кругов.

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

Размер круга

На карте ниже представлены маркеры в виде кругов. Круги большего размера обозначают большую магнитуду землетрясения в этом конкретном местоположении.

Ниже приведен полный программный код, необходимый для создания карты с маркерами, настроенными в виде кругов.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: -33.865427, lng: 151.196123},
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);

  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });
}

function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / 2,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

function eqfeed_callback(results) {
  map.data.addGeoJson(results);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Попробуйте сделать это сами

Наведите указатель мыши на верхнюю правую часть блока кода, чтобы скопировать код или открыть его в JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: {lat: -33.865427, lng: 151.196123},
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');

        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);

        map.data.setStyle(function(feature) {
          var magnitude = feature.getProperty('mag');
          return {
            icon: getCircle(magnitude)
          };
        });
      }

      function getCircle(magnitude) {
        return {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: 'red',
          fillOpacity: .2,
          scale: Math.pow(2, magnitude) / 2,
          strokeColor: 'white',
          strokeWeight: .5
        };
      }

      function eqfeed_callback(results) {
        map.data.addGeoJson(results);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Понимание кода

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

Код и его описание
  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });

Добавляет стиль к слою данных, который вызывает функцию getCircle().
Создает собственное изображение для точки вместо используемого по умолчанию красного маркера.
function getCircle(magnitude) {
      var circle = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: magnitude
      };
      return circle;
    }

Свойство magnitude для землетрясения передается в эту функцию.
getCircle() создает круг, размер которого определяется значением магнитуды, и отправляет этот круг обратно для его использования в качестве настраиваемого маркера землетрясения.

Карты интенсивности

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

Ниже приведен полный программный код, необходимый для создания карты.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: -33.865427, lng: 151.196123},
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);

}

function eqfeed_callback(results) {
  var heatmapData = [];
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1], coords[0]);
    heatmapData.push(latLng);
  }
  var heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    dissipating: false,
    map: map
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap" async defer></script>

Попробуйте сделать это сами

Наведите указатель мыши на верхнюю правую часть блока кода, чтобы скопировать код или открыть его в JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: {lat: -33.865427, lng: 151.196123},
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');

        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);

      }

      function eqfeed_callback(results) {
        var heatmapData = [];
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1], coords[0]);
          heatmapData.push(latLng);
        }
        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatmapData,
          dissipating: false,
          map: map
        });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
    </script>
  </body>
</html>

Понимание кода

В таблице ниже объясняется код, который позволяет создавать карту интенсивности.

Код и его описание
<script
async defer
src="https://maps.googleapis.com/maps/api/js?key
=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>

Библиотека visualization используется для отображения карты интенсивности.
Она включает в себя класс HeatmapLayer.
При использовании библиотеки она должна загружаться во время вызова Maps API JavaScript.
  function eqfeed_callback(results) {
    var heatmapData = [];
    for (var i = 0; i &lt; results.features.length; i++) {
      var coords = results.features[i].geometry.coordinates;
      var latLng = new google.maps.LatLng(coords[1], coords[0]);
      heatmapData.push(latLng);
    }
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      dissipating: false,
      map: map
    });
  }

Как и в предыдущих примерах, данные службы USGS передаются в функцию eqfeed_callback.
Это добавляет координаты каждого землетрясения в массив heatmapData.
Затем этот массив передается в конструктор HeatmapLayer, который создает карту интенсивности и отображает ее на карте.

  function eqfeed_callback(results) {
    var heatmapData = [];
    for (var i = 0; i &lt; results.features.length; i++) {
      var coords = results.features[i].geometry.coordinates;
      var latLng = new google.maps.LatLng(coords[1], coords[0]);
      var magnitude = results.features[i].properties.mag;
      var weightedLoc = {
        location: latLng,
        weight: Math.pow(2, magnitude)
      };
      heatmapData.push(weightedLoc);
    }
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      dissipating: false,
      map: map
    });
  }

Чтобы применить взвешивание к результатам в зависимости от магнитуды, вместо этого вы можете передать объекты WeightedLocation в массив heatmapData.

Дополнительная информация

См. дополнительную информацию по следующим темам:

Оставить отзыв о...

Текущей странице
Google Maps JavaScript API
Google Maps JavaScript API
Нужна помощь? Обратитесь в службу поддержки.