We are creating a site with WordPress that has a Gmaps system integrated to show the location of fishing spots. It’s populated by the posts associated with each state and by the longitude and latitude entered into custom fields. The map works fine. The problem is some states have 1000+ markers which causes some lag on page load and the markers are stacked all over each other making it ridiculous to use. What we’d like to do is instill a limit on the number of pins before it displays any markers at all. To clarify:
- California has 1000+ lakes but Arizona only has about 165, as an example. IF the total is more than 200 then a simple message should display to the visitor that there are “too many entries, please zoom in to view selections” or similar. Then,
- As they zoom in, it will recalculate the total and when it’s under 200 (or whatever limit we actually settle on, only so many states have more than that) then the markers would display according to the area zoomed into
The view when they arrive at the state page shows the entire state and all markers. If over 200 count then it should simply display the message to zoom in and so forth.Eventually there will be over 50,000 lakes listed so this modification will assist greatly in page load.
Here’s the code we’re currently working with that pulls the data and displays the map:
<script type="text/javascript">
jQuery(document).ready(function(){
function initialize() {
var myLatlng = new google.maps.LatLng(<?php echo $center_final; ?>);
var myOptions = {
zoom: <?php echo $zoom; ?>,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.<?php echo $type; ?>
};
var map = new google.maps.Map(document.getElementById("featured_overview"), myOptions);
<?php if(get_option('woo_maps_archive_scroll') == 'true'){ ?>
map.scrollwheel = false;
<?php } ?>
<?php foreach($coords as $c_key => $c_value) { ?>
var point = new google.maps.LatLng(<?php echo $c_value['coords']; ?>);
var root = "<?php bloginfo('template_url'); ?>";
var the_link = '<?php echo get_permalink($c_key); ?>';
<?php $title = str_replace(array('“','”'),'"',get_the_title($c_key)); ?>
<?php $title = str_replace('–','-',$title); ?>
<?php $title = str_replace('’',"`",$title); ?>
<?php $title = str_replace('&','&',$title); ?>
var the_title = '<?php echo html_entity_decode($title) ?>';
var color = '<?php echo $c_value['color']; ?>';
createMarker(map,point,root,the_link,the_title,color);
<?php } ?>
}
initialize();
});
</script>
ANY help would be greatly appreciated. Thanks in advance to anyone and everyone.
Why not use the MarkerClusterer library . It is designed exactly for these kind of scenarios, so you can set the resolution of the clustering and distances .
..and you can also bind events (if you insist on a number like 200).
(Actually, I have an un-released wordpress plugin who does just that – insert a map and fix clustering on a post basis)