Clustering marker on map (JQuery, gMap3)

Question

i would like to add clustering to my markers. The question is how do i add the clustering code to my existing code without messing the whole thing up? If not, is there any better way to do it?

This is my Clustering Code from gMap3:

    $("#test").gmap3({
  map:{
    options: {
      center:[46.578498,2.457275],
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
  },
  marker: {
    values: macDoList,
    cluster:{
      radius:100,
      // This style will be used for clusters with more than 0 markers
      0: {
        content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
        width: 53,
        height: 52
      },
      // This style will be used for clusters with more than 20 markers
      20: {
        content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
        width: 56,
        height: 55
      },
      // This style will be used for clusters with more than 50 markers
      50: {
        content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
        width: 66,
        height: 65
      }
    },
    options: {
      icon: new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/icon_green.png")
    },
    events:{
      mouseover: function(marker, event, context){
        $(this).gmap3(
          {clear:"overlay"},
          {
          overlay:{
            latLng: marker.getPosition(),
            options:{
              content:  "<div class='infobulle"+(context.data.drive ? " drive" : "")+"'>" +
                          "<div class='bg'></div>" +
                          "<div class='text'>" + context.data.city + " (" + context.data.zip + ")</div>" +
                        "</div>" +
                        "<div class='arrow'></div>",
              offset: {
                x:-46,
                y:-73
              }
            }
          }
        });
      },
      mouseout: function(){
        $(this).gmap3({clear:"overlay"});
      }
    }
  }
});

This is my existing code (script.php) where the above code should be appended into this code:

<script type="text/javascript">
//<![CDATA[
jQuery.noConflict(); jQuery(document).ready(function(){  
    //VAR SETUP
    <?php
    $mainZoom = get_theme_mod('themolitor_customizer_home_zoom');
    $toggle = get_theme_mod('themolitor_customizer_mapstyle_onoff');
    $sitePin = get_theme_mod('themolitor_customizer_pin');
    $homeCat = get_option('themolitor_customizer_home_cat');
    ?>

    jQuery('#footer').prepend('<div class="markerNav" title="<?php _e('Prev','themolitor');?>" id="prevMarker"><i class="fa fa-chevron-left"></i></div><div id="markers"></div><div class="markerNav" title="<?php _e('Next','themolitor');?>" id="nextMarker"><i class="fa fa-chevron-right"></i></div><?php if($toggle){ ?><div id="mapTypeContainer"><div id="mapStyleContainer"><div id="mapStyle" class="satellite"></div></div><div id="mapType" title="<?php _e('Map Type','themolitor');?>" class="satellite"></div></div><?php } ?>');

    jQuery('body').prepend("<div id='target'></div>");

        jQuery("#gMap").addClass('activeMap').gmap3({ 
            action: 'init',
            onces: {
              bounds_changed: function(){
                var number = 0;
                jQuery(this).gmap3({
                  action:'getBounds', 
                  callback: function (){
                    <?php 
                    $customList = new WP_Query();
                    $customList->query('showposts=5000&cat='.$homeCat); 
                    if ($customList->have_posts()) : while ($customList->have_posts()) : $customList->the_post(); 

                    //VAR SETUP
                    $latitude = get_post_meta( $post->ID, 'themolitor_latitude', TRUE );
                    $longitude = get_post_meta( $post->ID, 'themolitor_longitude', TRUE );
                    $addrOne = get_post_meta( $post->ID, 'themolitor_address_one', TRUE );
                    $addrTwo = get_post_meta( $post->ID, 'themolitor_address_two', TRUE );
                    $pin = get_post_meta( $post->ID, 'themolitor_pin', TRUE );
                    $customLink = get_post_meta( $post->ID, 'themolitor_custom_link', TRUE );

                    //LEGACY SUPPORT
                    $data = get_post_meta( $post->ID, 'key', true );
                    if(isset($data['latitude'])){$oldLatitude = $data['latitude'];}
                    if(isset($data['longitude'])){$oldLongitude = $data['longitude'];}
                    if(isset($data['address_one'])){$oldAddrOne = $data['address_one'];}
                    if(isset($data['address_two'])){$oldAddrTwo = $data['address_two'];}
                    if(isset($data['pin'])){$oldPin = $data['pin'];}

                    //CHECK FOR LEGACY IF VARS EMPTY
                    if($latitude){} elseif(!empty($oldLatitude)){$latitude = $oldLatitude;}
                    if($longitude){} elseif(!empty($oldLongitude)){$longitude = $oldLongitude;}
                    if($addrOne){} elseif(!empty($oldAddrOne)){$addrOne = $oldAddrOne;}
                    if($addrTwo){} elseif(!empty($oldAddrTwo)){$addrTwo = $oldAddrTwo;}
                    if($pin){} elseif(!empty($oldPin)){$pin = $oldPin;} else {$pin = $sitePin;}
                    if($customLink){} else {$customLink = get_permalink();}

                    //GET LAT/LONG FROM ADDRESS
                    if (!$latitude && !$longitude && $addrOne && $addrTwo) {
                        $addrOneFix = str_replace(" ", "+", $addrOne);
                        $addrTwoFix = str_replace(" ", "+", $addrTwo);
                        $address = $addrOneFix.'+'.$addrTwoFix;
                        $geocode = file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$address.'&sensor=false');
                        $json = json_decode($geocode);
                        $latitude = $json->{'results'}[0]->{'geometry'}->{'location'}->{'lat'};
                        $longitude = $json->{'results'}[0]->{'geometry'}->{'location'}->{'lng'};
                    }

                    if($latitude && $longitude){
                    ?>
                    add(jQuery(this), number += 1, "<?php the_title(); ?>", "<?php echo $customLink; ?>","<?php if($addrOne && $addrTwo){ echo $addrOne.'<br />'.$addrTwo; } ?>","<?php echo $latitude; ?>","<?php echo $longitude; ?>", '<?php the_post_thumbnail(); ?>','<?php echo $pin;?>');<?php } endwhile; else:?>
                        alert('<?php _e('You need to add posts to display on the map.','themolitor');?>');
                    <?php endif; ?>
                  }
                });
              }
            }
          },{ 
            action: 'setOptions', args:[{
                zoom:<?php echo $mainZoom;?>,
                scrollwheel:true,
                disableDefaultUI:false,
                disableDoubleClickZoom:false,
                draggable:true,
                mapTypeControl:true,
                mapTypeId:'roadmap',
                mapTypeControlOptions: {
                    position: google.maps.ControlPosition.LEFT_TOP,
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                panControl:false,
                scaleControl:false,
                streetViewControl:true,
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_CENTER
                },
                zoomControl:true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.DEFAULT,
                    position: google.maps.ControlPosition.RIGHT_CENTER
                }
            }]
        });
        function add(jQuerythis, i, title, link, excerpt, lati, longi, img, pin){
          jQuerythis.gmap3({
            action : 'addMarker',
            lat:lati,
            lng:longi,
            options: {icon: new google.maps.MarkerImage(pin)},
            events:{
                mouseover: function(marker){
                    jQuerythis.css({cursor:'pointer'});
                    jQuery('#markerTitle'+i+'').stop(true,true).fadeIn({ duration: 200, queue: false }).animate({bottom:"32px"},{duration:200,queue:false});
                    jQuery('.markerInfo').removeClass('activeInfo').hide();
                    jQuery('#markerInfo'+i+'').addClass('activeInfo').show();
                    jQuery('.marker').removeClass('activeMarker');
                    jQuery('#marker'+i+'').addClass('activeMarker');
                },
                mouseout: function(){
                    jQuerythis.css({cursor:'default'});
                    jQuery('#markerTitle'+i+'').stop(true,true).fadeOut(200,function(){jQuery(this).css({bottom:"0"})});
                },
                click: function(marker){window.location = link}
            },
            callback: function(marker){
              var jQuerybutton = jQuery('<div id="marker'+i+'" class="marker"><div id="markerInfo'+i+'" class="markerInfo"><a class="imgLink" href="'+link+'">'+img+'</a><h2><a href="'+link+'">'+title+'</a></h2><p>'+excerpt+'</p><a class="markerLink" href="'+link+'"><?php _e('View Details','themolitor');?> &rarr;</a><div class="markerTotal">'+i+' / <span></span></div><div class="clear"></div></div></div>');
              jQuerybutton.mouseover(function(){
                  jQuerythis.gmap3({
                    action:'panTo', 
                    args:[marker.position]
                  });
                  jQuery("#target").stop(true,true).fadeIn(500).delay(500).fadeOut(500);
               });
              jQuery('#markers').append(jQuerybutton);
              var numbers = jQuery(".markerInfo").length;
              jQuery(".markerTotal span").html(numbers);
              if(i == 1){
                jQuery('.marker:first-child').addClass('activeMarker').mouseover();
              }
              jQuerythis.gmap3({
                action:'addOverlay',
                content: '<div id="markerTitle'+i+'" class="markerTitle">'+title+'</div>',
                latLng: marker.getPosition()
               });
            }           
          });
        }
});
//]]>
</script>

Answer 1

我也想知道如何实现而不必重写我的所有代码...