Google Maps Info Windows se utiliza para agregar una ventana para mostrar la información del área específica. Por lo general, la ventana de información se adjunta a un marcador. Puede adjuntar una ventana de información instanciando la clase google.maps.InfoWindow.
Sintaxis:
var infowindow = new google.maps.InfoWindow({content: "Content String"});
infowindow.open(map, marker);
Valores de propiedad:
- Contenido: se utiliza para pasar contenido en formato de string.
- Desplazamiento de píxeles:
- posición: Se utiliza para elegir la posición de la ventana de información.
- maxWidth: Para restringir el tamaño de la ventana de información horizontalmente. De forma predeterminada, el ancho de la ventana de información se estirará hasta que el texto se ajuste.
Ejemplo:
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA