1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/map-coordinates.html Wed Apr 09 12:36:39 2014 +0200
1.3 @@ -0,0 +1,117 @@
1.4 +
1.5 +
1.6 +<!DOCTYPE html>
1.7 +<html>
1.8 + <head>
1.9 + <title>Showing pixel and tile coordinates</title>
1.10 + <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
1.11 + <meta charset="utf-8">
1.12 + <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
1.13 + <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
1.14 + <script>
1.15 +var map;
1.16 +var TILE_SIZE = 256;
1.17 +var chicago = new google.maps.LatLng(41.850033,-87.6500523);
1.18 +
1.19 +function bound(value, opt_min, opt_max) {
1.20 + if (opt_min != null) value = Math.max(value, opt_min);
1.21 + if (opt_max != null) value = Math.min(value, opt_max);
1.22 + return value;
1.23 +}
1.24 +
1.25 +function degreesToRadians(deg) {
1.26 + return deg * (Math.PI / 180);
1.27 +}
1.28 +
1.29 +function radiansToDegrees(rad) {
1.30 + return rad / (Math.PI / 180);
1.31 +}
1.32 +
1.33 +/** @constructor */
1.34 +function MercatorProjection() {
1.35 + this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2,
1.36 + TILE_SIZE / 2);
1.37 + this.pixelsPerLonDegree_ = TILE_SIZE / 360;
1.38 + this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);
1.39 +}
1.40 +
1.41 +MercatorProjection.prototype.fromLatLngToPoint = function(latLng,
1.42 + opt_point) {
1.43 + var me = this;
1.44 + var point = opt_point || new google.maps.Point(0, 0);
1.45 + var origin = me.pixelOrigin_;
1.46 +
1.47 + point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;
1.48 +
1.49 + // Truncating to 0.9999 effectively limits latitude to 89.189. This is
1.50 + // about a third of a tile past the edge of the world tile.
1.51 + var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999,
1.52 + 0.9999);
1.53 + point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) *
1.54 + -me.pixelsPerLonRadian_;
1.55 + return point;
1.56 +};
1.57 +
1.58 +MercatorProjection.prototype.fromPointToLatLng = function(point) {
1.59 + var me = this;
1.60 + var origin = me.pixelOrigin_;
1.61 + var lng = (point.x - origin.x) / me.pixelsPerLonDegree_;
1.62 + var latRadians = (point.y - origin.y) / -me.pixelsPerLonRadian_;
1.63 + var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) -
1.64 + Math.PI / 2);
1.65 + return new google.maps.LatLng(lat, lng);
1.66 +};
1.67 +
1.68 +function createInfoWindowContent() {
1.69 + var numTiles = 1 << map.getZoom();
1.70 + var projection = new MercatorProjection();
1.71 + var worldCoordinate = projection.fromLatLngToPoint(chicago);
1.72 + var pixelCoordinate = new google.maps.Point(
1.73 + worldCoordinate.x * numTiles,
1.74 + worldCoordinate.y * numTiles);
1.75 + var tileCoordinate = new google.maps.Point(
1.76 + Math.floor(pixelCoordinate.x / TILE_SIZE),
1.77 + Math.floor(pixelCoordinate.y / TILE_SIZE));
1.78 +
1.79 + return [
1.80 + 'Chicago, IL',
1.81 + 'LatLng: ' + chicago.lat() + ' , ' + chicago.lng(),
1.82 + 'World Coordinate: ' + worldCoordinate.x + ' , ' +
1.83 + worldCoordinate.y,
1.84 + 'Pixel Coordinate: ' + Math.floor(pixelCoordinate.x) + ' , ' +
1.85 + Math.floor(pixelCoordinate.y),
1.86 + 'Tile Coordinate: ' + tileCoordinate.x + ' , ' +
1.87 + tileCoordinate.y + ' at Zoom Level: ' + map.getZoom()
1.88 + ].join('<br>');
1.89 +}
1.90 +
1.91 +function initialize() {
1.92 + var mapOptions = {
1.93 + zoom: 3,
1.94 + center: chicago,
1.95 + mapTypeId: google.maps.MapTypeId.ROADMAP
1.96 + };
1.97 +
1.98 + map = new google.maps.Map(document.getElementById('map-canvas'),
1.99 + mapOptions);
1.100 +
1.101 + var coordInfoWindow = new google.maps.InfoWindow();
1.102 + coordInfoWindow.setContent(createInfoWindowContent());
1.103 + coordInfoWindow.setPosition(chicago);
1.104 + coordInfoWindow.open(map);
1.105 +
1.106 + google.maps.event.addListener(map, 'zoom_changed', function() {
1.107 + coordInfoWindow.setContent(createInfoWindowContent());
1.108 + coordInfoWindow.open(map);
1.109 + });
1.110 +}
1.111 +
1.112 +google.maps.event.addDomListener(window, 'load', initialize);
1.113 +
1.114 + </script>
1.115 + </head>
1.116 + <body>
1.117 + <div id="map-canvas"></div>
1.118 + </body>
1.119 +</html>
1.120 +
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
2.2 +++ b/map-geolocation.html Wed Apr 09 12:36:39 2014 +0200
2.3 @@ -0,0 +1,75 @@
2.4 +
2.5 +
2.6 +<!DOCTYPE html>
2.7 +<html>
2.8 + <head>
2.9 + <title>Geolocation</title>
2.10 + <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
2.11 + <meta charset="utf-8">
2.12 + <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
2.13 + <!--
2.14 + Include the maps javascript with sensor=true because this code is using a
2.15 + sensor (a GPS locator) to determine the user's location.
2.16 + See: https://developers.google.com/apis/maps/documentation/javascript/basics#SpecifyingSensor
2.17 + -->
2.18 + <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
2.19 +
2.20 + <script>
2.21 +var map;
2.22 +
2.23 +function initialize() {
2.24 + var mapOptions = {
2.25 + zoom: 6,
2.26 + mapTypeId: google.maps.MapTypeId.ROADMAP
2.27 + };
2.28 + map = new google.maps.Map(document.getElementById('map-canvas'),
2.29 + mapOptions);
2.30 +
2.31 + // Try HTML5 geolocation
2.32 + if(navigator.geolocation) {
2.33 + navigator.geolocation.getCurrentPosition(function(position) {
2.34 + var pos = new google.maps.LatLng(position.coords.latitude,
2.35 + position.coords.longitude);
2.36 +
2.37 + var infowindow = new google.maps.InfoWindow({
2.38 + map: map,
2.39 + position: pos,
2.40 + content: 'Location found using HTML5.'
2.41 + });
2.42 +
2.43 + map.setCenter(pos);
2.44 + }, function() {
2.45 + handleNoGeolocation(true);
2.46 + });
2.47 + } else {
2.48 + // Browser doesn't support Geolocation
2.49 + handleNoGeolocation(false);
2.50 + }
2.51 +}
2.52 +
2.53 +function handleNoGeolocation(errorFlag) {
2.54 + if (errorFlag) {
2.55 + var content = 'Error: The Geolocation service failed.';
2.56 + } else {
2.57 + var content = 'Error: Your browser doesn\'t support geolocation.';
2.58 + }
2.59 +
2.60 + var options = {
2.61 + map: map,
2.62 + position: new google.maps.LatLng(60, 105),
2.63 + content: content
2.64 + };
2.65 +
2.66 + var infowindow = new google.maps.InfoWindow(options);
2.67 + map.setCenter(options.position);
2.68 +}
2.69 +
2.70 +google.maps.event.addDomListener(window, 'load', initialize);
2.71 +
2.72 + </script>
2.73 + </head>
2.74 + <body>
2.75 + <div id="map-canvas"></div>
2.76 + </body>
2.77 +</html>
2.78 +
3.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
3.2 +++ b/map-simple-async.html Wed Apr 09 12:36:39 2014 +0200
3.3 @@ -0,0 +1,38 @@
3.4 +
3.5 +
3.6 +<!DOCTYPE html>
3.7 +<html>
3.8 + <head>
3.9 + <title>Asynchronous Loading</title>
3.10 + <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
3.11 + <meta charset="utf-8">
3.12 + <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
3.13 + <script>
3.14 +function initialize() {
3.15 + var mapOptions = {
3.16 + zoom: 8,
3.17 + center: new google.maps.LatLng(-34.397, 150.644),
3.18 + mapTypeId: google.maps.MapTypeId.ROADMAP
3.19 + };
3.20 +
3.21 + var map = new google.maps.Map(document.getElementById('map-canvas'),
3.22 + mapOptions);
3.23 +}
3.24 +
3.25 +function loadScript() {
3.26 + var script = document.createElement('script');
3.27 + script.type = 'text/javascript';
3.28 + script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
3.29 + 'callback=initialize';
3.30 + document.body.appendChild(script);
3.31 +}
3.32 +
3.33 +window.onload = loadScript;
3.34 +
3.35 + </script>
3.36 + </head>
3.37 + <body>
3.38 + <div id="map-canvas"></div>
3.39 + </body>
3.40 +</html>
3.41 +
4.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
4.2 +++ b/map-simple-refresh.html Wed Apr 09 12:36:39 2014 +0200
4.3 @@ -0,0 +1,40 @@
4.4 +
4.5 +
4.6 +<!DOCTYPE html>
4.7 +<html>
4.8 + <head>
4.9 + <title>Simple Map</title>
4.10 + <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
4.11 + <meta charset="utf-8">
4.12 + <style>
4.13 + html, body, #map-canvas {
4.14 + margin: 0;
4.15 + padding: 0;
4.16 + height: 100%;
4.17 + }
4.18 + </style>
4.19 + <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
4.20 + <script>
4.21 +// Enable the visual refresh
4.22 +google.maps.visualRefresh = true;
4.23 +
4.24 +var map;
4.25 +function initialize() {
4.26 + var mapOptions = {
4.27 + zoom: 8,
4.28 + center: new google.maps.LatLng(-34.397, 150.644),
4.29 + mapTypeId: google.maps.MapTypeId.ROADMAP
4.30 + };
4.31 + map = new google.maps.Map(document.getElementById('map-canvas'),
4.32 + mapOptions);
4.33 +}
4.34 +
4.35 +google.maps.event.addDomListener(window, 'load', initialize);
4.36 +
4.37 + </script>
4.38 + </head>
4.39 + <body>
4.40 + <div id="map-canvas"></div>
4.41 + </body>
4.42 +</html>
4.43 +
5.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
5.2 +++ b/map-simple.html Wed Apr 09 12:36:39 2014 +0200
5.3 @@ -0,0 +1,37 @@
5.4 +
5.5 +
5.6 +<!DOCTYPE html>
5.7 +<html>
5.8 + <head>
5.9 + <title>Simple Map</title>
5.10 + <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
5.11 + <meta charset="utf-8">
5.12 + <style>
5.13 + html, body, #map-canvas {
5.14 + margin: 0;
5.15 + padding: 0;
5.16 + height: 100%;
5.17 + }
5.18 + </style>
5.19 + <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
5.20 + <script>
5.21 +var map;
5.22 +function initialize() {
5.23 + var mapOptions = {
5.24 + zoom: 8,
5.25 + center: new google.maps.LatLng(-34.397, 150.644),
5.26 + mapTypeId: google.maps.MapTypeId.ROADMAP
5.27 + };
5.28 + map = new google.maps.Map(document.getElementById('map-canvas'),
5.29 + mapOptions);
5.30 +}
5.31 +
5.32 +google.maps.event.addDomListener(window, 'load', initialize);
5.33 +
5.34 + </script>
5.35 + </head>
5.36 + <body>
5.37 + <div id="map-canvas"></div>
5.38 + </body>
5.39 +</html>
5.40 +
6.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
6.2 +++ b/marker-simple.html Wed Apr 09 12:36:39 2014 +0200
6.3 @@ -0,0 +1,36 @@
6.4 +
6.5 +
6.6 +<!DOCTYPE html>
6.7 +<html>
6.8 + <head>
6.9 + <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6.10 + <meta charset="utf-8">
6.11 + <title>Simple markers</title>
6.12 + <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
6.13 + <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
6.14 + <script>
6.15 +function initialize() {
6.16 + var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
6.17 + var mapOptions = {
6.18 + zoom: 4,
6.19 + center: myLatlng,
6.20 + mapTypeId: google.maps.MapTypeId.ROADMAP
6.21 + }
6.22 + var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
6.23 +
6.24 + var marker = new google.maps.Marker({
6.25 + position: myLatlng,
6.26 + map: map,
6.27 + title: 'Hello World!'
6.28 + });
6.29 +}
6.30 +
6.31 +google.maps.event.addDomListener(window, 'load', initialize);
6.32 +
6.33 + </script>
6.34 + </head>
6.35 + <body>
6.36 + <div id="map-canvas"></div>
6.37 + </body>
6.38 +</html>
6.39 +
7.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
7.2 +++ b/polygon-simple.html Wed Apr 09 12:36:39 2014 +0200
7.3 @@ -0,0 +1,50 @@
7.4 +<!DOCTYPE html>
7.5 +<html>
7.6 + <head>
7.7 + <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
7.8 + <meta charset="utf-8">
7.9 + <title>Simple Polygon</title>
7.10 + <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
7.11 + <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
7.12 + <script>
7.13 +function initialize() {
7.14 + var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
7.15 + var mapOptions = {
7.16 + zoom: 5,
7.17 + center: myLatLng,
7.18 + mapTypeId: google.maps.MapTypeId.TERRAIN
7.19 + };
7.20 +
7.21 + var bermudaTriangle;
7.22 +
7.23 + var map = new google.maps.Map(document.getElementById('map-canvas'),
7.24 + mapOptions);
7.25 +
7.26 + var triangleCoords = [
7.27 + new google.maps.LatLng(25.774252, -80.190262),
7.28 + new google.maps.LatLng(18.466465, -66.118292),
7.29 + new google.maps.LatLng(32.321384, -64.75737),
7.30 + new google.maps.LatLng(25.774252, -80.190262)
7.31 + ];
7.32 +
7.33 + // Construct the polygon
7.34 + bermudaTriangle = new google.maps.Polygon({
7.35 + paths: triangleCoords,
7.36 + strokeColor: '#FF0000',
7.37 + strokeOpacity: 0.8,
7.38 + strokeWeight: 2,
7.39 + fillColor: '#FF0000',
7.40 + fillOpacity: 0.35
7.41 + });
7.42 +
7.43 + bermudaTriangle.setMap(map);
7.44 +}
7.45 +
7.46 +google.maps.event.addDomListener(window, 'load', initialize);
7.47 +
7.48 + </script>
7.49 + </head>
7.50 + <body>
7.51 + <div id="map-canvas"></div>
7.52 + </body>
7.53 +</html>
8.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
8.2 +++ b/rectangle-overlay-params.html Wed Apr 09 12:36:39 2014 +0200
8.3 @@ -0,0 +1,152 @@
8.4 +<!DOCTYPE html>
8.5 +<html>
8.6 + <head>
8.7 + <meta http-equiv="content-type" content="text/html; charset=utf-8" />
8.8 + <title>Rectangle Overlay</title>
8.9 +
8.10 + <style type="text/css">
8.11 + #map {
8.12 + width: 1200px;
8.13 + height: 800px;
8.14 + margin: 5px;
8.15 + }
8.16 +
8.17 + h2 {
8.18 + margin: 2px;
8.19 + }
8.20 +
8.21 + ul {
8.22 + margin: 2px;
8.23 + }
8.24 +
8.25 + body {
8.26 + font-size: 12pt;
8.27 + font-family: Arial, sans-serif;
8.28 + }
8.29 + </style>
8.30 +
8.31 + <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
8.32 +
8.33 + <script type="text/javascript">
8.34 + // Global variables
8.35 + var map;
8.36 + var marker1;
8.37 + var marker2;
8.38 + var rectangle;
8.39 +
8.40 + /**
8.41 + * Called on the initial page load.
8.42 + */
8.43 + function init() {
8.44 +
8.45 + var qs = GetQueryString();
8.46 +
8.47 + //Set map width if specified
8.48 + if (!(typeof qs.width === "undefined")) {
8.49 + document.getElementById('map').style.width=qs.width[0].concat("px");
8.50 + //window.alert("width");
8.51 + }
8.52 +
8.53 + //Set map height if specified
8.54 + if (!(typeof qs.height === "undefined")) {
8.55 + document.getElementById('map').style.height=qs.height[0].concat("px");
8.56 + //window.alert("height");
8.57 + }
8.58 +
8.59 + //Display help if expected parameters are not specified
8.60 + if ( typeof qs.s === "undefined" || typeof qs.w === "undefined" || typeof qs.n === "undefined" || typeof qs.e === "undefined") {
8.61 + document.getElementById('help').innerHTML='Pass the URI parameters as follow: \
8.62 + <ul>\
8.63 + <li>\'s\' for southernmost latitude.</li>\
8.64 + <li>\'n\' for northernmost latitude.</li>\
8.65 + <li>\'e\' for easternmost longitude.</li>\
8.66 + <li>\'w\' for westernmost longitude.</li>\
8.67 + <li>\'c\' Specify a <a href="http://www.w3schools.com/cssref/css_colornames.asp">color name</a> for your rectangles.</li>\
8.68 + <li>\'width\' Map width in pixels, default is 1200.</li>\
8.69 + <li>\'height\' Map heigh in pixels, default is 800.</li>\
8.70 + </ul>\
8.71 + You can specify any number of rectangles.<br />\
8.72 + Map will be centered on the first rectangle.<br />\
8.73 + Click <a href="rectangle-overlay-params.html?w=8.619000&n=50.134350&e=8.714110&s=50.091180&w=8.657227&n=50.119630&e=8.673706&s=50.108644&w=8.652547&n=50.109318&e=8.658400&s=50.105320&c=black&c=red&c=green">here</a> for an example.';
8.74 +
8.75 + //Still display the map
8.76 + map = new google.maps.Map(document.getElementById('map'), {
8.77 + 'zoom': 3,
8.78 + 'center': new google.maps.LatLng(45,0),
8.79 + 'mapTypeId': google.maps.MapTypeId.ROADMAP
8.80 + });
8.81 +
8.82 + return;
8.83 + }
8.84 +
8.85 +
8.86 +
8.87 + var latLngBounds = new google.maps.LatLngBounds(
8.88 + new google.maps.LatLng(qs.s[0], qs.w[0]),
8.89 + new google.maps.LatLng(qs.n[0], qs.e[0])
8.90 + );
8.91 +
8.92 + map = new google.maps.Map(document.getElementById('map'), {
8.93 + 'zoom': 12,
8.94 + 'center': new google.maps.LatLng(latLngBounds.getCenter().lat(),latLngBounds.getCenter().lng()),
8.95 + 'mapTypeId': google.maps.MapTypeId.ROADMAP
8.96 + });
8.97 +
8.98 +
8.99 + //Create all our rectangles
8.100 + rectangles = []; //Create rentangles array
8.101 + for (var i = 0; i < qs.s.length; i++) {
8.102 + rectangles.push(new google.maps.Rectangle({map: map,fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':qs.c[i]) }));
8.103 + //window.alert(qs.c[i]);
8.104 + }
8.105 +
8.106 + redraw();
8.107 + }
8.108 +
8.109 + /**
8.110 + * Updates the Rectangle's bounds to resize its dimensions.
8.111 + */
8.112 + function redraw() {
8.113 + var qs = GetQueryString();
8.114 + for (var i = 0; i < qs.s.length; i++) {
8.115 + var latLngBounds = new google.maps.LatLngBounds(
8.116 + new google.maps.LatLng(qs.s[i], qs.w[i]),
8.117 + new google.maps.LatLng(qs.n[i], qs.e[i])
8.118 + );
8.119 + rectangles[i].setBounds(latLngBounds);
8.120 + }
8.121 + }
8.122 +
8.123 + /**
8.124 + * This function is anonymous, is executed immediately and
8.125 + * the return value is assigned to QueryString!
8.126 + */
8.127 + function GetQueryString() {
8.128 + var query_string = {};
8.129 + var query = window.location.search.substring(1);
8.130 + var vars = query.split("&");
8.131 + for (var i=0;i<vars.length;i++) {
8.132 + var pair = vars[i].split("=");
8.133 + // If first entry with this name
8.134 + if ((typeof query_string[pair[0]] === "undefined") ) {
8.135 + query_string[pair[0]] = pair[1];
8.136 + var arr = [ query_string[pair[0]], pair[1] ];
8.137 + query_string[pair[0]] = arr;
8.138 + } else {
8.139 + query_string[pair[0]].push(pair[1]);
8.140 + }
8.141 + }
8.142 + return query_string;
8.143 + }
8.144 +
8.145 + // Register an event listener to fire when the page finishes loading.
8.146 + google.maps.event.addDomListener(window, 'load', init);
8.147 + </script>
8.148 + </head>
8.149 + <body>
8.150 + <h2>Google maps rectangle overlay</h2>
8.151 + <div id="help"><a href='rectangle-overlay-params.html'>help</a></div>
8.152 + <div id="map"></div>
8.153 + </body>
8.154 +</html>
8.155 +