Gmap3 – Dynamically serve map markers based on starting location

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
                        }
                    }
                }
            });
        }