1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/rectangle-overlay-params.html Wed Apr 09 12:36:39 2014 +0200
1.3 @@ -0,0 +1,152 @@
1.4 +<!DOCTYPE html>
1.5 +<html>
1.6 + <head>
1.7 + <meta http-equiv="content-type" content="text/html; charset=utf-8" />
1.8 + <title>Rectangle Overlay</title>
1.9 +
1.10 + <style type="text/css">
1.11 + #map {
1.12 + width: 1200px;
1.13 + height: 800px;
1.14 + margin: 5px;
1.15 + }
1.16 +
1.17 + h2 {
1.18 + margin: 2px;
1.19 + }
1.20 +
1.21 + ul {
1.22 + margin: 2px;
1.23 + }
1.24 +
1.25 + body {
1.26 + font-size: 12pt;
1.27 + font-family: Arial, sans-serif;
1.28 + }
1.29 + </style>
1.30 +
1.31 + <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
1.32 +
1.33 + <script type="text/javascript">
1.34 + // Global variables
1.35 + var map;
1.36 + var marker1;
1.37 + var marker2;
1.38 + var rectangle;
1.39 +
1.40 + /**
1.41 + * Called on the initial page load.
1.42 + */
1.43 + function init() {
1.44 +
1.45 + var qs = GetQueryString();
1.46 +
1.47 + //Set map width if specified
1.48 + if (!(typeof qs.width === "undefined")) {
1.49 + document.getElementById('map').style.width=qs.width[0].concat("px");
1.50 + //window.alert("width");
1.51 + }
1.52 +
1.53 + //Set map height if specified
1.54 + if (!(typeof qs.height === "undefined")) {
1.55 + document.getElementById('map').style.height=qs.height[0].concat("px");
1.56 + //window.alert("height");
1.57 + }
1.58 +
1.59 + //Display help if expected parameters are not specified
1.60 + if ( typeof qs.s === "undefined" || typeof qs.w === "undefined" || typeof qs.n === "undefined" || typeof qs.e === "undefined") {
1.61 + document.getElementById('help').innerHTML='Pass the URI parameters as follow: \
1.62 + <ul>\
1.63 + <li>\'s\' for southernmost latitude.</li>\
1.64 + <li>\'n\' for northernmost latitude.</li>\
1.65 + <li>\'e\' for easternmost longitude.</li>\
1.66 + <li>\'w\' for westernmost longitude.</li>\
1.67 + <li>\'c\' Specify a <a href="http://www.w3schools.com/cssref/css_colornames.asp">color name</a> for your rectangles.</li>\
1.68 + <li>\'width\' Map width in pixels, default is 1200.</li>\
1.69 + <li>\'height\' Map heigh in pixels, default is 800.</li>\
1.70 + </ul>\
1.71 + You can specify any number of rectangles.<br />\
1.72 + Map will be centered on the first rectangle.<br />\
1.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.';
1.74 +
1.75 + //Still display the map
1.76 + map = new google.maps.Map(document.getElementById('map'), {
1.77 + 'zoom': 3,
1.78 + 'center': new google.maps.LatLng(45,0),
1.79 + 'mapTypeId': google.maps.MapTypeId.ROADMAP
1.80 + });
1.81 +
1.82 + return;
1.83 + }
1.84 +
1.85 +
1.86 +
1.87 + var latLngBounds = new google.maps.LatLngBounds(
1.88 + new google.maps.LatLng(qs.s[0], qs.w[0]),
1.89 + new google.maps.LatLng(qs.n[0], qs.e[0])
1.90 + );
1.91 +
1.92 + map = new google.maps.Map(document.getElementById('map'), {
1.93 + 'zoom': 12,
1.94 + 'center': new google.maps.LatLng(latLngBounds.getCenter().lat(),latLngBounds.getCenter().lng()),
1.95 + 'mapTypeId': google.maps.MapTypeId.ROADMAP
1.96 + });
1.97 +
1.98 +
1.99 + //Create all our rectangles
1.100 + rectangles = []; //Create rentangles array
1.101 + for (var i = 0; i < qs.s.length; i++) {
1.102 + rectangles.push(new google.maps.Rectangle({map: map,fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':qs.c[i]) }));
1.103 + //window.alert(qs.c[i]);
1.104 + }
1.105 +
1.106 + redraw();
1.107 + }
1.108 +
1.109 + /**
1.110 + * Updates the Rectangle's bounds to resize its dimensions.
1.111 + */
1.112 + function redraw() {
1.113 + var qs = GetQueryString();
1.114 + for (var i = 0; i < qs.s.length; i++) {
1.115 + var latLngBounds = new google.maps.LatLngBounds(
1.116 + new google.maps.LatLng(qs.s[i], qs.w[i]),
1.117 + new google.maps.LatLng(qs.n[i], qs.e[i])
1.118 + );
1.119 + rectangles[i].setBounds(latLngBounds);
1.120 + }
1.121 + }
1.122 +
1.123 + /**
1.124 + * This function is anonymous, is executed immediately and
1.125 + * the return value is assigned to QueryString!
1.126 + */
1.127 + function GetQueryString() {
1.128 + var query_string = {};
1.129 + var query = window.location.search.substring(1);
1.130 + var vars = query.split("&");
1.131 + for (var i=0;i<vars.length;i++) {
1.132 + var pair = vars[i].split("=");
1.133 + // If first entry with this name
1.134 + if ((typeof query_string[pair[0]] === "undefined") ) {
1.135 + query_string[pair[0]] = pair[1];
1.136 + var arr = [ query_string[pair[0]], pair[1] ];
1.137 + query_string[pair[0]] = arr;
1.138 + } else {
1.139 + query_string[pair[0]].push(pair[1]);
1.140 + }
1.141 + }
1.142 + return query_string;
1.143 + }
1.144 +
1.145 + // Register an event listener to fire when the page finishes loading.
1.146 + google.maps.event.addDomListener(window, 'load', init);
1.147 + </script>
1.148 + </head>
1.149 + <body>
1.150 + <h2>Google maps rectangle overlay</h2>
1.151 + <div id="help"><a href='rectangle-overlay-params.html'>help</a></div>
1.152 + <div id="map"></div>
1.153 + </body>
1.154 +</html>
1.155 +