Как добавить InfoWindow и Bounce Animation для нескольких маркеров в Maps API v3?

Question

Я очень новичок в кодировании, на самом деле только начал изучать, чтобы я мог создать карту, над которой я сейчас работаю ... Я изо всех сил пытался заставить вещи работать, и, кажется, я столкнулся с препятствием.

Дело в том, что у меня на карте несколько маркеров, и я хочу, чтобы у них были разные информационные окна для каждого из них, а также добавлял к ним анимацию отказов при нажатии.

Мой код в настоящее время:

<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(-23.425553, -51.9382952);
    var Deville = new google.maps.LatLng(-23.4253651, -51.9363681);
    var Indaia = new google.maps.LatLng(-23.420335, -51.9415658);
    var Elo = new google.maps.LatLng(-23.4249708, -51.9400302);
    var Bristol = new google.maps.LatLng(-23.4236666, -51.9370105);
    var Aeroporto = new google.maps.LatLng(-23.4796959, -52.0121323);
    var Rodoviaria = new google.maps.LatLng(-23.4255414, -51.910845);
    var CasaEmilia = new google.maps.LatLng(-23.4246251, -51.9405511);
    var CentroComercial = new google.maps.LatLng(-23.4255029, -51.9461872);
    var Binho = new google.maps.LatLng(-23.4227188, -51.9438343);
    var CasaUniverso = new google.maps.LatLng(-23.4232428, -51.93649);
    var Divinita = new google.maps.LatLng(-23.4240644, -51.9363321);
    var CasaNoivos = new google.maps.LatLng(-23.4287239, -51.9328168);
    var Hipico = new google.maps.LatLng(-23.4227585, -51.9688396);


    var myOptions = {
      center: myLatlng,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var Deville = new google.maps.Marker({
        position: Deville,
        map: map,
        title:"Hotel Deville",
        animation: google.maps.Animation.DROP,
        });
    var Indaia = new google.maps.Marker({
        position: Indaia,
        map: map,
        title:"Hotel Indaiá",
        animation: google.maps.Animation.DROP,
        });
    var Elo = new google.maps.Marker({
        position: Elo,
        map: map,
        title:"Hotel Elo",
        animation: google.maps.Animation.DROP,
        });
    var Bristol = new google.maps.Marker({
        position: Bristol,
        map: map,
        title:"Hotel Bristol",
        animation: google.maps.Animation.DROP,
        });
    var Aeroporto = new google.maps.Marker({
        position: Aeroporto,
        map: map,
        title:"Aeroporto Regional de Maringá",
        animation: google.maps.Animation.DROP,
        });
    var Rodoviaria = new google.maps.Marker({
        position: Rodoviaria,
        map: map,
        title:"Rodoviária de Maringá",
        animation: google.maps.Animation.DROP,
        });
    var CasaEmilia = new google.maps.Marker({
        position: CasaEmilia,
        map: map,
        title: "Casa da Mãe do Noivo",
        animation: google.maps.Animation.DROP,
        });
    var CentroComercial = new google.maps.Marker({
        position: CentroComercial,
        map: map,
        title:"Centro Comercial Tiradentes",
        animation: google.maps.Animation.DROP,
        });
    var Binho = new google.maps.Marker({
        position: Binho,
        map: map,
        title:"Binho Importados",
        animation: google.maps.Animation.DROP,
        });
    var CasaUniverso = new google.maps.Marker({
        position: CasaUniverso,
        map: map,
        title:"Casa Universo",
        animation: google.maps.Animation.DROP,
        });
    var Divinita = new google.maps.Marker({
        position: Divinita,
        map: map,
        title:"Divinità Presentes",
        animation: google.maps.Animation.DROP,
        });
    var CasaNoivos = new google.maps.Marker({
        position: CasaNoivos,
        map: map,
        title:"Casa dos Noivos",
        animation: google.maps.Animation.DROP,
        });
    var Hipico = new google.maps.Marker({
        position: Hipico,
        map: map,
        title:"Clube Hípico de Maringá",
        animation: google.maps.Animation.DROP,
        });

    new google.maps.event.addListener(CasaNoivos, 'click', toggleBounce);


    function toggleBounce() {

        if (CasaNoivos.getAnimation() != null) {
        CasaNoivos.setAnimation(null);
        } else {
        CasaNoivos.setAnimation(google.maps.Animation.BOUNCE);
        }

        if (Hipico.getAnimation() != null) {
        Hipico.setAnimation(null);
        } else {
        Hipico.setAnimation(google.maps.Animation.BOUNCE);
        }
        }
  }
</script>

Я действительно добавил Bounce для маркера CasaNoivos, но когда я попытался добавить его в Hipico Marker, он был подключен к Casanoivos и оба начали Bounce, яхотел, чтобы это было независимым.Я попробовал InfoWindow со следующим кодом и с треском провалился lol

        var infoDivinita = new google.maps.InfoWindow({
    content:'<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h2 id="firstHeading" class="firstHeading">Divinità Presentes</h2>'+
            '<div id="bodyContent">'+
            '<p><b>Telefone:</b> (44) 3226-7449' +
            '<b>Endereço:</b> Av. XV de Novembro, 351, Centro. CEP: 87013-230, Maringá-PR'+
            '<b>Site:</b> http://divinitapresentes.com.br </p>'
            '</div>'+
            '</div>';'
            })
    google.maps.event.addListener(Divinita, 'click', function() {
    infoDivinita.open(map,Divinita);
    });

Любая помощь очень ценится.

Answer 1

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

    new google.maps.event.addListener(CasaNoivos, 'click', function(e) {toggleBounce(CasaNoivos)});
    new google.maps.event.addListener(Hipico, 'click', function(e) {toggleBounce(Hipico)});

    function toggleBounce(marker) {

      if (marker.getAnimation() != null) {
        marker.setAnimation(null);
      } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
      }
    }

О вашем InfoWindow, я обнаружил некоторые синтаксические ошибки, например ';в конце.

var infoHipico = new google.maps.InfoWindow({
content:'<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h2 id="firstHeading" class="firstHeading">Hipico</h2>'+
        '<div id="bodyContent">'+
        '<p><b>Telefone:</b> (44) 3226-7449' +
        '<b>Endereço:</b> Av. XV de Novembro, 351, Centro. CEP: 87013-230, Maringá-PR'+
        '<b>Site:</b>  </p>'+
        '</div>'+
        '</div>'
        })
google.maps.event.addListener(Hipico, 'click', function() {
  closeInfoWindows();  // this function makes sure only one infowindow stays open
  infoHipico.open(map,Hipico);
});

var infoCasaNoivos = new google.maps.InfoWindow({
content:'<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h2 id="firstHeading" class="firstHeading">Casa Noivos</h2>'+
        '<div id="bodyContent">'+
        '<p><b>Telefone:</b> (44) 3226-7449' +
        '<b>Endereço:</b> Av. XV de Novembro, 351, Centro. CEP: 87013-230, Maringá-PR'+
        '<b>Site:</b>  </p>'+
        '</div>'+
        '</div>'
        })
google.maps.event.addListener(CasaNoivos, 'click', function() {
  closeInfoWindows();  // this function makes sure only one infowindow stays open
  infoCasaNoivos.open(map,CasaNoivos);
});

  function closeInfoWindows() {
    infoHipico.close();
    infoCasaNoivos.close();
  }

Наконец, вы действительно должны использовать массивы.Это упрощает, например, если вам нужно исправить один из этих блоков создания InfoWindow.