нужно окно справочной информации в моем магазине локатор (PHP & JS)

Question

Проблема с этим кодом заключается в том, что при наведении курсора на маркер информационное окно отображает только информацию о последней записи массива.Попробовал пару вещей, таких как перемещение информационного окна var внутри цикла for.Однако это приводит к исчезновению всех маркеров.

Я создаю эту страницу с помощью PHP и Javascript.также я не копировал API карт Google с ключом из-за конфиденциальности.

Надеюсь, что кто-то может помочь мне с этой проблемой, которую я получил.Заранее спасибо за помощь.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-7 col-sm-11 col-xs-11" id="map"></div>
        <script>

            function initMap() {
                //coordinaten van de center
                var myLatLng = {lat: 52.132633, lng: 5.291266};

                //coordinaten van alle winkels
                var winkels = [
                    ['Suitable Hoofdkwartier', 51.706164, 5.340917, 'Stadionlaan 162-165 <br /> 5346JT <br /> Rosmalen'],
                    ['Suitable Maastricht', 50.848986, 5.692262, 'Achter het Vleeshuis 5 <br /> 6211GR <br /> Maastricht'],
                    ['Suitable Leiden', 52.158294, 4.492075, 'Nieuwe Rijn 20 <br /> 2312JC <br /> Leiden'],
                    ['Suitable Amsterdam', 52.367416, 4.889072, 'Singel 466 <br /> 1017AW <br /> Amsterdam'],
                    ['Suitable Den Bosch', 51.688077, 5.302443, 'Schapenmarkt 18 <br /> 5211ET <br /> Den Bosch'],          
                    ['Suitable Groningen', 53.218488, 6.570253, 'Brugstraat 3 <br /> 9712AA <br /> Groningen'],
                    ['Suitable Utrecht', 52.091057, 5.120239, 'Vismarkt 11 <br /> 3511KS <br /> Utrecht'],
                    ['Suitable Breda', 51.588345, 4.777341, 'Veemarktstraat 13 <br /> 4811ZB <br /> Breda'],
                    ['Suitable Haarlem', 52.382709, 4.635163, 'Barteljorisstraat 8 <br /> 2011RB <br /> Haarlem'],
                    ['Suitable Den Haag', 52.077851, 4.308998, 'Dagelijkste Groenmarkt 25 <br /> 2513AL <br /> Den Haag'],
                    ['Suitable Arnhem', 51.980305, 5.908369, 'Bakkerstraat 18a <br /> 6811EG <br /> Arnhem'],
                    ['Suitable Rotterdam', 51.923633, 4.485226, 'Meent 29a <br /> 3011JC <br /> Rotterdam'],
                    ['Suitable Oisterwijk', 51.581049, 5.19771, 'De Lind 9 <br /> 5061HS <br /> Oisterwijk'],
                    ['Suitable Zwolle', 52.511483, 6.091013, 'Luttekestraat 36 <br /> 8011LR <br /> Zwolle'],
                    ['Suitable Tilburg Outlet', 51.555268, 5.083966, 'Heuvelstraat 113 <br /> 5038AD <br /> Tilburg'],
                    ['Suitable Nijmegen', 51.844546, 5.863493, 'Molenstraat 39 <br /> 6511HA <br /> Nijmegen'],
                    ['Suitable Eindhoven', 51.437658, 5.475491, 'Kleine Berg 11 <br /> 5611JS <br /> Eindhoven']
                ];

                //generen van de map
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 7,
                    center: myLatLng
                });

                //marker icons
                var image = 'http://suitableshop.customer.cloud.nl/httpdocs/templates/suitable/images/markers/marker-suitable.png';
                var testimg = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

                //content van het info schermpje
                var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    'Suitable Hoofdkwartier'+
                    '<div id="bodyContent">'+
                    '<p>Stadionlaan 162-165' +
                    ' 5246 JT'+
                    'Rosmalen </p>'+
                    '</div>'+
                    '</div>';




                for (var i = 0; i < winkels.length; i++) {
                  var winkel = winkels[i];
                  var adres = winkels[i][3];
                  var marker = new google.maps.Marker({
                    position: {lat: winkel[1], lng: winkel[2]},
                    map: map,
                    //icon: image,
                    title: winkel[0]


                  });

                  //toevoegen van een info schermpje
                    var infowindow = new google.maps.InfoWindow({
                        content: adres
                    });

                  //functie voor het open van de info schermpje als er op geklikt is
                  marker.addListener('mouseover', function() {
                    infowindow.open(marker.get('map'), marker)
                    infowindow.setPosition(marker)
                  });

                  marker.addListener('mouseout', function() {
                    infowindow.close();            
                  });

                  //functie die ervoor zorgt dat wanneer er op een marker geklikt wordt er wordt ingezoomd op de locatie van de marker
                  marker.addListener('click', function() {
                    map.setZoom(25);
                    map.setCenter(marker.getPosition());
                  });
            }}

        </script>

Answer 1

Вам необходимо заменить код слушателя маркера следующим, сохранив все остальное как есть:

