谷歌地图点击可放大标记群

Question

我正在为基于Wordpress的房地产网站开发自定义地图工具。我希望能够点击一个类别（即全部，零售，户外等）并使地图缩放/平移仅显示该类别中的标记。这些类别在Wordpress中生成，然后作为数据属性添加到标记和链接中。我知道我需要以某种方式将相关标记存储在一个数组中并创建新的边界，但我似乎无法弄清楚这一点。我也不确定如何将类别链接与新的标记簇联系起来。

这是我的Javascript：

(function($) {
  /*
   *  render_map
   *
   *  This function will render a Google Map onto the selected jQuery element
   *
   */

  function render_map( $el ) {
    var $markers = $el.find('.marker');

    var args = {
      zoom        : 18,
      center      : new google.maps.LatLng(0, 0),
      mapTypeId   : google.maps.MapTypeId.ROADMAP,
      scrollwheel : false
    };

    var map = new google.maps.Map( $el[0], args);

    map.markers = [];

    $markers.each(function(){
      add_marker( $(this), map );
    });

    center_map( map );
  }

  /*
   *  add_marker
   *
   *  This function will add a marker to the selected Google Map
   *
   */

  var infowindow;

  function add_marker( $marker, map ) {
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

    var marker = new google.maps.Marker({
      position : latlng,
      map      : map
    });

    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() ) {
      // create info window
      infowindow = new google.maps.InfoWindow({
        content   : $marker.html()
      });

      // show info window when marker is clicked
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open( map, marker );
        map.panTo( marker.position );
      });

      var $liProperty = $('ul.properties li').find('[data-lat="' + $marker.attr('data-lat') + '"]');

      var $liCategory = $('ul.property-categories li').find('[data-property-selector="' + $marker.attr('data-property-selector') + '"]');

      // show info window when marker is clicked
      $($liProperty).on('click', function(event) {
        infowindow.setContent( $marker.html() );
        infowindow.open( map, marker );
        map.panTo( marker.position );
      });

      // close info window when map is clicked
      google.maps.event.addListener(map, 'click', function(event) {
        if ( infowindow ) {
          infowindow.close();
        }
      });
    }
  }



  /*
   *  center_map
   *
   *  This function will center the map, showing all markers attached to this map
   *
   */

  var bounds;

  function center_map( map ) {
    bounds = new google.maps.LatLngBounds();

    // loop through all markers and create bounds
    $.each( map.markers, function( i, marker ){
      var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
      bounds.extend( latlng );
    });

    // only 1 marker?
    if( map.markers.length == 1 ) {
      map.setCenter( bounds.getCenter() );
      map.setZoom( 16 );
    } else {
      map.fitBounds( bounds );
    }
  }



  /*
   *  filter property list
   *
   */

  $('ul.property-categories li').on('click', function($marker) {
    var $catID       =  $(this).data('property-selector'),
        $targets     =  $('ul.properties li[data-property-type="' + $catID + '"]').show();

    if ($catID === 'all') {
      $('ul.properties li').show();
    } else {
      $('ul.properties li').not($targets).hide();
    }

    $('ul.property-categories li').removeClass('active');
    $(this).addClass('active');
  });

  $('ul.properties li').on('click', function() {
    $('ul.properties li').removeClass('active');
    $(this).addClass('active');
  });



  /*
   *  document ready
   *
   *  This function will render each map when the document is ready (page has loaded)
   *
   */

  $(document).ready(function(){
    $('.map').each(function(){
      render_map( $(this) );
    });
  });
})(jQuery);

这是我的PHP：

<?php
/**
 * Template Name: Properties Template
 *
 * @package WordPress
 * @subpackage Delco_Dev
 * @since Delco Dev 1.0
 */

get_header(); ?>

  <section class='small-hero'></section>

  <section class='properties-map'>
    <div class='properties-map__wrapper'>

      <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>

          <?php the_content(); ?>

        <?php endwhile; ?>
      <?php endif; ?>

      <?php if( have_rows('property_categories') ): ?>

        <ul class='property-categories'>

        <?php
          $firstLoop = true;
          while( have_rows('property_categories') ): the_row();
            $category = get_sub_field('property_category');
            ?>

            <li data-property-selector='<?php echo strtolower($category); ?>' <?php if ($firstLoop): ?>class='active'<?php endif; ?>><?php echo $category; ?></li>

            <?php $firstLoop = false; ?>

          <?php endwhile; ?>

        </ul>

      <?php endif; ?>

      <div class='properties__wrapper'>
        <ul class='properties'>
          <?php
            $mypages = get_pages( array(
              'child_of'    => 90,
              'sort_column' => 'menu_order',
              'sort_order'  => 'asc'
            ) );

            foreach( $mypages as $page ) {
              $content  = $page->post_content;
              if ( ! $content )
                continue;

                $property = get_field('property_category', $page->ID);
                $content  = apply_filters( 'the_content', $content );
                $location = get_field('google_map', $page->ID);
            ?>
              <li data-property-type="<?php echo strtolower($property); ?>"><a data-lat="<?php echo $location['lat']; ?>"><?php echo $page->post_title; ?></a></li>
            <?php
            }
          ?>
        </ul>
      </div>
    </div>
  </section>

<?php get_footer(); ?>

这是页面布局目前的样子： Map Tool