Sunday, January 17, 2010

Custom map types in v3

The latest version update (3.25) introduced custom map types for api v3. The interface is nice. If you are familiar with custom tile sets in v2, there are not many new things to learn. There are three types of custom tile based map types.
  • Image map type, like Open Streetmap tiles in the example page
  • Image overlay map type, like the Traffic tiles in the example page
  • Non-image tile based map type
Image Map Type behaves just like the standard map types. Image Overlay tiles are displayed on top of the Image Map Types. Both of them can be created using ImageMapType class. The difference is how you add the map type to your map. Either to mapTypes registry or to overlayMapTypes MVCArray. Both of them are properties of Map.

The non-image map type makes it possible to create tile layers with SVG, canvas or any html elements.

12 comments:

Mario said...

did you find any way to achieve http://koti.mbnet.fi/ojalesa/googlepages/black_white.htm in V3

-pistol

Esa said...

Yes. I added the label tiles of Hybrid and Terrain maps to the example.

Also buttons were added for white/black backgroundColor testing.

Mammouth said...

Work fine with ie7/ie8..

Artem said...

Thank you for this insightful post!

Do you know how to limit zoomMax and zoomMin for standard tiles? (ROADMAP, SATTELITE...)

Lorenzo Dee said...

Do you know the url for map maker tiles? I would like to use "map maker" tiles with version 3, just like using G_MAPMAKER_NORMAL_MAP with version 2. Thanks

nlraley said...

I found your post to be quite interesting and was actually accomplishing a few things I was looking to accomplish myself with the new api as I've gradually been trying to migrate my v2 code to the new api.

I have one question though as I am not very familiar with the OverlayMapTypes. How would you retrieve the LatLng coordinates of the user clicking on such an Overlay? The new api has altered the map "click" event so it no longer returns an overlay, latlng, overlaylatlng and instead just returns a latlng if you click on the map and not a marker or overlay. Any ideas?

Phillip said...

Esa, Can you please elaborate on this point:

"The non-image map type makes it possible to create tile layers with SVG, canvas or any html elements"

The google documentation on the image overlay options is unclear to me, and your mention of the html canvas sounds very useful. thanks

Phillip said...
This comment has been removed by the author.
MichelleL said...
This comment has been removed by the author.
MichelleL said...

In the developer document, it says it "Implementing a MapType to act as a base map type can be a time-consuming and laborious task."

Would you please provide an example to create the tile layers with SVG?

Kevin said...

What a great article. Thanks very much for posting an example. This REALLY help me. People like you are shinning knights of the internet.

Andrew Ferk said...

Have the Hybrid labels and Terrain labels layer changed in the past few years? The streets and labels display as expected, but the geometry fill is a solid.