Учебники

Карты Google — Начало работы

Сентябрь 3, 2018

Карты Google — это бесплатный сервис картографирования в Интернете, который предоставляет различные типы географической информации. Используя Google Maps, можно.

  • Поиск мест или проложить маршрут от одного места к другому.

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

  • Получить конкретную информацию, такую ​​как трафик в конкретный момент.

Поиск мест или проложить маршрут от одного места к другому.

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

Получить конкретную информацию, такую ​​как трафик в конкретный момент.

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

Действия по загрузке карты на веб-страницу

Следуйте приведенным ниже инструкциям, чтобы загрузить карту на свою веб-страницу —

Шаг 1. Создайте HTML-страницу

Создайте базовую HTML-страницу с тегами head и body, как показано ниже — 

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Шаг 2. Загрузите API

Загрузите или включите API Карт Google, используя тег скрипта, как показано ниже — 

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Шаг 3: Создайте контейнер

Чтобы держать карту, мы должны создать элемент контейнера, обычно для этой цели используется тег <div> (универсальный контейнер). Создайте элемент контейнера и определите его размеры, как показано ниже — 

<div id = "sample" style = "width:900px; height:580px;"></div>

Шаг 4: Параметры карты

Перед инициализацией карты мы должны создать объект mapOptions (он создается как литерал) и установить значения для переменных инициализации карты. Карта имеет три основных параметра, а именно: центр , масштаб и тип карты .

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

  • zoom — в этом свойстве мы должны указать уровень масштабирования карты.

  • maptypeid — в этом свойстве мы должны указать тип карты, которую мы хотим. Ниже приведены типы карт, предоставляемые Google —

    • ДОРОЖНАЯ КАРТА (нормальная, 2D-карта по умолчанию)
    • СПУТНИК (фотографическая карта)
    • ГИБРИД (комбинация двух или более других типов)
    • ТЕРРЕЙН (карта с горами, реками и т. Д.)

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

zoom — в этом свойстве мы должны указать уровень масштабирования карты.

maptypeid — в этом свойстве мы должны указать тип карты, которую мы хотим. Ниже приведены типы карт, предоставляемые Google —

В функции, скажем, loadMap () , создайте объект mapOptions и установите необходимые значения для center, zoom и mapTypeId, как показано ниже. 

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

Шаг 5: Создайте объект карты

Вы можете создать карту, создав экземпляр класса JavaScript с именем Map . При создании экземпляра этого класса вы должны передать HTML-контейнер для хранения карты и параметров карты для требуемой карты. Создайте объект карты, как показано ниже. 

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

Шаг 6: загрузите карту

Наконец, загрузите карту, вызвав метод loadMap () или добавив прослушиватель DOM. 

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

пример

В следующем примере показано, как загрузить дорожную карту города с именем Vishakhapatnam со значением увеличения 12.

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Он производит следующий вывод —

41
Share: