sl@0: <!DOCTYPE html>
sl@0: <html>
sl@0: <head>
sl@0: <meta http-equiv="content-type" content="text/html; charset=utf-8" />
sl@0: <title>Rectangle Overlay</title>
sl@0:
sl@0: <style type="text/css">
sl@0: #map {
sl@0: width: 1200px;
sl@0: height: 800px;
sl@0: margin: 5px;
sl@0: }
sl@0:
sl@0: h2 {
sl@0: margin: 2px;
sl@0: }
sl@0:
sl@0: ul {
sl@0: margin: 2px;
sl@0: }
sl@0:
sl@0: body {
sl@0: font-size: 12pt;
sl@0: font-family: Arial, sans-serif;
sl@0: }
sl@0: </style>
sl@0:
sl@0: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
sl@0:
sl@0: <script type="text/javascript">
sl@0: // Global variables
sl@0: var map;
sl@0: var marker1;
sl@0: var marker2;
sl@0: var rectangle;
sl@0:
sl@0: /**
sl@0: * Called on the initial page load.
sl@0: */
sl@0: function init() {
sl@0:
sl@0: var qs = GetQueryString();
sl@0:
sl@0: //Set map width if specified
sl@0: if (!(typeof qs.width === "undefined")) {
sl@0: document.getElementById('map').style.width=qs.width[0].concat("px");
sl@0: //window.alert("width");
sl@0: }
sl@0:
sl@0: //Set map height if specified
sl@0: if (!(typeof qs.height === "undefined")) {
sl@0: document.getElementById('map').style.height=qs.height[0].concat("px");
sl@0: //window.alert("height");
sl@0: }
sl@0:
sl@0: //Display help if expected parameters are not specified
sl@0: if ( typeof qs.s === "undefined" || typeof qs.w === "undefined" || typeof qs.n === "undefined" || typeof qs.e === "undefined") {
sl@0: document.getElementById('help').innerHTML='Pass the URI parameters as follow: \
sl@0: <ul>\
sl@0: <li>\'s\' for southernmost latitude.</li>\
sl@0: <li>\'n\' for northernmost latitude.</li>\
sl@0: <li>\'e\' for easternmost longitude.</li>\
sl@0: <li>\'w\' for westernmost longitude.</li>\
sl@0: <li>\'c\' Specify a <a href="http://www.w3schools.com/cssref/css_colornames.asp">color name</a> for your rectangles.</li>\
sl@0: <li>\'width\' Map width in pixels, default is 1200.</li>\
sl@0: <li>\'height\' Map heigh in pixels, default is 800.</li>\
sl@0: </ul>\
sl@0: You can specify any number of rectangles.<br />\
sl@0: Map will be centered on the first rectangle.<br />\
sl@0: 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.';
sl@0:
sl@0: //Still display the map
sl@0: map = new google.maps.Map(document.getElementById('map'), {
sl@0: 'zoom': 3,
sl@0: 'center': new google.maps.LatLng(45,0),
sl@0: 'mapTypeId': google.maps.MapTypeId.ROADMAP
sl@0: });
sl@0:
sl@0: return;
sl@0: }
sl@0:
sl@0:
sl@0:
sl@0: var latLngBounds = new google.maps.LatLngBounds(
sl@0: new google.maps.LatLng(qs.s[0], qs.w[0]),
sl@0: new google.maps.LatLng(qs.n[0], qs.e[0])
sl@0: );
sl@0:
sl@0: map = new google.maps.Map(document.getElementById('map'), {
sl@0: 'zoom': 12,
sl@0: 'center': new google.maps.LatLng(latLngBounds.getCenter().lat(),latLngBounds.getCenter().lng()),
sl@0: 'mapTypeId': google.maps.MapTypeId.ROADMAP
sl@0: });
sl@0:
sl@0:
sl@0: //Create all our rectangles
sl@0: rectangles = []; //Create rentangles array
sl@0: for (var i = 0; i < qs.s.length; i++) {
sl@0: rectangles.push(new google.maps.Rectangle({map: map,fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':qs.c[i]) }));
sl@0: //window.alert(qs.c[i]);
sl@0: }
sl@0:
sl@0: redraw();
sl@0: }
sl@0:
sl@0: /**
sl@0: * Updates the Rectangle's bounds to resize its dimensions.
sl@0: */
sl@0: function redraw() {
sl@0: var qs = GetQueryString();
sl@0: for (var i = 0; i < qs.s.length; i++) {
sl@0: var latLngBounds = new google.maps.LatLngBounds(
sl@0: new google.maps.LatLng(qs.s[i], qs.w[i]),
sl@0: new google.maps.LatLng(qs.n[i], qs.e[i])
sl@0: );
sl@0: rectangles[i].setBounds(latLngBounds);
sl@0: }
sl@0: }
sl@0:
sl@0: /**
sl@0: * This function is anonymous, is executed immediately and
sl@0: * the return value is assigned to QueryString!
sl@0: */
sl@0: function GetQueryString() {
sl@0: var query_string = {};
sl@0: var query = window.location.search.substring(1);
sl@0: var vars = query.split("&");
sl@0: for (var i=0;i<vars.length;i++) {
sl@0: var pair = vars[i].split("=");
sl@0: // If first entry with this name
sl@0: if ((typeof query_string[pair[0]] === "undefined") ) {
sl@0: query_string[pair[0]] = pair[1];
sl@0: var arr = [ query_string[pair[0]], pair[1] ];
sl@0: query_string[pair[0]] = arr;
sl@0: } else {
sl@0: query_string[pair[0]].push(pair[1]);
sl@0: }
sl@0: }
sl@0: return query_string;
sl@0: }
sl@0:
sl@0: // Register an event listener to fire when the page finishes loading.
sl@0: google.maps.event.addDomListener(window, 'load', init);
sl@0: </script>
sl@0: </head>
sl@0: <body>
sl@0: <h2>Google maps rectangle overlay</h2>
sl@0: <div id="help"><a href='rectangle-overlay-params.html'>help</a></div>
sl@0: <div id="map"></div>
sl@0: </body>
sl@0: </html>
sl@0: