Все готово!

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

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

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

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

Слой Fusion Tables (экспериментальный)

  1. Обзор
  2. Ограничения
  3. Настройка Fusion Table
  4. Создание слоя FusionTables
  5. Запросы Fusion Table
  6. Стили Fusion Table
  7. Карты интенсивности Fusion Table

Примечание. Слой Fusion Tables является экспериментальным.

Слой Fusion Tables выполняет прорисовку данных, содержащихся в таблицах Google Fusion Tables.

Обзор

Google Maps JavaScript API позволяет прорисовывать данные, содержащиеся в таблицах Google Fusion Tables, в виде слоя на карте. Для этого используется объект FusionTablesLayer. Таблица Google Fusion Table представляет собой таблицу базы данных, каждая строка которой содержит данные об определенном элементе. Для географических данных каждая строка в таблице Google Fusion Table также содержит данные о расположении (позиционировании элемента). Объект FusionTablesLayer обеспечивает интерфейс для взаимодействия с таблицами Fusion Tables и поддерживает автоматическую прорисовку данных о местоположении. Он также предоставляет интерактивные наложения, в которых отображаются дополнительные данные об элементе.

Ниже приведен пример таблицы Fusion Table, содержащей географические данные:

Ограничения

Google Maps JavaScript API можно использовать для добавления на карту до пяти слоев Fusion Tables, для одного из которых может применяться до пяти правил стилей.

Кроме того:

  • Только первые 100 000 строк данных в таблице привязываются к карте или включаются в результаты запроса.
  • Запросы с пространственными предикатами возвращают данные только из первых 100 000 строк. Поэтому если вы примените фильтр к очень большой таблице, и если его условиям будут удовлетворять строки, идущие после первых 100 000 строк, эти строки не будут отображены.
  • При импорте и вставке данных важно помнить следующее.
    • Общий размер данных, отправляемых в одном вызове API, не может превышать 1 МБ.
    • Ячейка данных Fusion Tables поддерживает до 1 миллиона символов. Для упрощения иногда может потребоваться уменьшить точность координат или упростить описания многоугольников или линий.
    • Максимальное поддерживаемое количество вершин на таблицу – 5 миллионов.
  • При просмотре карты можно заметить следующее.
    • Отображаются десять наиболее крупных компонентов различной геометрии.
    • При уменьшении масштаба для таблиц с более чем 500 элементами будут отображаться точки (а не линии или многоугольники).

Настройка Fusion Table

Fusion Tables обеспечивают встроенную поддержку географических данных. Подробнее см. на странице о Fusion Tables. Чтобы API отображал данные слоя Fusion Tables на карте Google, таблица должна удовлетворять следующим критериям.

  • Таблица должна находиться в общем доступе как Public или Unlisted.
  • Таблица должна иметь один или несколько столбцов указания местоположения (Location). В веб-интерфейсе Fusion Tables выберите Edit > Modify Columns и выделите желаемые столбцы.

Столбец Location должен соответствовать приведенным ниже требованиям к форматированию.

  • Координаты широты и долготы можно вводить в один столбец через запятую (широта,долгота) или разделять на два столбца (один столбец для широты, один для долготы). Дополнительную информацию можно найти в документации по Fusion Tables.
  • Адреса требуют предварительного геокодирования. В веб-интерфейсе Fusion Tables выберите File > Geocode.
  • Поддерживаются геометрические данные KML, например, точки, линии и многоугольники.

Создание слоя FusionTables

Конструктор FusionTablesLayer создает слой из общедоступной таблицы Fusion Table, используя шифрованный идентификатор таблицы, который можно найти, выбрав File > About в пользовательском интерфейсе Fusion Tables.

Чтобы добавить слой Fusion Tables на карту, нужно создать слой и передать ему объект query со следующими параметрами.

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

Затем нужно установить карту слоя для объекта Map, как и для любого другого наложения.

Примечание. Более ранние версии Google Maps JavaScript API ссылались на таблицу Fusion Table по её числовому идентификатору. И хотя этот метод продолжает работать, рекомендуется использовать зашифрованный идентификатор.

В следующем примере приведены данные по убийствам в Чикаго в 2009 году на основе общедоступной таблицы Fusion Table:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

Просмотр примера таблицы Fusion Table

Запросы Fusion Table

Fusion Tables позволяют использовать сложные запросы, ограничивающие набор результатов определенными критериями. Запросы задаются с помощью параметра FusionTablesLayerOptions query:

query: {
  select: locationColumn,
  from: fusionTableID,
  where: constraintClause
}

где locationColumn – существующий геокодированный столбец типа Location. Необходимо заключать в кавычки названия столбцов в полях select или where, если эти названия содержат пробелы или зарезервированные слова, или если они не начинаются с буквы.

Поддерживаемые операторы поиска перечислены в документации по Fusion Tables.

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

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}

Просмотр примера таблицы Fusion Table

Стили Fusion Table

Конструктор слоев Fusion Tables также принимает параметр FusionTablesLayerOptions styles, с помощью которого можно устанавливать цвет, толщину и прозрачность линий и многоугольников. Также с его помощью можно указывать значки маркеров из числа поддерживаемых маркеров карты и названий значков.

Примечание. Стили можно применять только к одному слою Fusion Tables на каждой карте. К этому слою можно применять до пяти стилей.

Параметр styles имеет следующий синтаксис:

styles: [{
  where: 'column_name condition',
  markerOptions: {
    iconName: "supported_icon_name"
  },
  polygonOptions: {
    fillColor: "#rrggbb",
    strokeColor: "#rrggbb",
    strokeWeight: "int"
  },
  polylineOptions: {
    strokeColor: "#rrggbb",
    strokeWeight: "int"  }
}, {
  where: ...
  ...
}]

Стили, задаваемые этим параметром, применяются поверх любых других стилей, указанных в веб-интерфейсе Fusion Tables. Стили, передаваемые в конструктор стилей, применяются в том порядке, в котором они перечислены. Для любых элементов, удовлетворяющих условиям нескольких правил, применяется последний соответствующий им стиль.

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

styles: [{
  markerOptions: {
    iconName: "large_green"
  }
}]

В следующем примере показано:

  • Стиль по умолчанию, окрашивающий все многоугольники в зеленый цвет с уровнем непрозрачности 0,3.
  • Все многоугольники, в которых значение столбца birds превышает 300, окрашиваются в синий цвет. Для них сохраняется уровень непрозрачности, установленный в стиле по умолчанию.
  • Для всех многоугольников, в которых значение столбца population превышает 5, устанавливается уровень непрозрачности 1,0. Они сохраняют значение переменной fillColor.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}

Просмотр примера таблицы Fusion Table

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

Слои Fusion Tables также предоставляют ограниченную поддержку карт интенсивности, в которых уровень плотности соответствующих местоположений обозначается с помощью палитры цветов. В текущих картах интенсивности используется цветовая гамма от красного (высокая плотность) до зеленого (низкая плотность) для отображения относительного уровня распространенности связанных мест. Карты интенсивности можно включить, установив для параметра слоя FusionTablesLayerOptions heatmap значение enabled: true.

Примечание. Прорисовка карт интенсивности Fusion Table выполняется на стороне сервера. Если вы предпочитаете карты интенсивности на стороне клиента, используйте слой карт интенсивности.

В следующем примере на карте интенсивности показана история данных о землетрясениях:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}

Просмотр примера таблицы Fusion Table

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

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