//functie voor het open van de info schermpje als er op geklikt is  
google.maps.event.addListener(marker,'mouseover', (function(marker,infowindow){ 
    return function() {
        infowindow.open(map,marker);
    };
})(marker,infowindow));  

google.maps.event.addListener(marker,'mouseout', (function(marker,infowindow){ 
    return function() {
        infowindow.close();  
    };
})(marker,infowindow)); 

//functie die ervoor zorgt dat wanneer er op een marker geklikt wordt er wordt ingezoomd op de locatie van de marker
google.maps.event.addListener(marker,'click', (function(marker){ 
    return function() {
        map.setZoom(25);
        map.setCenter(marker.getPosition());
    };
})(marker));

Полный код:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-7 col-sm-11 col-xs-11" id="map"></div>
    <script>

        function initMap() {
            //coordinaten van de center
            var myLatLng = {lat: 52.132633, lng: 5.291266};

            //coordinaten van alle winkels
            var winkels = [
                ['Suitable Hoofdkwartier', 51.706164, 5.340917, 'Stadionlaan 162-165 <br /> 5346JT <br /> Rosmalen'],
                ['Suitable Maastricht', 50.848986, 5.692262, 'Achter het Vleeshuis 5 <br /> 6211GR <br /> Maastricht'],
                ['Suitable Leiden', 52.158294, 4.492075, 'Nieuwe Rijn 20 <br /> 2312JC <br /> Leiden'],
                ['Suitable Amsterdam', 52.367416, 4.889072, 'Singel 466 <br /> 1017AW <br /> Amsterdam'],
                ['Suitable Den Bosch', 51.688077, 5.302443, 'Schapenmarkt 18 <br /> 5211ET <br /> Den Bosch'],          
                ['Suitable Groningen', 53.218488, 6.570253, 'Brugstraat 3 <br /> 9712AA <br /> Groningen'],
                ['Suitable Utrecht', 52.091057, 5.120239, 'Vismarkt 11 <br /> 3511KS <br /> Utrecht'],
                ['Suitable Breda', 51.588345, 4.777341, 'Veemarktstraat 13 <br /> 4811ZB <br /> Breda'],
                ['Suitable Haarlem', 52.382709, 4.635163, 'Barteljorisstraat 8 <br /> 2011RB <br /> Haarlem'],
                ['Suitable Den Haag', 52.077851, 4.308998, 'Dagelijkste Groenmarkt 25 <br /> 2513AL <br /> Den Haag'],
                ['Suitable Arnhem', 51.980305, 5.908369, 'Bakkerstraat 18a <br /> 6811EG <br /> Arnhem'],
                ['Suitable Rotterdam', 51.923633, 4.485226, 'Meent 29a <br /> 3011JC <br /> Rotterdam'],
                ['Suitable Oisterwijk', 51.581049, 5.19771, 'De Lind 9 <br /> 5061HS <br /> Oisterwijk'],
                ['Suitable Zwolle', 52.511483, 6.091013, 'Luttekestraat 36 <br /> 8011LR <br /> Zwolle'],
                ['Suitable Tilburg Outlet', 51.555268, 5.083966, 'Heuvelstraat 113 <br /> 5038AD <br /> Tilburg'],
                ['Suitable Nijmegen', 51.844546, 5.863493, 'Molenstraat 39 <br /> 6511HA <br /> Nijmegen'],
                ['Suitable Eindhoven', 51.437658, 5.475491, 'Kleine Berg 11 <br /> 5611JS <br /> Eindhoven']
            ];

            //generen van de map
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 7,
                center: myLatLng
            });

            //marker icons
            var image = 'http://suitableshop.customer.cloud.nl/httpdocs/templates/suitable/images/markers/marker-suitable.png';
            var testimg = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

            //content van het info schermpje
            var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                'Suitable Hoofdkwartier'+
                '<div id="bodyContent">'+
                '<p>Stadionlaan 162-165' +
                ' 5246 JT'+
                'Rosmalen </p>'+
                '</div>'+
                '</div>';




            for (var i = 0; i < winkels.length; i++) {
              var winkel = winkels[i];
              var adres = winkels[i][3];
              var marker = new google.maps.Marker({
                position: {lat: winkel[1], lng: winkel[2]},
                map: map,
                //icon: image,
                title: winkel[0]


              });

              //toevoegen van een info schermpje
                var infowindow = new google.maps.InfoWindow({
                    content: adres
                });

              //functie voor het open van de info schermpje als er op geklikt is  
            google.maps.event.addListener(marker,'mouseover', (function(marker,infowindow){ 
                return function() {
                    infowindow.open(map,marker);
                };
            })(marker,infowindow));  

            google.maps.event.addListener(marker,'mouseout', (function(marker,infowindow){ 
                return function() {
                    infowindow.close();  
                };
            })(marker,infowindow)); 

            //functie die ervoor zorgt dat wanneer er op een marker geklikt wordt er wordt ingezoomd op de locatie van de marker
            google.maps.event.addListener(marker,'click', (function(marker){ 
                return function() {
                    map.setZoom(25);
                    map.setCenter(marker.getPosition());
                };
            })(marker));
        }}

    </script>