Question

Hello i have this Gmap v3 code that shown the multiple markers (20 markers) only in Firefox and after a while not instantly.

    var geocoder;
var map;
//var map2;
var places = [];
var popup_price = [];
var popup_rooms = [];
var popup_area = [];
var popup_pic = [];
var popup_description = [];


var address = [];
var address_position = 0;

var timeout = 600;


var myStyles =[
    {
        featureType: "transit",
        elementType: "label",
        stylers: [
              { visibility: "on" }
        ]
    }
];
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(42.36741824284927, -71.071085890625);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: 'roadmap',
      streetViewControl: false,
      styles: myStyles 
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    addMarker(address_position);
}



function addMarker(position)
{
    geocoder.geocode({'address': address[position]}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK) {
         if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
            places[position] = results[0].geometry.location;
            //map.addOverlay(new MarkerLight(latlng, {image: "red_dot.png"})); if slow actual implemetation then follow http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/
            var marker = new google.maps.Marker({
                position: places[position],
                //content:html,
                map: map


            });


            // Creating an InfoWindow object
        var infowindow = new google.maps.InfoWindow({        
           content: '<div style="font-family:arial;font-size:11px;color:#333333;"><div style=float:left;width:83px;><img src=/listings/'+popup_pic[position]+'.jpg.rbm?w=80&h=80&f=cover > </div><div style=float:left;width:205px;text-align:justify;padding:5px;><strong>$'+popup_price[position] +'<br>'+popup_rooms[position]+'</strong><br>'+popup_area[position]+'<br>'+popup_description[position]+'...</div><div style="float:left;width:96px;"><img src="/upload/custom_screens/rb/viewBtnMap.gif" class="imgPopup"><img src="/upload/custom_screens/rb/saveBtnMap.gif" class="imgPopup"><img src="/upload/custom_screens/rb/reqBtnMap.gif" class="imgPopup"></div></div>',
          maxWidth: 400
        });
            google.maps.event.addListener(marker, 'click', function() 
            {
                infowindow.open(map, marker);
            });
            //infowindow.open(map,marker);

google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();

    if (zoomLevel >= 16) 
    {

        marker.setVisible(false);

        var circleOptions = 
        {
          strokeColor: "#c4c4c4",
          strokeOpacity: 0.35,
          strokeWeight: 0,
          fillColor: "#ca0d33",
          fillOpacity: 0.1,
          map: map,
          center: results[0].geometry.location,
          radius: 50
        };

        //add draw circle
         var circle = new google.maps.Circle(circleOptions);


        circle.bindTo('center', marker, 'position');



    }
    else
    {
    //circle.setMap(null);
    marker.setVisible(true);

    }
});

        }
        }
        else
        {
            if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT)
            {
                setTimeout(function() { addMarker(position); }, (timeout * 3));
            }
        }
        address_position++;
        if (address_position < address.length)
        {
            setTimeout(function() { addMarker(address_position); }, (timeout));
        }
    });

}

How i could improve the speed and make them work in IE and Chrome? I don’t receive any error in console .

thank you

Answer 1

Right now your map doesn’t show any markers for me, because address is empty. I was testing it with some values:

var address = ['Brookline','Wayland','Bedford'];

…and all 3 markers appear in IE, Chrome, FF & Opera.

However, the major problem is that you use addresses and not LatLng’s , because addresses first have to be requested by geocoding to get the LatLng, furthermore addresses are not unique, you may receive changing results(e.g. it may happen that the result returns a location somewhere else outside the viewport where you didn’t recognize it).

So if the addresses are known in your application you better store the LatLng’s of these addresses and show the markers based on these positions(should be faster too because you don’t need the geocoding)