Учебники

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

Сентябрь 3, 2018

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

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

Информационное окно используется для добавления любой информации на карту. Например, если вы хотите предоставить информацию о местоположении на карте, вы можете использовать информационное окно. Обычно информационное окно прикрепляется к маркеру. Вы можете прикрепить информационное окно, создав экземпляр класса 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>

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

47
Share: