Учебники

Карты Google — Краткое руководство

Сентябрь 3, 2018

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

Карты 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>

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

Карты Google — Типы

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

Типы карт

Карты Google предоставляют четыре типа карт. Они —

  • ДОРОЖНАЯ КАРТА — это тип по умолчанию. Если вы не выбрали ни один из типов, это будет отображено. Показывает вид улицы выбранного региона.

  • СПУТНИКОВЫЙ — это тип карты, который показывает спутниковые изображения выбранного региона.

  • HYBRID — этот тип карты показывает главные улицы на спутниковых изображениях.

  • TERRAIN — это тип карты, который показывает ландшафт и растительность

ДОРОЖНАЯ КАРТА — это тип по умолчанию. Если вы не выбрали ни один из типов, это будет отображено. Показывает вид улицы выбранного региона.

СПУТНИКОВЫЙ — это тип карты, который показывает спутниковые изображения выбранного региона.

HYBRID — этот тип карты показывает главные улицы на спутниковых изображениях.

TERRAIN — это тип карты, который показывает ландшафт и растительность

Синтаксис

Чтобы выбрать один из этих типов карт, вы должны указать соответствующий идентификатор типа карты в опциях карты, как показано ниже — 

var mapOptions = {
   mapTypeId:google.maps.MapTypeId. Id of the required map type
};

Дорожная карта

В следующем примере показано, как выбрать карту типа ROADMAP —

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:9,
               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>

Это даст следующий результат —

спутник

В следующем примере показано, как выбрать карту типа SATELLITE —

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:9,
                  mapTypeId:google.maps.MapTypeId. SATELLITE
            };
				
            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>

Это даст следующий результат —

Гибридный

В следующем примере показано, как выбрать карту типа HYBRID —

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:9,
               mapTypeId:google.maps.MapTypeId. Hybrid
            };
				
            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>

Это даст следующий результат —

местность

В следующем примере показано, как выбрать карту типа TERRAIN —

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:9,
               mapTypeId:google.maps.MapTypeId. TERRAIN
            };
				
            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>

Это даст следующий результат —

Google Maps — Увеличить

Увеличить / уменьшить значение масштабирования

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

Синтаксис

Мы можем увеличить или уменьшить значение масштабирования карты, используя параметр масштабирования. Ниже приведен синтаксис для изменения значения масштаба текущей карты. 

var mapOptions = {
   zoom:required zoom value
};

Пример: масштаб 6

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

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:6,
               mapTypeId:google.maps.MapTypeId. ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Это даст следующий результат —

Пример: масштаб 10

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

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:10,
               mapTypeId:google.maps.MapTypeId. ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Это даст следующий результат —

Google Maps — Локализация

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

Локализация карты

Вы можете настроить (локализовать) язык карты, указав опцию языка в URL, как показано ниже. 

<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>

пример

Вот пример, который показывает, как локализовать GoogleMaps. Здесь вы можете увидеть дорожную карту Китая, локализованную на китайский язык.

Live Demo 

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(32.870360, 101.645508),
               zoom:9, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Выход

Это даст следующий результат —

Карты Google — элементы управления пользовательским интерфейсом

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

Элементы управления по умолчанию

Вот список элементов управления по умолчанию, предоставляемых Google Maps —

  • Масштаб — Чтобы увеличить и уменьшить уровень масштабирования карты, у нас будет ползунок с кнопками + и — по умолчанию. Этот слайдер будет расположен в углу левой стороны карты.

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

  • Тип карты — Вы можете найти этот элемент управления в верхнем правом углу карты. Он предоставляет параметры типа карты, такие как Спутник, Дорожная карта и Ландшафт. Пользователи могут выбрать любую из этих карт.

  • Просмотр улиц — Между значком панорамирования и ползунком масштабирования есть значок pegman. Пользователи могут перетащить этот значок и разместить его в определенном месте, чтобы увидеть его улицу.

Масштаб — Чтобы увеличить и уменьшить уровень масштабирования карты, у нас будет ползунок с кнопками + и — по умолчанию. Этот слайдер будет расположен в углу левой стороны карты.

Панорамирование — чуть выше ползунка масштабирования будет элемент панорамирования для панорамирования карты.

Тип карты — Вы можете найти этот элемент управления в верхнем правом углу карты. Он предоставляет параметры типа карты, такие как Спутник, Дорожная карта и Ландшафт. Пользователи могут выбрать любую из этих карт.

Просмотр улиц — Между значком панорамирования и ползунком масштабирования есть значок pegman. Пользователи могут перетащить этот значок и разместить его в определенном месте, чтобы увидеть его улицу.

пример

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

Отключение элементов управления по умолчанию

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

пример

В следующем примере показано, как отключить стандартные элементы управления пользовательским интерфейсом, предоставляемые Google Maps.

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:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Это даст следующий результат —

Включение / отключение всех элементов управления

