Marker Optimization Tips
From Google Mapki
[edit] Only Draw the Points in the Area Viewport
If you have lots of points, it may be wise to only draw points that are in or around the viewport. Unless you have a high screen resolution or multiple monitors, it is unlikely the user will be able to drag more than one screen width / height in one go.
Use the map.getBoundsLatLng() to get the bounds, if you subtract the min value from the max value, you get how wide a screen is in lat/lng units. You can now subtract that from the min value and add it to the max value to work out what the coordinates are of a box that is one screen bigger in each direction of the viewport. Then query your database for only points within that box, and requery the database if the screen moves more than half a screen. Re-querying on smaller moves is pretty pointless.
[edit] Load Different Points at Different Zooms
If you have lots of points, especially close together, when zoomed far out, way too many may show, even if you only plot the ones in / around the viewport.
One way to alleviate this is to have a "max zoom" and a "min zoom" for any given point. Set the max zoom for the close together points to a zoomlevel where they start to be reasonably spaced. Then create another point with a minzoom one above that and a maxzoom of 17 (The furthest out you can zoom) then re-draw points on map zoom, and only show points with a max zoom equal to or less than the current zoomlevel and with a minzoom equal to or more the current zoomlevel.
That way, points clustered together will only be plotted as one point until you zoom in close enough to be able to differentiate one from the other anyway.
[edit] Add HTML to InfoWindows(Bubble) Using Click Event
Rather than, as per the documentation, creating the infowindow HTML for each point as you add the marker, create the HTML infowindow as part of the onclick event for the map. So, it would go something like this:
To create each marker:
var marker = new GMarker(point); // Show this marker's index in the info window when it is clicked var marker.myhtml = "Marker #" + number + "";
To handle map clicks: (You only need this once inside your listener for map clicks.)
GEvent.addListener(map, "click", function(overlay, point) {
if (overlay) {
// we now need a check here in case the overlay is the info window
// only our markers will have a .myhtml property
if (overlay.myhtml) {
overlay.openInfoWindowHtml(overlay.myhtml);
}
} else if (point) {
//whatever you want to happen if you don't click on an overlay.
}
});
From APIv2.63, the info window is an overlay and it will return map "click" events when clicked (e.g. when the user clicks on its close icon).
This would decrease loading times in some earlier versions of the API, but in v2.57 it gives no measurable difference. To make this even faster on load, don't even attach the html to the marker. Retrieve the html from another source when you click it.
Original tip from Jef Poskanzer via the Google Groups Google Maps API thread.
[edit] Preload the marker images
If MSIE doesn't have the marker images in its cache, then it sends a separate image request for every copy of the marker. You can fix this by preloading the images in your HTML like this
<img src = "http://www.google.com/intl/en_ALL/mapfiles/marker.png" style="display:none"> <img src = "http://www.google.com/intl/en_ALL/mapfiles/shadow50.png" style="display:none"> <img src = "http://www.google.com/intl/en_ALL/mapfiles/markerTransparent.png" style="display:none"> <img src = "http://www.google.com/intl/en_ALL/mapfiles/markerff.gif" style="display:none"> <img src = "http://www.google.com/intl/en_ALL/mapfiles/markerie.gif" style="display:none">
and moving all the code that adds your markers into an onload function, so that the Javascript doesn't start until after the preloading is complete.
This tip has no effect in Firefox, since it is smart enough not to send new requests for images that are already being requested, and has no effect if the marker images are already in the MSIE cache.
Do remember to go back and occasionally check to see if Google has changed the location of the marker images if you do this with the default marker.
[edit] Omit the shadows
Omitting the shadows from your markers will speed up the loading by about 20%.
[edit] Use TLabels as markers instead of GMarkers
See Using Tom Mangan's TLabel extension as markers
The downside is that you lose the shadows, lose the clickability when in the shadow of an info window and the markers don't automatically overlay each other in the right order. The latest TLabel sits on top of the earlier ones. In some circumstances you might consider that a reassonable price to pay for the considerable speed increase.
In API 2.57, in Firefox, TLabel markers load about 2.3 times faster than GMarkers. In MSIE they load about 3.1 times faster than GMarkers, and if you are prepared to use transparent GIFs as your marker that increases to 5.2 times faster since GIF files are rendered inside MSIE rather than being farmed out to the DirectX AlphaImageLoader.
[edit] Avoid versions 2.59 to 2.61a
A change was made in API v2.59 that causes markers to load in MSIE about 35% more slowly than previous versions. The marker loading speed in Firefox is the same as the previous versions.
A change was made in v2.62 that causes markers to load about 15% faster in Firefox and 45% faster in MSIE.
[edit] Use versions 2.64 and above
More improvements were made to the speed of addOverlay() and removeOverlay() in v2.64. See The Official Blog
[edit] Use GMarkerManager
GMarkerManager is new in v2.67.
GMarkerManager is very efficient when there are only a few markers in the viewport, whereas without GMarkerManager the performance is related to the total number of markers that have been addOverlay()ed, wether they are in view or not.
When all the markers are visible in the viewport, GMarkerManager runs at about the same speed as using addOverlay()s.
You could use GMarkerManager to switch off some of your markers when the map is zoomed out, even replacing them with a smaller number of cluster markers that only appear at low zoom levels.
