Mercurialgmaps / file revision
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | raw | help
rectangle-overlay-params.html
author sl
Wed, 09 Apr 2014 12:36:39 +0200
changeset 0 5ecce0e1ef52
child 1 a1483545da35
permissions -rw-r--r--
Various gmaps HTML pages and scripts. 
     1 <!DOCTYPE html>

     2 <html>

     3   <head>

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

     5     <title>Rectangle Overlay</title>

     6 

     7     <style type="text/css">

     8       #map {

     9         width: 1200px;

    10         height: 800px;

    11 		margin: 5px;

    12       }

    13 	  

    14 	  h2 {

    15 		margin: 2px;

    16 	  }

    17 	  

    18 	  ul {

    19 		margin: 2px;

    20 	  }

    21 	  

    22 	  body {

    23 		font-size: 12pt;

    24 		font-family: Arial, sans-serif;

    25 		}

    26     </style>

    27 

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

    29 

    30     <script type="text/javascript">

    31       // Global variables

    32       var map;

    33       var marker1;

    34       var marker2;

    35       var rectangle;

    36 

    37       /**

    38        * Called on the initial page load.

    39        */

    40       function init() {

    41 	  

    42 	  	var qs = GetQueryString();

    43 		

    44 		//Set map width if specified

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

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

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

    48 		}

    49 		

    50 		//Set map height if specified

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

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

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

    54 		}

    55 		

    56 		//Display help if expected parameters are not specified

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

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

    59 					<ul>\

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

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

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

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

    64 					<li>\'c\' Specify a <a href="http://www.w3schools.com/cssref/css_colornames.asp">color name</a> for your rectangles.</li>\

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

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

    67 					</ul>\

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

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

    70 					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.';

    71 

    72 			//Still display the map

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

    74 					'zoom': 3,

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

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

    77 					});

    78 			

    79 			return;

    80 		}

    81 		

    82 

    83 		

    84         var latLngBounds = new google.maps.LatLngBounds(

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

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

    87         );

    88 	  

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

    90           'zoom': 12,

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

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

    93         });

    94 

    95         

    96 		//Create all our rectangles

    97 		rectangles = []; //Create rentangles array

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

    99 		rectangles.push(new google.maps.Rectangle({map: map,fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':qs.c[i]) }));

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

   101 		}

   102 		

   103         redraw();

   104       }

   105       

   106       /**

   107        * Updates the Rectangle's bounds to resize its dimensions.

   108        */

   109       function redraw() {

   110 	    var qs = GetQueryString();

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

   112         var latLngBounds = new google.maps.LatLngBounds(

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

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

   115         );

   116         rectangles[i].setBounds(latLngBounds);

   117 		}

   118       }

   119 	  

   120   /** 

   121    * This function is anonymous, is executed immediately and 

   122    * the return value is assigned to QueryString!

   123    */ 	  

   124 	 function GetQueryString() {

   125 	  var query_string = {};

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

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

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

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

   130 			// If first entry with this name

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

   132 		  query_string[pair[0]] = pair[1];

   133  		  var arr = [ query_string[pair[0]], pair[1] ];

   134 		  query_string[pair[0]] = arr;

   135 		} else {

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

   137 		}

   138 	  } 

   139 		return query_string;

   140 	}

   141 

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

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

   144     </script>

   145   </head>

   146   <body>

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

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

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

   150   </body>

   151 </html>

   152
gmaps