В дополнение к этим элементам управления по умолчанию Google Карты также предоставляют еще три элемента управления, перечисленных ниже.

  • Масштаб — Элемент управления Scale отображает элемент масштаба карты. Этот элемент управления не включен по умолчанию.

  • Поворот. Элемент управления «Поворот» содержит небольшой круглый значок, который позволяет вращать карты, содержащие наклонные изображения. Этот элемент управления по умолчанию отображается в верхнем левом углу карты. (См. 45 ° Снимки для получения дополнительной информации.)

  • Обзор. Для увеличения и уменьшения уровня масштабирования карты у нас есть ползунок с кнопками + и — по умолчанию. Этот слайдер расположен в левом углу карты.

Масштаб — Элемент управления Scale отображает элемент масштаба карты. Этот элемент управления не включен по умолчанию.

Поворот. Элемент управления «Поворот» содержит небольшой круглый значок, который позволяет вращать карты, содержащие наклонные изображения. Этот элемент управления по умолчанию отображается в верхнем левом углу карты. (См. 45 ° Снимки для получения дополнительной информации.)

Обзор. Для увеличения и уменьшения уровня масштабирования карты у нас есть ползунок с кнопками + и — по умолчанию. Этот слайдер расположен в левом углу карты.

В опциях карты мы можем включать и отключать любые элементы управления, предоставляемые Google Maps, как показано ниже — 

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

пример

Следующий код показывает, как включить все элементы управления —

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(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Это даст следующий результат —

Параметры управления

Мы можем изменить внешний вид элементов управления Google Maps, используя его параметры управления. Например, управление масштабированием может быть уменьшено или увеличено в размере. Внешний вид элемента управления MapType можно изменить на горизонтальную полосу или раскрывающееся меню. Ниже приведен список параметров элемента управления для элементов управления Zoom и MapType.

Sr.No. Контрольное имя Параметры управления
1 Управление масштабированием
  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT
2 Элемент управления MapType
  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU
  • google.maps.MapTypeControlStyle.DEFAULT

пример

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

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(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

Позиционирование управления

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

position:google.maps.ControlPosition. Desired_Position ,

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

  • TOP_CENTER
  • ВЕРХНИЙ ЛЕВЫЙ
  • В ПРАВОМ ВЕРХНЕМ УГЛУ
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • LEFT_BOTTOM
  • RIGHT_BOTTOM
  • BOTTOM_CENTER
  • НИЖНИЙ ЛЕВЫЙ
  • НИЖНИЙ ПРАВЫЙ

пример

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

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(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

Карты Google — Маркеры

Мы можем рисовать объекты на карте и привязывать их к желаемой широте и долготе. Это так называемые наложения. Карты Google предоставляют различные наложения, как показано ниже.

  • Маркеры
  • Ломаные
  • Полигоны
  • Круг и прямоугольник
  • Информационное окно
  • Символы

Чтобы отметить одно местоположение на карте, в Картах Google есть маркеры . Эти маркеры используют стандартный символ, и эти символы могут быть настроены. В этой главе объясняется, как добавлять маркеры, а также как настраивать, анимировать и удалять их.

Добавление простого маркера

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

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

пример

Следующий код устанавливает маркер на город Хайдарабад (Индия).

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(19.373341, 78.662109),
               zoom:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

Анимация маркера

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

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

пример

Следующий код устанавливает маркер города Хайдарабад с добавленным анимационным эффектом —

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.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

Настройка маркера

Вы можете использовать свои собственные значки вместо значка по умолчанию, предоставляемого Google Maps. Просто установите значок как значок: «ЗНАЧОК ПУТЬ» . И вы можете сделать этот значок перетаскиваемым, установив draggable: true .

пример

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

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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

Удаление маркера

Вы можете удалить существующий маркер, установив маркер в null, используя метод marker.setMap () .

пример

В следующем примере показано, как удалить маркер с карты.

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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

Карты Google — фигуры

В предыдущей главе мы узнали, как использовать маркеры в Google Maps. Наряду с маркерами мы также можем добавлять различные формы, такие как круги, многоугольники, прямоугольники, полилинии и т. Д. В этой главе объясняется, как использовать формы, предоставляемые Google Maps.

Ломаные

Полилинии, предоставляемые Google Maps, полезны для отслеживания различных путей. Вы можете добавить полилинии на карту, создав экземпляр класса google.maps.Polyline . При создании экземпляра этого класса мы должны указать обязательные значения свойств полилинии, таких как StrokeColor, StokeOpacity и strokeWeight.

Мы можем добавить полилинию к карте, передав ее объект методу setMap (MapObject) . Мы можем удалить ломаную линию, передав нулевое значение методу SetMap ().

пример

В следующем примере показана ломаная линия, обозначающая путь между городами Дели, Лондон, Нью-Йорк и Пекин.

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:3,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713) 
               ],
               
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });
            
            tourplan.setMap(map);
            //to remove plylines
            //tourplan.setmap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Это даст следующий результат —

Полигоны

