Google Maps con múltiples marcadores y ventana de información mediante la API V3. Programación en Castellano.
Google Maps con múltiples marcadores y ventana de información mediante la API V3
Google Maps es la mejor manera y la más sencilla de mostrar una ubicación en una página web. Utilizamos los marcadores para identificar una localización en Google Maps, y la ventana de información para mostrar contenido encima del propio mapa. Con un marcador y una ventana de información, podrás marcar una ubicación de manera eficiente. También, ayuda al usuario a encontrar y conocer más acerca de una localización con más precisión.
En este tutorial te mostraremos cómo añadir un marcador y una ventana de información en un mapa de Google Maps. Este script te permitirá un marcador y una ventana de información en Google Maps.
La característica de marcadores múltiples es muy útil para mostrar distintas localizaciones sobre un mapa de Google. Utilizando la API de Javascript de Google Maps puedes añadir facilmente un mapa con distintos marcadores y ventanas de información. En este script de ejemplo mostraremos varios marcadores en el mapa y cada uno, haciendo clic, mostrará una ventana de información.
Todas las solicitudes a la API de Javascript de Google Maps deberán incluir el parámetro key. Así que, antes de empezar, tendrás que crear una clave para la API de Google Maps en Google Developer Console.
Incluye la API de Google Maps y proporciónale tu API key en el parámetro key.
&lt;script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY"&gt;&lt;/script&gt;
Coloca el siguiente código Javascript en la página web, especifica múltiples localizaciones en la variable markers y el contenido de la ventana de información en la variable infoWindowContent.
// Display a map on the web page
map.setTilt(50);
// Multiple markers location, latitude, and longitude
['Brooklyn Museum, NY', 40.671531, -73.963588],
['Brooklyn Public Library, NY', 40.672587, -73.968146],
['Prospect Park Zoo, NY', 40.665588, -73.965336]
['&lt;div class="info_content"&gt;' +
'&lt;h3&gt;Brooklyn Museum&lt;/h3&gt;' +
'&lt;p&gt;The Brooklyn Museum is an art museum located in the New York City borough of Brooklyn.&lt;/p&gt;' + '&lt;/div&gt;'],
'&lt;h3&gt;Brooklyn Public Library&lt;/h3&gt;' +
'&lt;p&gt;The Brooklyn Public Library (BPL) is the public library system of the borough of Brooklyn, in New York City.&lt;/p&gt;' +
'&lt;/div&gt;'],
'&lt;h3&gt;Prospect Park Zoo&lt;/h3&gt;' +
'&lt;p&gt;The Prospect Park Zoo is a 12-acre (4.9 ha) zoo located off Flatbush Avenue on the eastern side of Prospect Park, Brooklyn, New York City.&lt;/p&gt;' +
'&lt;/div&gt;']
// Add multiple markers to map
// Place each marker on the map
for( i = 0; i &lt; markers.length; i++ ) {
// Add info window to marker
// Center the map to fit all markers on the screen
// Set zoom level
this.setZoom(14);
// Load initialize function
Define un área en la página web para mostrar el mapa de Google. También, especifica un id al elemento div que sea el que contenga el propio mapa.
Añade el siguiente código CSS para definir el ancho y alto de tu mapa.
ARTÍCULO ANTERIOR	Caja de texto con función autocompletar y varios valores utilizando jQuery, PHP y MySQL
Cómo crear un Toggle Switch utilizando CSS