кластера Маркер на карте Google

Question

У меня есть PHP и код яваскрипта, как показано ниже я получил результат на карте вместе со всеми маркерами, но я хочу, хочу кассетные маркеры с группой, если несколько маркеров найдены

<div class="locator_right"> 
     <div class="mCustomScrollbar" id="content_4"> 
      <ul class="locator_list"> 
      <?php $locations = array(); 
      $i=0; 
     while($data=mysql_fetch_array($arr)){ ?> 


      <?php //echo $data['Listing_Latitude']; 
      $locations[] = array(
        'google_map' => array(
         'lat' => $data['Listing_Latitude'], 
         'lng' => $data['Listing_Longitude'], 
        ), 
        'location_name' => str_replace("'","",$data['ProperDisplayName']), 
        'listing_slug' => '<a href="http://www.pigeonforgechamber.com/listing/'.$data['listing_slug'].'">View now</a>', 
       ); 
      ?> 

      <?php $i++ ;?> 
      <?php } ?>  

      </ul> 
      </div> 
     </div> 

<?php /* === THIS IS WHERE WE WILL ADD OUR MAP USING JS ==== */ ?> 

       <?php /* === MAP DATA === */ ?> 

       <div class="map_div" itemscope itemprop="hasMap" itemtype="http://schema.org/Map"> 
        <div id="google-map" class="google-map"> 
        </div><!-- #google-map --> 
       </div> 

       <?php /* === PRINT THE JAVASCRIPT === */ ?> 

       <?php 
       /* Set Default Map Area Using First Location */ 
       $map_area_lat = isset($locations[0]['google_map']['lat']) ? $locations[0]['google_map']['lat'] : ''; 
       $map_area_lng = isset($locations[0]['google_map']['lng']) ? $locations[0]['google_map']['lng'] : ''; 
       ?> 

       <?php //echo"<pre>";print_r($locations);die;?> 
       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
       <script type='text/javascript' src='../wp-content/themes/Aktina/js/gmaps.js'></script> 
       <script> 

        jQuery(document).ready(function($) { 
        /* Do not drag on mobile. */ 
        var is_touch_device = 'ontouchstart' in document.documentElement; 
        <?php if($map_area_lat!=''){ ?> 
        var map = new GMaps({ 
         el: '#google-map', 
         lat: '<?php echo $map_area_lat; ?>', 
         lng: '<?php echo $map_area_lng; ?>', 
         scrollwheel: true, 
         draggable: ! is_touch_device 
        }); 
        <?php } else { ?> 
        var map = new GMaps({ 
         el: '#google-map', 
         lat: '37.8833', 
         lng: '-95.712891', 
         scrollwheel: true, 
         zoom: 3, 
         draggable: ! is_touch_device 
        }); 
        <?php } ?> 

        /* Map Bound */ 
        var bounds = []; 

        <?php /* For Each Location Create a Marker. */ 
        foreach($locations as $location){ 

         if($location['google_map']['lat'] != '' && $location['google_map']['lng'] != ''){ 
         $name = $location['location_name']; 
         $slug = $location['listing_slug']; 
         $map_lat = $location['google_map']['lat']; 
         $map_lng = $location['google_map']['lng']; 
         ?> 
         /* Set Bound Marker */ 
         var latlng = new google.maps.LatLng(<?php echo $map_lat; ?>, <?php echo $map_lng; ?>); 
         bounds.push(latlng); 
         /* Add Marker */ 
         map.addMarker({ 
          lat: <?php echo $map_lat; ?>, 
          lng: <?php echo $map_lng; ?>, 
          title: '<?php echo $name; ?>', 
          infoWindow: { 
           content: '<p><?php echo $name; ?></br><?php echo $slug; ?></p>' 

          } 
         }); 

        <?php } } //end foreach locations ?> 

        /* Fit All Marker to map */ 
        map.fitLatLngBounds(bounds); 

        /* Make Map Responsive */ 
        var $window = $(window); 
        function mapWidth() { 
         var size = $('.google-map-wrap').width(); 
         $('.google-map').css({width: '120%', height: '400px'}); 
        } 
        mapWidth(); 
        $(window).resize(mapWidth); 


       }); 

       </script> 

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

Answer 1

Вы можете легко использовать MarkerClusterer от Google.

Nice Введение здесь: Too Many Markers!