myersjustinc/mercator.html

## mercator.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Mercator craziness</title>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">//<![CDATA[
            var map;
            var circles = [];

            function degToRad(degrees) {return degrees * Math.PI / 180;}

            function scaleFactor(latitude) {
                return Math.cos(degToRad(latitude));
            }

            function drawCircle(latitude) {
                circles.push(new google.maps.Circle({
                    center: new google.maps.LatLng(latitude, 0),
                    fillColor: '#990000',
                    fillOpacity: 0.5,
                    map: map,
                    radius: 1000000 * scaleFactor(latitude),
                    strokeWeight: 0
                }));
            }

            window.onload = function() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 1,
                    center: new google.maps.LatLng(0, 0),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                for (var i = 0; i < 9; i++) {
                    var latitude = i * 10;
                    if (i % 2) {latitude = latitude * -1;}
                    drawCircle(latitude);
                }
            };
        //]]></script>
        <style type="text/css">/*<![CDATA[*/
            #map {
                height: 320px;
                width: 480px;
            }
        /*]]>*/</style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Mercator craziness</title>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">//<![CDATA[
	var map;
	var circles = [];

	function degToRad(degrees) {return degrees * Math.PI / 180;}

	function scaleFactor(latitude) {
	return Math.cos(degToRad(latitude));
	}

	function drawCircle(latitude) {
	circles.push(new google.maps.Circle({
	center: new google.maps.LatLng(latitude, 0),
	fillColor: '#990000',
	fillOpacity: 0.5,
	map: map,
	radius: 1000000 * scaleFactor(latitude),
	strokeWeight: 0
	}));
	}

	window.onload = function() {
	map = new google.maps.Map(document.getElementById('map'), {
	zoom: 1,
	center: new google.maps.LatLng(0, 0),
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	for (var i = 0; i < 9; i++) {
	var latitude = i * 10;
	if (i % 2) {latitude = latitude * -1;}
	drawCircle(latitude);
	}
	};
	//]]></script>
	<style type="text/css">/<![CDATA[/
	#map {
	height: 320px;
	width: 480px;
	}
	/]]>/</style>
	</head>
	<body>
	<div id="map"></div>
	</body>
	</html>