Google지도-정보 창

마커, 폴리곤, 폴리 라인 및 기타 기하학적 모양 외에도지도에 정보 창을 그릴 수도 있습니다. 이 장에서는 정보 창을 사용하는 방법에 대해 설명합니다.

창 추가

정보 창은지도에 모든 종류의 정보를 추가하는 데 사용됩니다. 예를 들어지도상의 위치에 대한 정보를 제공하려는 경우 정보 창을 사용할 수 있습니다. 일반적으로 정보창은 마커에 연결됩니다. 인스턴스화하여 정보 창을 첨부 할 수 있습니다.google.maps.InfoWindow수업. 그것은 다음과 같은 속성을 가지고 있습니다-

Content −이 옵션을 사용하여 콘텐츠를 문자열 형식으로 전달할 수 있습니다.
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>

다음과 같은 출력이 생성됩니다.