Полигоны используются для выделения определенного географического района штата или страны. Вы можете создать нужный полигон, создав экземпляр класса google.maps.Polygon . При создании экземпляра мы должны указать требуемые значения для свойств Polygon, таких как path, strokeColor, strokeOapacity, fillColor, fillOapacity и т. Д.

пример

В следующем примере показано, как нарисовать многоугольник, чтобы выделить города Хайдарабад, Нагпур и Аурангабад.

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:4,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myTrip = [
               new google.maps.LatLng(17.385044, 78.486671),
               new google.maps.LatLng(19.696888, 75.322451), 
               new google.maps.LatLng(21.056296, 79.057803), 
               new google.maps.LatLng(17.385044, 78.486671)
            ];
            
            var flightPath = new google.maps.Polygon({
               path:myTrip,
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });
            
            flightPath.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Это даст следующий результат —

Прямоугольники

Мы можем использовать прямоугольники, чтобы выделить географическую область определенного региона или штата, используя прямоугольное поле. Мы можем создать прямоугольник на карте, создав экземпляр класса google.maps.Rectangle . При создании экземпляра мы должны указать требуемые значения для свойств прямоугольника, таких как path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds и т. Д.

пример

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

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,
               
               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,
               
               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )
					
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

Это дает вам следующий вывод —

круги

Так же, как прямоугольники, мы можем использовать Круги, чтобы выделить географическую область определенного региона или штата, используя круг, создав экземпляр класса google.maps.Circle . При создании экземпляра мы должны указать требуемые значения для свойств круга, таких как path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius и т. Д.

пример

В следующем примере показано, как выделить область вокруг Нью-Дели с помощью круга.

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
         
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,
            
               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,
            
               fillColor:"#B40404",
               fillOpacity:0.6
            });
				
            myCity.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Это даст следующий результат —

Google Maps — информационное окно

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

Добавление окна

Информационное окно используется для добавления любой информации на карту. Например, если вы хотите предоставить информацию о местоположении на карте, вы можете использовать информационное окно. Обычно информационное окно прикрепляется к маркеру. Вы можете прикрепить информационное окно, создав экземпляр класса google.maps.InfoWindow . Он имеет следующие свойства —

  • Контент — Вы можете передать свой контент в формате String, используя эту опцию.

  • position — с помощью этой опции вы можете выбрать позицию информационного окна.

  • maxWidth — по умолчанию ширина информационного окна будет растянута до переноса текста. Указав maxWidth, мы можем ограничить размер информационного окна по горизонтали.

Контент — Вы можете передать свой контент в формате String, используя эту опцию.

position — с помощью этой опции вы можете выбрать позицию информационного окна.

maxWidth — по умолчанию ширина информационного окна будет растянута до переноса текста. Указав maxWidth, мы можем ограничить размер информационного окна по горизонтали.

пример

В следующем примере показано, как установить маркер и указать информационное окно над ним —

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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Это даст следующий результат —

Карты Google — символы

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

Добавление символа

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

  • Круг — google.maps.SymbolPath.CIRCLE

  • Стрелка, указывающая назад (закрыта) — google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

  • Стрелка вперед (закрыта) — google.maps.SymbolPath.FORWARD_CLOSED_ARROW

  • Стрелка «вперед» (открытая) — google.maps.SymbolPath.CIRCLE

  • Стрелка, указывающая назад (открытая) — google.maps.SymbolPath.CIRCLE

Круг — google.maps.SymbolPath.CIRCLE

Стрелка, указывающая назад (закрыта) — google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

Стрелка вперед (закрыта) — google.maps.SymbolPath.FORWARD_CLOSED_ARROW

Стрелка «вперед» (открытая) — google.maps.SymbolPath.CIRCLE

Стрелка, указывающая назад (открытая) — google.maps.SymbolPath.CIRCLE

Эти символы имеют следующие свойства — path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity и strokeWeight.

пример

В следующем примере показано, как рисовать предопределенные символы на карте Google.

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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
					
               draggable:true,
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

Анимация символа

Как и маркеры, вы можете добавлять анимацию, такую ​​как отскок и падение, к символам.

пример

В следующем примере показано, как использовать символ в качестве маркера на карте и добавить к нему анимацию.

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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
               
               animation:google.maps.Animation.DROP,
               draggable:true,
               map: map
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

Google Maps — События

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

Добавление прослушивателя событий

Вы можете добавить прослушиватель событий, используя метод addListener () . Он принимает такие параметры, как имя объекта, к которому мы хотим добавить прослушиватель, имя события и событие обработчика.

пример

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

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });
            
            marker.setMap(map);
            
            //Zoom to 7 when clicked on marker
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

Открытие информационного окна по клику

Следующий код открывает информационное окно при нажатии на маркер —

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

Удаление слушателя

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

пример

Следующий код показывает, как удалить слушателя —

Live Demo 

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
				
            google.maps.event.removeListener(myListener);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

38
Share: