Hybrid static / dynamic google map
Ever notice that when you go to maps.google.com and do a search (like a car wash) it gives a lot of results (represented by small circles) and a few famous ones (like regular contacts)?
Notice how fast it happens?
From what I can tell by parsing this in Firebug, most of this is generated on the server and sent to the client as a static image.
However, it is still dynamic. You can zoom in and out, or click on the result and see the dynamic rendering of the InfoWindow.
Google has made the map fast and fluid by using static images while still making it flexible.
Is there a way to make this "preload" my own Google Map (implemented using the Google Maps API)?
source to share
The technology used by maps.google.com is similar to that used by GLayer. The server dynamically generates chunks and hotspot information. GLayer's slabs are also dynamically built (and possibly cached), although the underlying data is pretty static. On the client side, the point search technology is the same as Wikipedia or Panoramio GLayer. The only new trick is that point information is generated dynamically on large Google servers.
The API does not yet provide any tools for creating custom GLayers. If you want to do the same yourself using your own location database, you need to run the following three codes:
-
Create your own timer server that looks up your database for items in a tile area and uses a graphics library like gd or imagemagic to place points on the tile. Use these tiles to create a GTileLayerOverlay on the client.
-
When the user clicks on the map, send the location of that click to the second server. This server should check its database and return infowindow text for this point location, if any. Fetching the entire infowindow content from all points rendered by the tile server would be unacceptably slow, so you must retrieve them one at a time if necessary.
-
Changing the cursor when using the mouse over a point is more complex. What google do returns a list of hotspots coordinates for all points on each tile. Whenever the mouse is moved, the API determines which tile the pointer has ended and uses a quadrant algorithm to see if the pointer is over a hotspot and change if necessary. If you only have a small number of hotspots per tile, then a linear search is probably reasonably fast. If you can have thousands of points per chunk, you probably need to write your own quadrant algorithm. Google quadtree code is not displayed, so you cannot use it.
Here's a page where someone did it. In this case, hotspots are calculated as circles, comparing the distance from the center point, even if the points are square. On maps.google.com hotspots are computed as rectangles using GBounds.containsPoint (), although the points are rounded.
source to share
I do something similar, but instead using a tiled layer, I just send the cluster markers to the browser on every view change. If your data is static, you can pre-copy your markers and it will be incredibly fast with tens of thousands of markers.
Our site cannot use pre-clustering because markers can be searched and filtered, but still pretty fast up to 20,000 markers. Still working on it ...
source to share