Back in May, we released a feature in Google Maps that let users toggle on additional "layers" of information on top of the map, starting with Panoramio and Wikipedia options. Both of these layers display thousands of variably sized icons on top of the map, and open info windows with more information about the clicked icon. So the user might click a large "W" in New York to read a snippet from Wikipedia's article about the Empire State Building, or they might click on a thumbnail in Black Rock City to see a photo of a Burning Man Temple.
Now, for those of you who want to easily enable these layers on your map (or through a custom control), you can create a new Layer object with the specified layer ID, and then add that to the map as an overlay. Check out the sample code and demo below, and read through the docs for more info:
map.addOverlay(new GLayer("com.panoramio.all"));map.addOverlay(new GLayer("org.wikipedia.en"));
Note: There are localized versions of the Wikipedia layers available in many languages. These will not be automatically served to users based on browser setting, so you should explicitly add those if your map is targeted at a local audience. See this spreadsheet for a full list of IDs.
For those of you developers wondering how these layers are able to display so many icons without slowing the browser down, here's some inside info for you. The layers are actually implemented as GTileLayerOverlays, where the tiles are just transparent PNGs with icons baked into them. The clickability of the layer is achieved by passing information about the clickable pixel bounds of each tile to the client, then doing a client-side check to figure out which bounds the cursor is inside on the map mousemove and click events, and changing the cursor or popping up the appropriate info window. If you're interested in implementing a similar solution for your own thousand-markered mashups, check out John Coryat's clickable tilelayer demo in the demo gallery, or the various presentations on creating custom maps.
Give us feedback in our Product Forums.
Follow