Отображение точки в GoogleMaps после нажатия кнопки

Question

У меня есть Google Maps со многими маркерами. Это мой код:

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<a href ="#" class="obj-1" id="obj-1"><div class="apartament_atrakcje">Atrakcja 1 pl</div></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
<a href ="#" class="obj-2" id="obj-2"><div class="apartament_atrakcje">Atrakcja 2 PL</div></a>
</div>




<div id="map_canvas"></div>

<script>
  window.onload = function () {
      var styles = [{"featureType":"all"}];
      var bounds = new google.maps.LatLngBounds();
      var options = {
          mapTypeControlOptions: {
              mapTypeIds: ['Styled']
          },
          center: new google.maps.LatLng(11, 22),
          zoom: 15,
          disableDefaultUI: true,
          mapTypeId: 'Styled'
      };
      marker = new google.maps.Marker({
          map:map,
      });
      var div = document.getElementById('map_canvas');
      var map = new google.maps.Map(div, options);
      var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });


      var markers = [
   ['Atrakcja 1 pl', 51.73925413, 19.51309225, 'Atrakcja 1 pl', '#', 'poi.png'],
   ['Atrakcja 2 PL', 53.41475000, 14.60220358, 'Atrakcja 2 PL', '#', 'poi.png'],
   ['Biskupia', 51.93780943, 15.52505514, 'Biskupia', '#', 'poi2.png']
      ];
      var infoWindow= new google.maps.InfoWindow({maxWidth:600}),
          marker, i,
          image = 'http://localhost/apartamenty/assets/poi.png';

      for( i = 0; i < markers.length; i++ ) {
          var beach = markers[i];
          var position = new google.maps.LatLng(beach[1], beach[2]);
          bounds.extend(position);
          marker = new google.maps.Marker({
              position: position,
              map: map,
              icon: 'http://localhost/apartamenty/assets/' + beach[5],
              title: beach[0],
              myurl: beach[4]
          });

          google.maps.event.addListener(marker, 'click', (function(marker, i) {
              return function() {
 infoWindow.setContent('<a href="'+marker['myurl']+'">'+marker['title']+'</a>');
 infoWindow.open(map, marker);
              }
          })(marker, i));
          map.fitBounds(bounds);
          map.mapTypes.set('Styled', styledMapType);

      }
  }
               </script>

У меня есть карта и маркеры на ней. Это нормально!

После нажатия на ссылку obj-1 или obj-2 я хотел бы:

- center the map on this one, selected marker 
- display the marker of this marker

Если пользователь нажимает на ссылку "Atrakcja 1 pl" - тогда карта находится в центре маркера с заголовком Atrakcja 1 pll, и его подсказка будет видна.

Кто-нибудь знает, как это сделать в моем коде?

Answer 1

Один из вариантов - сохранить ссылки на маркеры в массиве и добавить прослушиватели DOM click для ваших «ссылок», чтобы открыть информационное окно маркера и центрировать карту на этом маркере.

1. создать массив маркеров:

var gmarkers=[];

for (i = 0; i < markers.length; i++) {
  var beach = markers[i];
  var position = new google.maps.LatLng(beach[1], beach[2]);
  bounds.extend(position);
  marker = new google.maps.Marker({
    position: position,
    map: map,
    // icon: 'http://localhost/apartamenty/assets/' + beach[5],
    title: beach[0],
    myurl: beach[4]
  });
  gmarkers.push(marker);
  // ...

2. добавьте прослушиватели кликов к вашим "ссылкам", которые открывают информационное окно этого маркера и центрируют карту на его позиции:

  if (document.getElementById('obj-'+(i+1))) {
     // relies on the naming convention in your posted code
     google.maps.event.addDomListener(document.getElementById('obj-'+(i+1)), 'click', function(i) {
     return function() {
        google.maps.event.trigger(gmarkers[i], 'click');
        map.setCenter(gmarkers[i].getPosition());
     }}(i))
  }

подтверждение концепции скрипки

фрагмент кода:

html,
body,
#map_canvas {
  height: 90%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
  <a href="#" class="obj-1" id="obj-1">
    <div class="apartament_atrakcje">Atrakcja 1 pl</div>
  </a>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding_all_2">
  <a href="#" class="obj-2" id="obj-2">
    <div class="apartament_atrakcje">Atrakcja 2 PL</div>
  </a>
</div>
<div id="map_canvas"></div>
<script>
  window.onload = function() {
    var styles = [{
      "featureType": "all"
    }];
    var gmarkers = [];
    var bounds = new google.maps.LatLngBounds();
    var options = {
      mapTypeControlOptions: {
        mapTypeIds: ['Styled']
      },
      center: new google.maps.LatLng(11, 22),
      zoom: 15,
      disableDefaultUI: true,
      mapTypeId: 'Styled'
    };
    marker = new google.maps.Marker({
      map: map,
    });
    var div = document.getElementById('map_canvas');
    var map = new google.maps.Map(div, options);
    var styledMapType = new google.maps.StyledMapType(styles, {
      name: 'Styled'
    });

    var markers = [
      ['Atrakcja 1 pl', 51.73925413, 19.51309225, 'Atrakcja 1 pl', '#', 'poi.png'],
      ['Atrakcja 2 PL', 53.41475000, 14.60220358, 'Atrakcja 2 PL', '#', 'poi.png'],
      ['Biskupia', 51.93780943, 15.52505514, 'Biskupia', '#', 'poi2.png']
    ];
    var infoWindow = new google.maps.InfoWindow({
        maxWidth: 600
      }),
      marker, i,
      image = 'http://localhost/apartamenty/assets/poi.png';

    for (i = 0; i < markers.length; i++) {
      var beach = markers[i];
      var position = new google.maps.LatLng(beach[1], beach[2]);
      bounds.extend(position);
      marker = new google.maps.Marker({
        position: position,
        map: map,
        // icon: 'http://localhost/apartamenty/assets/' + beach[5],
        title: beach[0],
        myurl: beach[4]
      });
      gmarkers.push(marker);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infoWindow.setContent('<a href="' + marker['myurl'] + '">' + marker['title'] + '</a>');
          infoWindow.open(map, marker);
        }
      })(marker, i));
      map.fitBounds(bounds);
      map.mapTypes.set('Styled', styledMapType);
      if (document.getElementById('obj-' + (i + 1))) {
        // relies on the naming convention in your posted code
        google.maps.event.addDomListener(document.getElementById('obj-' + (i + 1)), 'click', function(i) {
          return function() {
            google.maps.event.trigger(gmarkers[i], 'click');
            map.setCenter(gmarkers[i].getPosition());
          }
        }(i))
      }
    }
  }
</script>