GoogleMapsV3 Coordinate Systems

Examples from Google SIte: coordinate systems, infoWindow

by David McClelland

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true&amp;dummy=.js"></script>
<div id="map-canvas">loading map</div>

CSS

html {
      height: 100%
  }
  body {
      height: 100%;
      margin: 0;
      padding: 0
  }
  #map-canvas {
      width:100%;
      height:100%;
  }

JavaScript

var map;


function initialize() {
    var mapOptions = {
        zoom: 3,
        center: newyork,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var coordInfoWindow = new google.maps.InfoWindow();
    coordInfoWindow.setContent(createInfoWindowContent());
    coordInfoWindow.setPosition(newyork);
    coordInfoWindow.open(map);

    google.maps.event.addListener(map, 'zoom_changed', function () {
        coordInfoWindow.setContent(createInfoWindowContent());
        coordInfoWindow.open(map);
    });
}

var TILE_SIZE = 256;
var newyork = new google.maps.LatLng(40.7143528,-74.0059731);

function bound(value, opt_min, opt_max) {
  if (opt_min != null) value = Math.max(value, opt_min);
  if (opt_max != null) value = Math.min(value, opt_max);
  return value;
}

function degreesToRadians(deg) {
  return deg * (Math.PI / 180);
}

function radiansToDegrees(rad) {
  return rad / (Math.PI / 180);
}

/** @constructor */
function MercatorProjection() {
  this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2,
      TILE_SIZE / 2);
  this.pixelsPerLonDegree_ = TILE_SIZE / 360;
  this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);
}

MercatorProjection.prototype.fromLatLngToPoint = function(latLng,
    opt_point) {
  var me = this;
  var point = opt_point || new google.maps.Point(0, 0);
  var origin = me.pixelOrigin_;

  point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;

  // Truncating to 0.9999 effectively limits latitude to 89.189. This is
  // about a third of a tile past the edge of the world tile.
  var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999,
      0.9999);
  point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) *
      -me.pixelsPerLonRadian_;
  return point;
};

MercatorProjection.prototype.fromPointToLatLng = function(point) {
  var me = this;
  var origin = me.pixelOrigin_;
  var lng = (point.x - origin.x) /...