添加集群到我的谷歌地图脚本

我正在尝试添加地图集群到我现有的脚本。

我想添加此代码，并将其混合到我现有的代码中。

代码-下面脚本的工作示例。https://googlemaps.github.io/js-marker-clusterer/examples/advanced_example.html

<script>
      var script = '<script type="text/javascript" src="../src/markerclusterer';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '_compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>
    <script>
      var styles = [[{
        url: '../images/people35.png',
        height: 35,
        width: 35,
        anchor: [16, 0],
        textColor: '#ff00ff',
        textSize: 10
      }, {
        url: '../images/people45.png',
        height: 45,
        width: 45,
        anchor: [24, 0],
        textColor: '#ff0000',
        textSize: 11
      }, {
        url: '../images/people55.png',
        height: 55,
        width: 55,
        anchor: [32, 0],
        textColor: '#ffffff',
        textSize: 12
      }], [{
        url: '../images/conv30.png',
        height: 27,
        width: 30,
        anchor: [3, 0],
        textColor: '#ff00ff',
        textSize: 10
      }, {
        url: '../images/conv40.png',
        height: 36,
        width: 40,
        anchor: [6, 0],
        textColor: '#ff0000',
        textSize: 11
      }, {
        url: '../images/conv50.png',
        width: 50,
        height: 45,
        anchor: [8, 0],
        textSize: 12
      }], [{
        url: '../images/heart30.png',
        height: 26,
        width: 30,
        anchor: [4, 0],
        textColor: '#ff00ff',
        textSize: 10
      }, {
        url: '../images/heart40.png',
        height: 35,
        width: 40,
        anchor: [8, 0],
        textColor: '#ff0000',
        textSize: 11
      }, {
        url: '../images/heart50.png',
        width: 50,
        height: 44,
        anchor: [12, 0],
        textSize: 12
      }]];
      var markerClusterer = null;
      var map = null;
      var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
          'chco=FFFFFF,008CFF,000000&ext=.png';
      function refreshMap() {
        if (markerClusterer) {
          markerClusterer.clearMarkers();
        }
        var markers = [];
        var markerImage = new google.maps.MarkerImage(imageUrl,
          new google.maps.Size(24, 32));
        for (var i = 0; i < 1000; ++i) {
          var latLng = new google.maps.LatLng(data.photos[i].latitude,
              data.photos[i].longitude)
          var marker = new google.maps.Marker({
            position: latLng,
            draggable: true,
            icon: markerImage
          });
          markers.push(marker);
        }
        var zoom = parseInt(document.getElementById('zoom').value, 10);
        var size = parseInt(document.getElementById('size').value, 10);
        var style = parseInt(document.getElementById('style').value, 10);
        zoom = zoom === -1 ? null : zoom;
        size = size === -1 ? null : size;
        style = style === -1 ? null: style;
        markerClusterer = new MarkerClusterer(map, markers, {
          maxZoom: zoom,
          gridSize: size,
          styles: styles[style]
        });
      }
      function initialize() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(39.91, 116.38),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var refresh = document.getElementById('refresh');
        google.maps.event.addDomListener(refresh, 'click', refreshMap);
        var clear = document.getElementById('clear');
        google.maps.event.addDomListener(clear, 'click', clearClusters);
        refreshMap();
      }
      function clearClusters(e) {
        e.preventDefault();
        e.stopPropagation();
        markerClusterer.clearMarkers();
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

然后我想把上面的代码和集群添加到我现有的代码下面。

<script type="text/javascript">
 $(document).ready(function() {
                    var mapCenter = new google.maps.LatLng(47.701829, -122.179969);
                    var map;
                 map_initialize(); 
        function map_initialize()
        {
                    var googleMapOptions = 
                    { 
                        center: mapCenter, // map center
                        zoom: 13,
                        maxZoom: 22,
                        minZoom: 10,
                            zoomControlOptions: {
                                style: google.maps.ZoomControlStyle.SMALL,
                                position: google.maps.ControlPosition.RIGHT_TOP
                        },
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            styles: [{
            stylers: [{
                saturation: -100
            }]
        }, {
            featureType: "water",
            elementType: "geometry.fill",
            stylers: [{
                color: "#0099dd"
            }]
        }, {
            elementType: "labels",
            stylers: [{
                visibility: "off"
            }]
        }, {
            featureType: "poi.park",
            elementType: "geometry.fill",
            stylers: [{
                color: "#aadd55"
            }]
        }, {
            featureType: "road.highway",
            elementType: "labels",
            stylers: [{
                visibility: "on"
            }]
        }, {
            featureType: "road.arterial",
            elementType: "labels.text",
            stylers: [{
                visibility: "on"
            }]
        }, {
            featureType: "road.local",
            elementType: "labels.text",
            stylers: [{
                visibility: "on"
            }]
        }, {}] 
                        };
                    map = new google.maps.Map(document.getElementById("map"), googleMapOptions);            
            $.get("map_process.php", function (data) {
                $(data).find("marker").each(function () {
                    var pin_firstname           = $(this).attr('pin_firstname');
                    var pincore_fulladdress     = '<p>'+ $(this).attr('pincore_fulladdress') +'</p>';
                    var pin_status              = $(this).attr('pin_status');
                    var point                   = new google.maps.LatLng(parseFloat($(this).attr('pincore_lat')),parseFloat($(this).attr('pincore_lng')));
                        create_marker(point, pin_firstname, pincore_fulladdress, false, false, false, "icons/pin_blue.png");
                });

            }); 
            google.maps.event.addListener(map, 'click', function(event) {
                    var EditForm = '<p><div class="marker-edit">'+
                                    '<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+
                                    '<label for="pPinStatus"><span>Status:</span> <select name="pPinStatus" class="save-type"><option value="Sold">SOLD</option><option value="Cancelled">Cancelled</option>'+
                                    '<option value="house">Rejected</option></select></label>'+
                                    '<label for="pFullName"><span>Customer Name:</span><input type="text" name="pFullName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+
                                    '<label for="pDesc"><span>Address :</span><textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>'+
                                    '</form>'+
                                    '</div></p><button name="save-marker" class="save-marker">Save Marker</button>';
                create_marker(event.latLng, 'Add New Pin', EditForm, true, true, true, "icons/pin_green.png");
            });
    }
    function create_marker(MapPos, MapTitle, MapDesc,  InfoOpenDefault, DragAble, Removable, iconPath, mType)
    {                 

                    var marker = new google.maps.Marker({
                        position: MapPos,
                        map: map,
                        draggable:DragAble,
                        animation: google.maps.Animation.DROP,
                        icon: iconPath
        });
                    var contentString = $('<div class="marker-info-win">'+
                                            '<div class="marker-inner-win"><span class="info-content">'+
                                            '<h1 class="marker-heading">'+mType+'</h1>'+
                                            MapTitle+
                                            MapDesc+
                                            '</span><button name="remove-marker" class="remove-marker">Remove Marker</button>'+
                                            '</div></div>');    

        var infowindow = new google.maps.InfoWindow();
        infowindow.setContent(contentString[0]);
        var removeBtn   = contentString.find('button.remove-marker')[0];
        var saveBtn     = contentString.find('button.save-marker')[0];
        google.maps.event.addDomListener(removeBtn, "click", function(event) {
            remove_marker(marker);
        });
        if(typeof saveBtn !== 'undefined') 
        {
            //add click listner to save marker button
            google.maps.event.addDomListener(saveBtn, "click", function(event) {
                var mReplace = contentString.find('span.info-content'); 
                var mName = contentString.find('input.save-name')[0].value; 
                var mDesc  = contentString.find('textarea.save-desc')[0].value; 
                var mType = contentString.find('select.save-type')[0].value;
                if(mName =='' || mDesc =='')
                {
                    alert("Please enter the correct information to disposition a new pin!");
                }else{
                    save_marker(marker, mName, mDesc, mType, mReplace); 
                }
            });
        }

        google.maps.event.addListener(marker, 'click', function() {
                var marker = new google.maps.Marker({
                        position: MapPos,
                        map: map,
                        animation: google.maps.Animation.DROP,
                        icon: iconPath

                });
                infowindow.open(map,marker); 
        });
        if(InfoOpenDefault) 
        {
          infowindow.open(map,marker);
        }
    }
    function remove_marker(Marker)
    {

        if(Marker.getDraggable()) 
        {
            Marker.setMap(null);
        }
        else
        {
            var mLatLang = Marker.getPosition().toUrlValue(); 
            var myData = {del : 'true', latlang : mLatLang};
            $.ajax({
              type: "POST",
              url: "map_process.php",
              data: myData,
              success:function(data){
                    Marker.setMap(null); 
                    alert(data);
                },
                error:function (xhr, ajaxOptions, thrownError){
                    alert(thrownError); 
                }
            });
        }
    }
    function save_marker(Marker, mName, mAddress, mType, replaceWin)
            {
                var mLatLang = Marker.getPosition().toUrlValue(); 
                var myData = {pin_firstname : mName, pincore_fulladdress : mAddress, latlang : mLatLang, pin_status : mType }; 
                    console.log(replaceWin);        
                        $.ajax({
                        type: "POST",
                        url: "map_process.php",
                        data: myData,
                    success:function(data){
                        replaceWin.html(data); 
                            Marker.setDraggable(false); 
                            Marker.setIcon('icons/pin_blue.png'); 
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError); 
            }
        });
    }
});
</script>

任何帮助将非常感激!!