gmaps: rectangle-overlay-params.html@b014e6b2a9e2

     1 <!DOCTYPE html>

     2 <html>

     3   <head>

     4     <meta http-equiv="content-type" content="text/html; charset=utf-8" />

     5     <title>Rectangle Overlay</title>

     7     <style type="text/css">

     8       #map {

     9         width: 1200px;

    10         height: 800px;

    11 		margin: 5px;

    12       }

    14 	  h2 {

    15 		margin: 2px;

    16 	  }

    18 	  ul {

    19 		margin: 2px;

    20 	  }

    22 	  body {

    23 		font-size: 12pt;

    24 		font-family: Arial, sans-serif;

    25 		}

    26     </style>

    28     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    30     <script type="text/javascript">

    31       // Global variables

    32       var map;

    33       var marker1;

    34       var marker2;

    35       var rectangle;

    37       /**

    38        * Called on the initial page load.

    39        */

    40       function init() {

    42 		//window.alert("Init called");

    44 	  	var qs = GetQueryString();

    45 		//qs = decodeURIComponent(qs);

    47 		//Set map width if specified

    48 		if (!(typeof qs.width === "undefined"))	{

    49 			document.getElementById('map').style.width=qs.width[0].concat("px");

    50 			//window.alert("width");

    51 		}

    53 		//Set map height if specified

    54 		if (!(typeof qs.height === "undefined"))	{

    55 			document.getElementById('map').style.height=qs.height[0].concat("px");

    56 			//window.alert("height");

    57 		}

    59 		var animation=false;

    60 		if (!(typeof qs.anim === "undefined"))	{

    61 			animation=true;

    62 			//window.alert("Using animation mode");

    63 		}

    65 		var intervalInMs=3000; //default to n seconds

    66 		if (!(typeof qs.interval === "undefined"))	{

    67 			intervalInMs=qs.interval[0];

    68 			//window.alert("Interval: " + intervalInMs + " ms");

    69 		}

    71 		var step=1; //default to n seconds

    72 		if (!(typeof qs.step === "undefined"))	{

    73 			step=qs.step[0];

    74 			//window.alert("Step: " + step);

    75 		}

    77 		//Display help if expected parameters are not specified

    78 		if ( typeof qs.s === "undefined" || typeof qs.w === "undefined" || typeof qs.n === "undefined" || typeof qs.e === "undefined") {

    79 				document.getElementById('help').innerHTML='Pass the URI parameters as follow: \

    80 					<ul>\

    81 					<li>\'s\' for southernmost latitude.</li>\

    82 					<li>\'n\' for northernmost latitude.</li>\

    83 					<li>\'e\' for easternmost longitude.</li>\

    84 					<li>\'w\' for westernmost longitude.</li>\

    85 					<li>\'c\' Specify a <a href="http://www.w3schools.com/cssref/css_colornames.asp">color name</a> or value (use %23FFFFFF for white) for your rectangles.</li>\

    86 					<li>\'a\' Specify alpha opacity of your rectangle fill, it should be between 1 and 0. For instance 0.5 makes it half transparent.</li>\

    87 					<li>\'width\' Map width in pixels, default is 1200.</li>\

    88 					<li>\'height\' Map heigh in pixels, default is 800.</li>\

    89 					</ul>\

    90 					You can specify any number of rectangles.<br />\

    91 					Map will be centered on the first rectangle.<br />\

    92 					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=%23FF0000&c=green&a=0.3&a=0.75&c=0.5">here</a> for an example.';

    94 			//Still display the map

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

    96 					'zoom': 3,

    97 					'center': new google.maps.LatLng(45,0),

    98 					'mapTypeId': google.maps.MapTypeId.ROADMAP

    99 					});

   101 			return;

   102 		}

   104 		//We are not displaying help

   105 		//Init our map position and zoom

   106 		var latLngBounds = new google.maps.LatLngBounds(

   107           new google.maps.LatLng(qs.s[0], qs.w[0]),

   108           new google.maps.LatLng(qs.n[0], qs.e[0])

   109         );

   111         map = new google.maps.Map(document.getElementById('map'), {

   112           'zoom': 12,

   113           'center': new google.maps.LatLng(latLngBounds.getCenter().lat(),latLngBounds.getCenter().lng()),

   114           'mapTypeId': google.maps.MapTypeId.ROADMAP

   115         });

   117 		if (!animation) {

   118 			//We are not doing animation so just display all our rectangles

   119 			//window.alert(qs.s.length);

   120 			//Create all our rectangles

   121 			rectangles = []; //Create rectangles array

   122 			for (var i = 0; i < qs.s.length; i++) {

   123 			rectangles.push(new google.maps.Rectangle({	map: map,

   124 														fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),

   125 														fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),

   126 														strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),

   127 														strokeOpacity: 1.0,

   128 														strokeWeight: 1,

   129 														bounds: new google.maps.LatLngBounds(

   130 														new google.maps.LatLng(qs.s[i], qs.w[i]),

   131 														new google.maps.LatLng(qs.n[i], qs.e[i]))

   132 														}));

   133 			//window.alert(decodeURIComponent(qs.c[i]));

   134 			}

   135 		}

   136 		else {

   137 		var currentRect=0;

   138 		rectangles = []; //Create rectangles array

   139 		//We are doing an animation so just setup our timer

   140 		var animTimer=setInterval(function(){

   141 					//alert("Hello");

   142 					if ((currentRect+step)<qs.s.length) {

   143 					//We are still in range, display our rect

   144 					for (var i=currentRect; i<(currentRect+step); i++) {

   145 						rectangles.push(new google.maps.Rectangle({	map: map,

   146 												fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),

   147 												fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),

   148 												strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),

   149 												strokeOpacity: 1.0,

   150 												strokeWeight: 1,

   151 												bounds: new google.maps.LatLngBounds(

   152 												new google.maps.LatLng(qs.s[i], qs.w[i]),

   153 												new google.maps.LatLng(qs.n[i], qs.e[i]))

   154 												}));

   155 						}

   156 					}

   157 					else {

   158 					//Not in range, go back to 0

   159 					currentRect=0;

   160 					//Stop interval for now

   161 					window.clearInterval(animTimer);

   162 					return;

   163 					}

   164 					//Move on to next frame

   165 					currentRect+=step;

   166 					},

   167 					intervalInMs);

   169 		}

   170       }

   174   /**

   175    * This function is anonymous, is executed immediately and

   176    * the return value is assigned to QueryString!

   177    */

   178 	 function GetQueryString() {

   179 	  var query_string = {};

   180 	  var query = window.location.search.substring(1);

   181 	  var vars = query.split("&");

   182 	  //window.alert("URL param count: " + vars.length);

   183 	  for (var i=0;i<vars.length;i++) {

   184 		var pair = vars[i].split("=");

   185 			// If first entry with this name

   186 		if ((typeof query_string[pair[0]] === "undefined") ) {

   187 		  //Instantiate an array for that parameter

   188  		  var arr = [ pair[1] ];

   189 		  query_string[pair[0]] = arr;

   190 		  //window.alert("Create param '" + pair[0] + "' with value: " + pair[1]);

   191 		} else {

   192 		  //Add a value to our existing parameter array

   193 		  //window.alert("Add param '" + pair[0] + "' with value: " + pair[1]);

   194 		  query_string[pair[0]].push(pair[1]);

   195 		}

   196 	  }

   197 		return query_string;

   198 	}

   200       // Register an event listener to fire when the page finishes loading.

   201       google.maps.event.addDomListener(window, 'load', init);

   202     </script>

   203   </head>

   204   <body>

   205     <h2>Google maps rectangle overlay</h2>

   206 	<div id="help"><a href='rectangle-overlay-params.html'>help</a></div>

   207     <div id="map"></div>

   208   </body>

   209 </html>

author	sl
	Wed, 09 Apr 2014 19:55:16 +0200
changeset 2	b014e6b2a9e2
parent 1	a1483545da35
child 3	54ac29018aaf
permissions	-rw-r--r--