Google Maps Info Windows

Last Updated : 18 Aug, 2020

Google Maps Info Windows is used to add a window to display the information of the specific area. Usually, the info window is attached to a marker. You can attach an info window by instantiating the google.maps.InfoWindow class.

Syntax:

var infowindow = new google.maps.InfoWindow({content: "Content String"});
                 infowindow.open(map, marker);

Property Values:

Content: Used to pass content in String format.
pixelOffset: It contains an offset from the tip of the info window to the location on which the info window is anchored, it is optional.
position: Used to choose the position of the info window.
maxWidth: To restrict the size of the info window horizontally. By default, the info window’s width will be stretched till the text is wrapped.

Example:

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Loading map API -->
        <script src= 
"https://maps.googleapis.com/maps/api/js"> 
        </script> 
  
        <script> 
            function GFG() { 
                var CustomOp = { 
                    center: new google.maps.LatLng(28.502212, 77.405603), 
                    zoom: 17, 
                }; 
  
                // Map object 
                var map = new google.maps 
                .Map(document.getElementById("DivID"), CustomOp); 
                var marker = new google.maps.Marker({ 
                    position: new google.maps.LatLng(28.502211, 77.405512), 
                    map: map, 
                    draggable: true, 
                    icon:  
"https://media.geeksforgeeks.org/wp-content/uploads/20200811003251/logo-100x100.png", 
                }); 
  
                marker.setMap(map); 
  
                var infowindow = new google.maps.InfoWindow({ 
                    content: "5th Floor, A-118,Sector-136,"+ 
                             " Noida, Uttar Pradesh - 201305", 
                }); 
                infowindow.open(map, marker); 
            } 
        </script> 
    </head> 
    
    <!-- load map -->
    <body onload="GFG()"> 
        <center> 
            <h1 style="color: green;">GeeksforGeeks</h1> 
            <h3>Google Maps Info Windows</h3> 
            
            <!-- Basic Container -->
            <div id="DivID" 
                 style="width: 400px; height: 300px;"></div> 
        </center> 
    </body> 
</html>