Search code examples
javascriptgoogle-mapsgoogle-maps-markersmarkerinfowindow

How can I add info windows to a marker event listener

I'm trying to add info windows when specific markers are clicked. At the moment I have 3 dropdown menus with various locations as that when they are selected it adds a marker to the map. How do I incorporate adding info windows with some content to each marker?

Here is the code I'm working with

const locationSelect = document.getElementById('location-select');
const markers = [];

const myCoordinates = { 
    "bigBenCoords" : {
    "lat": 51.5007, 
    "lng": -0.1246},
const infoWindows = [];

const myInfoWindows = {
    "bigBenInfo" : 
    {"content": "Big Ben is a historic landmark in London and has become one of the major and most easily recognisable landmarks of the city. The name 'Big Ben' is the name for the clock in Elizabeth's Tower - the tallest tower in the Palace of Westminster."}
};


function removeMarkers() {
  markers.forEach(marker => {
    marker.setMap(null); // Disconnect each marker.
  });

  markers.length = 0; // This empties the array.
}

function createMarker(coordinates, map) {
  const marker = new google.maps.Marker({
    position: coordinates,
    animation: google.maps.Animation.DROP,
    map
  });

  markers.push(marker); // Add the marker to the array to save the reference.
}



function removeInfoWindows() {
    infoWindows.forEach(inforWindow => {
        infoWindow.setMap(null);
    });

    infoWindows.length = 0;
}

function addInfoWindow(coordinates, map) {
    const infoWindow = new google.maps.InfoWindow({
        content: infoWindows,
        map
    });

    infoWindows.push(infoWindow);
}



function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: {
      lat: 51.509865,
      lng:  -0.118092
    }
  });

  locationSelect.addEventListener('change', () => {
    const location = locationSelect.value;
    const coordinates = myCoordinates[location];
    const content = myInfoWindows[content];

    removeMarkers(); // First remove all markers.
    createMarker(coordinates, map); // Then add the marker.
    removeInfoWindows();
    addInfoWindow(content, map);
  });

Solution

  • It is not clear from the question if you wish to add a new infowindow for each marker added to the map or re-use the same marker. The effect is the same as you remove all markers from the map every time a new selection is made using the dropdown menus. It is also not clear what content you hope to add to the infowindow but hopefully the following will be of use in that respect.

    There are a couple of mistakes above - assigning const markers=[]; yields the error Uncaught TypeError: Assignment to constant variable so that should be changed to either var or let. When you clear the markers you would be better, imo, to reset the markers array completely

    <!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Google Maps: </title>
        <style>
            #map{
                width:800px;
                height:600px;
                float:none;
                margin:auto;
            }
        </style>
        <script>
            let markers = [];
            const myCoordinates = { 
                "bigBenCoords" : {
                    "lat": 51.5007, 
                    "lng": -0.1246,
                    'description':"Big Ben is a historic landmark in London and has become one of the major and most easily recognisable landmarks of the city. The name 'Big Ben' is the name for the clock in Elizabeth's Tower - the tallest tower in the Palace of Westminster."
                },
                "westminsterAbbeyCoords" : {
                  "lat":51.4987, 
                  "lng":-0.1289,
                    'description':"Westminster Abbey, formally titled the Collegiate Church of Saint Peter at Westminster, is a large, mainly Gothic abbey church in the City of Westminster, London, England, just to the west of the Palace of Westminster."
                },
                'buckpalace':{
                    lat:51.501399,
                    lng:-0.141761,
                    'description':"Buckingham Palace is the London residence and administrative headquarters of the monarch of the United Kingdom. Located in the City of Westminster, the palace is often at the centre of state occasions and royal hospitality. It has been a focal point for the British people at times of national rejoicing and mourning"
                },
                'downingst':{
                    lat:51.503302,
                    lng:-0.127452,
                    'description':"Downing Street is a street in central London that houses the official residences and offices of the Prime Minister of the United Kingdom and the Chancellor of the Exchequer. Situated off Whitehall, a few minutes' walk from the Houses of Parliament, Downing Street was built in the 1680s by Sir George Downing"
                }
            }
                
            function initMap() {
                const map = new google.maps.Map( document.getElementById("map"), {
                    zoom: 12,
                    center: {
                        lat:51.509865,
                        lng:-0.118092
                    }
                });


                function removeMarkers() {
                    markers.forEach(marker => {
                        marker.setMap(null);
                    });
                    markers=[];
                }
                
                function createMarker( coordinates, map, value ) {
                    const marker = new google.maps.Marker({
                        position: coordinates,
                        value:value,
                        animation: google.maps.Animation.DROP,
                        map
                    });
                    markers.push( marker );
                    
                    setTimeout(()=>{
                        /* 
                            Where is the content to be derived? This simply 
                            displays the selected text from dropdown and the lat/lng
                        */
                        let content=[
                            'Location='+value,
                            'Lat='+marker.position.lat(),
                            'Lng='+marker.position.lng(),
                            'Description'+myCoordinates[value].description
                        ].join(', ');
                        
                        
                        let infowindow=new google.maps.InfoWindow({maxWidth:300});
                            infowindow.setContent( content )
                            infowindow.setPosition( marker.position );
                            infowindow.open( map, marker );                 
                    },1000);

                }
                
                
                const changehandler=function(e){
                    const coordinates = myCoordinates[ this.value ];
                    removeMarkers(); 
                    createMarker(coordinates, map, this.value ); 
                }
                
                document.querySelectorAll('select.location-select').forEach( sel=>{
                    sel.addEventListener('change',changehandler)
                })
                
            }

        </script>
        <script async defer src='//maps.googleapis.com/maps/api/js?key=apikey&callback=initMap'></script>
    </head>
    <body>
        <select class='location-select'>
            <option selected disabled hidden>Select
            <option>buckpalace
            <option>downingst
        </select>


        <select class='location-select'>
            <option selected disabled hidden>Select
            <option>westminsterAbbeyCoords
        </select>


        <select class='location-select'>
            <option selected disabled hidden>Select
            <option>bigBenCoords
        </select>
        <div id='map'></div>
    </body>
</html>

    Proof of concept

    The above yields a result like so:

    example output