I have a wordpress site that is using a google maps widget to display the location of golf courses. http://publicaccessgolf.com.au It has over 1500 courses marked on the map which understandably makes the site very slow to load. I am trying to implement markerClusterer into my map but being an absolute javascript and google map novice, I have no idea how to do this. Below is the code for the map that I am using. Any help is greatly appreciated... // =============================== Google Map V3 Home page====================================== class googlemmap_homepage extends WP_Widget { function googlemmap_homepage() { //Constructor $widget_ops = array('classname' => 'widget Google Map in Home page', 'description' => __('Google Map in Home page. It will show you google map V3 for Home page with category checkbox selection.') ); $this->WP_Widget('googlemmapwidget_home', __('PT → Google Map V3 - Home page'), $widget_ops); } function widget($args, $instance) { // prints the widget extract($args, EXTR_SKIP); $width = empty($instance['width']) ? '940' : apply_filters('widget_width', $instance['width']); $heigh = empty($instance['heigh']) ? '425' : apply_filters('widget_heigh', $instance['heigh']); $catarr = get_category_home(); $catname_arr = $catarr[0]; $catinfo_arr = $catarr[1]; ?> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/map/markermanager.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/map/markerclusterer_packed.js"></script> <script type="text/javascript"> var CITY_MAP_CENTER_LAT= '<?php echo get_current_city_lat();?>'; var CITY_MAP_CENTER_LNG= '<?php echo get_current_city_lng();?>'; var CITY_MAP_ZOOMING_FACT= <?php echo get_current_city_scale_factor();?>; var CITY_MAP_VIEW_TYPE = ''; /** * Data for the markers consisting of a name, a LatLng and a pin image, message box content for * the order in which these markers should display on top of each * other. */ var markers = {<?php echo $catinfo_arr;?>}; var map = null; var mgr = null; var mc = null; var markerClusterer = null; var showMarketManager = false; if(CITY_MAP_CENTER_LAT=='') { var CITY_MAP_CENTER_LAT = 34; } if(CITY_MAP_CENTER_LNG=='') { var CITY_MAP_CENTER_LNG = 0; } if(CITY_MAP_CENTER_LAT!='' && CITY_MAP_CENTER_LNG!='' && CITY_MAP_ZOOMING_FACT=='') { var CITY_MAP_ZOOMING_FACT = 13; }else if(CITY_MAP_ZOOMING_FACT=='') { var CITY_MAP_ZOOMING_FACT = 3; } var PIN_POINT_ICON_HEIGHT = 32; var PIN_POINT_ICON_WIDTH = 20; if(CITY_MAP_VIEW_TYPE=='TERRAIN') { var maptype= google.maps.MapTypeId.TERRAIN; }else if(CITY_MAP_VIEW_TYPE=='SATELLITE') { var maptype= google.maps.MapTypeId.SATELLITE; }else if(CITY_MAP_VIEW_TYPE=='') { var maptype= google.maps.MapTypeId.ROADMAP; } if(MAP_DISABLE_SCROLL_WHEEL_FLAG) { var MAP_DISABLE_SCROLL_WHEEL_FLAG = 'No'; } function setCategoryVisiblity( category, visible ) { var i; if ( mgr && category in markers ) { for( i = 0; i < markers[category].length; i += 1 ) { if ( visible ) { mgr.addMarker( markers[category][i], 0 ); } else { mgr.removeMarker( markers[category][i], 0 ); } } mgr.refresh(); } } function initialize() { var myOptions = { zoom: CITY_MAP_ZOOMING_FACT, center: new google.maps.LatLng(CITY_MAP_CENTER_LAT, CITY_MAP_CENTER_LNG), mapTypeId: maptype } map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); mgr = new MarkerManager( map ); google.maps.event.addListener(mgr, 'loaded', function() { if (markers) { for (var level in markers) { google.maps.event.addDomListener( document.getElementById( level ), 'click', function() { setCategoryVisiblity( this.id, this.checked ); }); for (var i = 0; i < markers[level].length; i++) { var details = markers[level][i]; var image = new google.maps.MarkerImage(details.icons,new google.maps.Size(PIN_POINT_ICON_WIDTH, PIN_POINT_ICON_HEIGHT)); var myLatLng = new google.maps.LatLng(details.location[0], details.location[1]); markers[level][i] = new google.maps.Marker({ title: details.name, position: myLatLng, icon: image, clickable: true, draggable: false, flat: true }); attachMessage(markers[level][i], details.message); } mgr.addMarkers( markers[level], 0 ); } mgr.refresh(); } }); // but that message is not within the marker's instance data function attachMessage(marker, msg) { var infowindow = new google.maps.InfoWindow( { content: String(msg) }); var myEventListener = google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } } google.maps.event.addDomListener(window, 'load', initialize); </script> PHP:
The page has almost 800 KB. Are there performance differencies when you run the web from your local webserver instead of using your webhosting? Slow part can be also at PHP side. If I were you I would start adding prints with times when functions are done. This will find slowest part of the code which should be repaired.