Gmap3 - Dynamically serve map markers based on starting location - wordpress

Question

On a map with 300+ markers, each with their own info box & imagery & data, loading the entire map & all the markers at once causes page speed issues.
here's an example - www.naturesoundmap.com/listing-type/nature-soundscape
What I would like to do is: Have the markers served dynamically based on a starting location & pre-determined zoom level.
See the above link for an example starting location - in this case I want the map to only load the 20 or so markers viewable on screen, not the 300+ markers from the entire planet. As the user scrolls to new areas of the map, new markers should load dynamically as their location comes into view.
I am using a Wordpress theme 'Explorable' by Elegant Themes so the following code is already a part of the theme.
As simple an explanation as possible would be much appreciated as I am a novice!
Thanks
Marc
Currently, this is the code I have (this is an excerpt - let me know if you need to see the entire file)
mapTypeId: google.maps.MapTypeId.<?php echo esc_js( strtoupper( et_get_option( 'explorable_map_type', 'Roadmap' ) ) ); ?>,
zoomControl: true,
zoomControlOptions: {
position : google.maps.ControlPosition.LEFT_BOTTOM,
style : google.maps.ZoomControlStyle.LARGE},
panControl: false,
streetViewControlOptions: {},
overviewMapControl: false,
overviewMapControlOptions: {
opened : false
},
scrollwheel: true,
streetViewControl: false,
mapTypeControl: false,
mapTypeControlOptions: {}
}
}
});
function et_add_marker( marker_order, marker_lat, marker_lng, marker_description ){
var marker_id = 'et_marker_' + marker_order;
$et_main_map.gmap3({
marker : {
id : marker_id,
latLng : [marker_lat, marker_lng],
options: {
icon : "<?php echo get_template_directory_uri(); ?>/images/red-marker.png"
},
events : {
click: function( marker ){
if ( et_active_marker ){
et_active_marker.setAnimation( null );
et_active_marker.setIcon( '<?php echo get_template_directory_uri(); ?>/images/red-marker.png' );
}
et_active_marker = marker;
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function(){ marker.setAnimation(null); }, 3750);
marker.setIcon( '<?php echo get_template_directory_uri(); ?>/images/blue-marker.png' );
$(this).gmap3("get").panTo( marker.position );
$.fn.et_simple_slider.external_move_to( marker_order );
},
mouseover: function( marker ){
$( '#' + marker_id ).css( { 'display' : 'block', 'opacity' : 0 } ).stop(true,true).animate( { bottom : '15px', opacity : 1 }, 500 );
},
mouseout: function( marker ){
$( '#' + marker_id ).stop(true,true).animate( { bottom : '50px', opacity : 0 }, 500, function() {
$(this).css( { 'display' : 'none' } );
} );
}
}
},
overlay : {
latLng : [marker_lat, marker_lng],
options : {
content : marker_description,
offset : {
y:-42,
x:-122
}
}
}
});
}

Answer 1

It looks like you're calling et_add_marker() each time for the 320 or so points. Perhaps if you can figure out a way to load the point data in a KML file and iterate through each item that would boost speed?
How are the data points managed - in Wordpress as a custom post, or are you hard coding them into your theme?