Not all markers are showing in Google Maps API

Question

I know there are a lot of topics regarding this problem, but I've tried everything and still no solution to my problem.

I'm trying to display my members on a google map according to their location. The problem is that although there are 34 members registered, only 15-22 (randomly chosen with every refresh) markers are shown.

The addresses are geocoded correctly, since if I enter the members page its marker shows up on the map correclty. I believe it is some problem with the data load, but I have no idea how to solve it.

I'm using the swmap plugin on a Joomla site. The JQuery code is listed below.

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language='.$locale.'"></script> 
    <script type="text/javascript">
    window.addEvent("load",function(){initialize();});
    var beaches = '.json_encode($res).';
    function initialize() {
        var myLatlng = new google.maps.LatLng('.$lat_center.', '.$long_center.');
        var myOptions = {
        zoom: 10,
        center: myLatlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.'.$cattype.'
        }

        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        google.maps.event.addListener(map, \'click\', function() {
        infowindow.close();
        });
        setMarkers(map, beaches);
    }

        var icons = new Array();
        icons["red"] = new google.maps.MarkerImage("'. JURI::root() .'plugins/k2/swmap/'.$color.'/landmark.png",
        new google.maps.Size(32, 32),
        new google.maps.Point(0,0),
        new google.maps.Point(0, 32));

    function getMarkerImage(iconColor) {
    if ((typeof(iconColor)=="undefined") || (iconColor==null)) {
    iconColor = "red";
    }

    if (!icons[iconColor]) {
    icons[iconColor] = new google.maps.MarkerImage("'. JURI::root() .'plugins/k2/swmap/'.$color.'/"+ iconColor +"",
    new google.maps.Size(32, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
    }

    return icons[iconColor];
    }

    var iconImage = new google.maps.MarkerImage(\''. JURI::root() .'plugins/k2/swmap/'.$color.'/landmark.png\',
    new google.maps.Size(32, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));

    var infowindow = new google.maps.InfoWindow(
    {
    size: new google.maps.Size(150,50)
    });

    function createMarker(map, latlng, label,link, html, color) {

        var contentString = \'<b>\'+link+\'</b><br>\'+html;
        var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: getMarkerImage(color),
        title: label,
        zIndex: Math.round(latlng.lat()*-100000)<<5
    });

    google.maps.event.addListener(marker, \'click\', function() {
    infowindow.setContent(contentString);
    infowindow.open(map,marker);
    });
}



function setMarkers(map, locations) {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = createMarker(map,myLatLng,beach[0],beach[5],beach[4],beach[3]);
    bounds.extend(myLatLng);
    map.fitBounds(bounds);
}
}

Answer 1

See this article on Geocoding Strategies from the documentation

Best practice is to store the coordinates of locations that don't change and use them to display the markers. Use the client side geocoder to only geocode information entered by a user when entered.