Google Maps Info Windows
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= </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: }); 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> |
Output:
Please Login to comment...