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:
Article Tags :
Recommended Articles