Cómo cambiar la Ventana de Información en el API de Google Maps

Escrito por veronica summers | Traducido por lucas huidobro
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo cambiar la Ventana de Información en el API de Google Maps
Por defecto, las ventanas de información son similares a los globos de diálogo con el tallo del globo sobresaliendo del marcado de ubicación. (Photodisc/Photodisc/Getty Images)

Una ventana de información es la pequeña burbuja flotante emergente que aparece cuando haces clic en un pulsador de pin llamado marcador de ubicación en un Google Map. Por defecto, las ventanas de información son similares a los globos de diálogo con el tallo del globo sobresaliendo del marcado de ubicación. Al usar el objeto "opciones de la Ventana de Información" del JavaScript API de Google Maps, puedes cambiar la ubicación de la ventana de información, el texto mostrado en esa ventana y el ancho máximo de la ventana.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Accede a tu archivo HTML y navega en el código a donde defines tu Google Map.

  2. 2

    Cambia el contenido de la ventana de información al modificar el texto en la variable al sostener el contenido de texto de la ventana. Encuentra el nombre de la variable en el atributo del contenido de la ventana información. En el siguiente ejemplo de código, "windowText" es la variable que define el texto de la ventana.

    var info window = new google.maps.InfoWindow({ content: windowText });

    Encuentra la variable windowText y cambia el texto HTML. Por ejemplo, tu código puede verse similar a esto:

    var windowText = '<div id = "text" + <p>París es la capital de Francia. París es conocida como la Ciudad de las Luces.</p>

    En este caso, edita el texto HTML entre las etiquetas de párrafo <p> para cambiar el contenido de la ventana de información.

  3. 3

    Define el ancho máximo de la ventana de información al colocar el atributo "maxWidth" en el objeto "opciones de Ventana de Información". Añadiendo al código de ejemplo de arriba, el ancho máximo de la ventana de información se coloca a 400 píxeles de ancho.

    var info window = new google.maps.InfoWindow({ content: windowText maxWidth = 400 });

  4. 4

    Cambia la posición de la ventana de información de la ubicación de marcador por defecto a una nueva ubicación usando la función "infowindow.setPosition". En el código JavaScript donde iniciaste el mapa, añade la función "infowindow.setPosition". En el ejemplo debajo, la Ventana de información abrirá en la latitud 52.11111 y en la longitud -100.1111.

    infowindow.setPosition (52.1111, -100.1111);

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles