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

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

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

Типы карт

Google Maps предоставляет четыре типа карт. Они -

  • ROADMAP- Это тип по умолчанию. Если вы не выбрали ни один из типов, он будет отображаться. Он показывает вид улиц выбранного региона.

  • SATELLITE - Это тип карты, на которой отображаются спутниковые снимки выбранного региона.

  • HYBRID - Этот тип карты показывает основные улицы на спутниковых снимках.

  • TERRAIN - Это тип карты, который показывает местность и растительность.

Синтаксис

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

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

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

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

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

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

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

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

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

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

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

Синтаксис

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

var mapOptions = {
   zoom:required zoom value
};

Пример: Zoom 6

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

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

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

Пример: Zoom 10

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

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

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

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

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

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

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

пример

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

<!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 Maps предоставляет пользовательский интерфейс с различными элементами управления, позволяющими пользователю взаимодействовать с картой. Мы можем добавлять, настраивать и отключать эти элементы управления.

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

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

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

  • Pan - Чуть выше ползунка масштабирования находится элемент управления панорамированием карты.

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

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

пример

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

Отключение элементов управления пользовательского интерфейса по умолчанию

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

пример

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

<!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- Элемент управления «Масштаб» отображает элемент масштаба карты. Этот элемент управления по умолчанию отключен.

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

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

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

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

пример

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

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

пример

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

<!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
  • TOP_LEFT
  • TOP_RIGHT
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • LEFT_BOTTOM
  • RIGHT_BOTTOM
  • BOTTOM_CENTER
  • BOTTOM_LEFT
  • BOTTOM_RIGHT

пример

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

<!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 предоставляют различные наложения, как показано ниже.

  • Markers
  • Polylines
  • Polygons
  • Круг и прямоугольник
  • Информационное окно
  • Symbols

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

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

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

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

пример

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

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

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

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

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

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

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

пример

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

<!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. Просто установите значок какicon:'ICON PATH'. И вы можете сделать этот значок перетаскиваемым, установивdraggable:true.

пример

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

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

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

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

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

пример

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

<!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 Maps. Наряду с маркерами мы также можем добавлять различные формы, такие как круги, многоугольники, прямоугольники, полилинии и т. Д. В этой главе объясняется, как использовать формы, предоставляемые Google Maps.

Полилинии

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

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

пример

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

<!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 и т. Д.

пример

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

<!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 и т. Д.

пример

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

<!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 и т. Д.

пример

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

<!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.InfoWindowкласс. Он имеет следующие свойства -

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

  • position - Вы можете выбрать положение информационного окна, используя эту опцию.

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

пример

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

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

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

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

  • Circle - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

  • Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW

  • Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

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

пример

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

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

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

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

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

пример

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

<!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 JavaScript может реагировать на различные события, генерируемые пользователем. В этой главе представлены примеры, демонстрирующие, как выполнять обработку событий при работе с Google Maps.

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

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

пример

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

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

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

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

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

<!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(). Этот метод принимает объект слушателя, поэтому мы должны назначить слушателя переменной и передать его этому методу.

пример

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

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

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

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved