Google Maps API Tutorial

Translate this page:

Using Google Maps API for Flat Maps and Diagrams

You might think that we can use the techniques in the previous examples to get the Google Map API to manage views of things that are not spherical maps, such as flat maps, diagrams and circuit boards. That would be fine as long as we don't want to draw markers or polylines on it.

Once we start drawing lines, we encounter the fact that all the maps we've looked at so far use the Mercator projection, which distorts the mapping geometry in order to represent a spherical Earth on a flat map.

The line on the "Mercator" map type in this example is a "straight" line that gets distorted into a curve due to the Mercator projection. You can imagine that such a distortion wouldn't be much use for dealing with things like circuit diagrams.

The "Euclidean" map type in the same example Note I don't move or redraw the markers or the polyline. When the map type changes, the API redraws all the overlays using the new projection.

Copyright strings

The GTileLayer.getCopyright() method must return an Object that has the following properties

prefix	String to be placed at the front of the copyright text, like "Map Data:" or "Satellite Imagery:"
copyrightTexts	Array of strings: Copyright texts that apply to various parts of the area.

The constructor and methods of the object class are not exposed, so it's not possible to construct the return value properly, but it is possible to return an anonymous object literal.

E.g., in the example, I've used

     tilelayers[0].getCopyright = function(a,b) {
        return {prefix:"Fractal: ©", copyrightTexts:["Mike Williams"]};
     }

Potential Pitfalls

The GScaleControl() and point.distanceFrom() features assume spherical geometry, so they're not going to be useful for non-Mercator maps.
The API calculates the polyline geometry at zoom level 17. This means that any GProjection used in a map that has polylines must be created with at least 18 zoom levels, even if the map itself has far fewer zoom levels.

Back to Mike's Homepage
Up to the start of this tutorial