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.

<script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY"></script>

Código Javascript

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.

<script>
function initMap() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
                    
    // Display a map on the web page
    map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
    map.setTilt(50);
        
    // Multiple markers location, latitude, and longitude
    var markers = [
        ['Brooklyn Museum, NY', 40.671531, -73.963588],
        ['Brooklyn Public Library, NY', 40.672587, -73.968146],
        ['Prospect Park Zoo, NY', 40.665588, -73.965336]
    ];
                        
    // Info window content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>Brooklyn Museum</h3>' +
        '<p>The Brooklyn Museum is an art museum located in the New York City borough of Brooklyn.</p>' + '</div>'],
        ['<div class="info_content">' +
        '<h3>Brooklyn Public Library</h3>' +
        '<p>The Brooklyn Public Library (BPL) is the public library system of the borough of Brooklyn, in New York City.</p>' +
        '</div>'],
        ['<div class="info_content">' +
        '<h3>Prospect Park Zoo</h3>' +
        '<p>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.</p>' +
        '</div>']
    ];
        
    // Add multiple markers to map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    
    // Place each marker on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });
        
        // Add info window to marker    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Center the map to fit all markers on the screen
        map.fitBounds(bounds);
    }

    // Set zoom level
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });
    
}
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);
</script>

Código HTML

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.

<div id="mapCanvas"></div>

Código CSS

Añade el siguiente código CSS para definir el ancho y alto de tu mapa.

#mapCanvas {
    width: 100%;
    height: 100%;
}

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP