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

Что такое карты Google?

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

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

Google Maps предоставляет 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объект (он создается как литерал) и устанавливает значения для переменных инициализации карты. У карты есть три основных варианта, а именно:centre, zoom, и maptypeid.

centre- В этом свойстве мы должны указать место, где мы хотим центрировать карту. Чтобы передать локацию, мы должны создатьLatLng объект, передав конструктору широту и долготу требуемого местоположения.
zoom - В этом свойстве мы должны указать уровень масштабирования карты.
maptypeid- В этом свойстве мы должны указать тип карты, которую мы хотим. Ниже приведены типы карт, предоставляемых Google.
- ДОРОЖНАЯ КАРТА (обычная, 2D-карта по умолчанию)
- СПУТНИК (фотокарта)
- ГИБРИД (комбинация двух или более других типов)
- ТЕРРЕЙН (карта с горами, реками и т. Д.)

В функции, скажем, 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()">

пример

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

<!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>

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