JavaScript Google Maps mostrar Markers con click

Como mostrar Markers en un mapa de Google Maps on click.

Hola.

Estoy colocando un mapa de Google en una sección de mi aplicación web. Estoy usando la API de Google Maps para mostrar todas las ubicaciones al usuario en un solo mapa.

La idea es crear un arreglo en javascript con todas las ubicaciones en latitud y longitud y crear markers para visualizarlos en el mapa de google.

Google Maps ofrece la oportunidad de crear Markers con JavaScript.

Mi arreglo se ve así y se encuentra en un archivo externo con extension js:

var marcadores = [[1,'Descripcion del marcador 1',-16.494213, -68.136466,2629],
[2,'Descripcion del marcador 2',-16.653139, -68.301835,3354],
[3,'Descripcion del marcador 3',-19.036393, -65.255528,2630],
[4,'Descripcion del marcador 4',-21.427691, -64.754212,2631]]

El orden del arreglo es [id, descripción, latitud, longitud, zindex]

La inclusion del mapa se ve así con un div con id definido para después asociarle un objeto Mapa de Google Maps con la función initMap :

<div id="map" class="mapa-ubicacion"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx&callback=initMap"></script>  

Lo siguiente es definir los marcadores y relacionarlos con el mapa con Javascript. También defino la función que mueve el mapa cuando se hace click. Esto lo hago de la siguiente manera.

<script>

        var markers = [];

        function initMap() {            

            var mapDiv = document.getElementById('map');

            var map = new google.maps.Map(mapDiv, {

                zoom: 16,

                center: { lat: -16.497789, lng: -68.125839 }

            });

            setMarkers(map);

            infoWindow = new google.maps.InfoWindow;

            // Try HTML5 geolocation.

            if (navigator.geolocation) {

                navigator.geolocation.getCurrentPosition(function (position) {

                    var pos = {

                        lat: position.coords.latitude,

                        lng: position.coords.longitude

                    };

                    infoWindow.setPosition(pos);

                    infoWindow.setContent('Lugar encontrado.');

                    infoWindow.open(map);

                    map.setCenter(pos);

                }, function () {

                    handleLocationError(true, infoWindow, map.getCenter());

                });

            } else {

                // Browser doesn't support Geolocation

                handleLocationError(false, infoWindow, map.getCenter());

            }

        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {

            infoWindow.setPosition(pos);

            infoWindow.setContent(browserHasGeolocation ?

                              'Error: Ha ocurrido un error con el servicio de geolocalizacion.' :

                              'Error: El navegador no soporta el servicio de geolocalizacion.');

            infoWindow.open(map);

        }

        function setMarkers(map) {

            // Adds markers to the map.

           

            for (var i = 0; i < marcadores.length; i++) {

                var marcador = marcadores[i];                

                var marker = new google.maps.Marker({

                    position: { lat: marcador[2], lng: marcador[3] },

                    map: map,                                        

                    title: marcador[1],

                    zIndex: marcador[4],

                    id:marcador[0]

                });

                marker.addListener('click', function () {

                    

                    map.panTo(this.getPosition());

                    infoWindow.setContent(this.title);

                    infoWindow.open(map, this);

                    map.setZoom(20);                 

                });

                markers[marker.id] = marker;                               

            }//end for

        }

        function verMarcador(markerID) {

             google.maps.event.trigger(markers[markerID], 'click');             

        }

    </script>

De este código deben llamar a la última función verMarcador desde una liga externa al mapa. Esto generalmente es el listado de ligas de marcadores que viene de la base de datos y que comparte el mismo id que los marcadores. A fin de cuentas, el listado y el arreglo, deben estar relacionados por algún dato que generalmente es el ID.

Las ligas que llaman a la función verMarcador y generan el cambio en el mapa se ven así:

<a href="javascript:verMarcador(2);">Mi marcador 2</a>
<a href="javascript:verMarcador(3);">Mi marcador 3</a>

Con esto ya deben poder hacer click sobre la liga fuera del mapa y provocar que el mapa muestre la ubicación seleccionada.

Tomé la referencia de aquí:
https://stackoverflow.com/questions/49347441/javascript-google-maps-and-marker-referencing-with-id


Espero les sirva.