gmaps: map-coordinates.html@b014e6b2a9e2

     3 <!DOCTYPE html>

     4 <html>

     5   <head>

     6     <title>Showing pixel and tile coordinates</title>

     7     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

     8     <meta charset="utf-8">

     9     <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">

    10     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    11     <script>

    12 var map;

    13 var TILE_SIZE = 256;

    14 var chicago = new google.maps.LatLng(41.850033,-87.6500523);

    16 function bound(value, opt_min, opt_max) {

    17   if (opt_min != null) value = Math.max(value, opt_min);

    18   if (opt_max != null) value = Math.min(value, opt_max);

    19   return value;

    20 }

    22 function degreesToRadians(deg) {

    23   return deg * (Math.PI / 180);

    24 }

    26 function radiansToDegrees(rad) {

    27   return rad / (Math.PI / 180);

    28 }

    30 /** @constructor */

    31 function MercatorProjection() {

    32   this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2,

    33       TILE_SIZE / 2);

    34   this.pixelsPerLonDegree_ = TILE_SIZE / 360;

    35   this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);

    36 }

    38 MercatorProjection.prototype.fromLatLngToPoint = function(latLng,

    39     opt_point) {

    40   var me = this;

    41   var point = opt_point || new google.maps.Point(0, 0);

    42   var origin = me.pixelOrigin_;

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

    46   // Truncating to 0.9999 effectively limits latitude to 89.189. This is

    47   // about a third of a tile past the edge of the world tile.

    48   var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999,

    49       0.9999);

    50   point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) *

    51       -me.pixelsPerLonRadian_;

    52   return point;

    53 };

    55 MercatorProjection.prototype.fromPointToLatLng = function(point) {

    56   var me = this;

    57   var origin = me.pixelOrigin_;

    58   var lng = (point.x - origin.x) / me.pixelsPerLonDegree_;

    59   var latRadians = (point.y - origin.y) / -me.pixelsPerLonRadian_;

    60   var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) -

    61       Math.PI / 2);

    62   return new google.maps.LatLng(lat, lng);

    63 };

    65 function createInfoWindowContent() {

    66   var numTiles = 1 << map.getZoom();

    67   var projection = new MercatorProjection();

    68   var worldCoordinate = projection.fromLatLngToPoint(chicago);

    69   var pixelCoordinate = new google.maps.Point(

    70       worldCoordinate.x * numTiles,

    71       worldCoordinate.y * numTiles);

    72   var tileCoordinate = new google.maps.Point(

    73       Math.floor(pixelCoordinate.x / TILE_SIZE),

    74       Math.floor(pixelCoordinate.y / TILE_SIZE));

    76   return [

    77     'Chicago, IL',

    78     'LatLng: ' + chicago.lat() + ' , ' + chicago.lng(),

    79     'World Coordinate: ' + worldCoordinate.x + ' , ' +

    80       worldCoordinate.y,

    81     'Pixel Coordinate: ' + Math.floor(pixelCoordinate.x) + ' , ' +

    82       Math.floor(pixelCoordinate.y),

    83     'Tile Coordinate: ' + tileCoordinate.x + ' , ' +

    84       tileCoordinate.y + ' at Zoom Level: ' + map.getZoom()

    85   ].join('<br>');

    86 }

    88 function initialize() {

    89   var mapOptions = {

    90     zoom: 3,

    91     center: chicago,

    92     mapTypeId: google.maps.MapTypeId.ROADMAP

    93   };

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

    96       mapOptions);

    98   var coordInfoWindow = new google.maps.InfoWindow();

    99   coordInfoWindow.setContent(createInfoWindowContent());

   100   coordInfoWindow.setPosition(chicago);

   101   coordInfoWindow.open(map);

   103   google.maps.event.addListener(map, 'zoom_changed', function() {

   104     coordInfoWindow.setContent(createInfoWindowContent());

   105     coordInfoWindow.open(map);

   106   });

   107 }

   109 google.maps.event.addDomListener(window, 'load', initialize);

   111     </script>

   112   </head>

   113   <body>

   114     <div id="map-canvas"></div>

   115   </body>

   116 </html>

author	sl
	Wed, 09 Apr 2014 19:55:16 +0200
changeset 2	b014e6b2a9e2
permissions	-rw-r--r--