Question

I have created a custom map using the Google Maps API v3. It’s a rectangular map of a fictional world, not of anything in the real world.

I have been reading articles on how to use Projections in custom Google Maps. I need to use a Projection because placing Markers and Regions using Projections, they do not repeat horizontally. Anyways, I pulled the following code from a tutorial:

var tilesize = 256;

function MyProjection(){}

MyProjection.prototype.fromLatLngToPoint = function(latLng)
{
    var x = latLng.lng() * tileSize;
    var y = latLng.lat() * tileSize;
    return new google.maps.Point(x, y);
};

MyProjection.prototype.fromPointToLatLng = function(point)
{
    var lng = point.x * (1.0 / tileSize);
    var lat = point.y * (1.0 / tileSize);
    return new google.maps.LatLng(lat, lng);
};

function LatLngToPixels(latLng)
{
    var pnt = MyProjection.prototype.fromLatLngToPoint(latLng);
    return [pnt.x * 8, pnt.y * 8];
}

function PixelsToLatLng(pxs)
{
    var pnt = {x: pxs[0] / 8, y: pxs[1] / 8};
    return MyProjection.prototype.fromPointToLatLng(pnt);
}

I’ve applied it to my map and it seems to work. However, I’m trying to figure out how to alter the scale of the projection. When I place a marker like this:

new google.maps.Marker(
{
    map: map,
    position: new google.maps.LatLng(0, 0)
});

The marker is placed at the top left corner of the map. If I do this:

new google.maps.Marker(
{
    map: map,
    position: new google.maps.LatLng(1, 1)
});

the marker is placed at the bottom right.

So I basically have a minimum longitude and latitude of 0 and a max of 1 to work with. How can I alter the above functions so that the scale is a bit more managable? Like 0 to 90 or 0 to 180? Something that makes a bit more sense in terms of real-world longitude and latitude coordinates? Or is that not possible with Projections? I’m a bit confused by the idea of projections and what exactly their ultimate purpose is so maybe I’m missing the point…

Answer 1

The purpose of a projection is to display a 3D object, (like a planet), on a 2D surface, (like a piece of paper or a computer screen).

Here is a Google example that contains a Mercator projection object. Note that the Google Maps API V3 uses the concept of World Coordinates with which the entire world is represented on a single tile of 256×256 pixels at zoom level 0, and then scaled up according to the zoom level, so that

pixelCoordinate = worldCoordinate * Math.pow(2,zoomLevel)