Can someone please tell me how to change the background color and
opacity of the following? I have tried and tried and can't get it
work. I would like the inside of the rectangle to be a lighter color
red than the border,
Thanks so much
**********************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xmlns:v="urn:schemas-
microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title> - Service Area</title>
<script src="http://maps.google.com/maps?
file=api&v=2&key=*****B00n3ggJOHrLnUdr3_0HKpyy-g"
type="text/javascript"></script>
<script type="text/javascript">
// A Rectangle is a simple overlay that outlines a lat/lng bounds
on the
// map. It has a border of the given weight and color and can
optionally
// have a semi-transparent background color.
function Rectangle(bounds, opt_weight, opt_color) {
this.bounds_ = bounds;
this.weight_ = opt_weight || 5;
this.color_ = opt_color || "#f33f00";
}
Rectangle.prototype = new GOverlay();
// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize = function(map) {
// Create the DIV representing our rectangle
var div = document.createElement("div");
div.style.border = this.weight_ + "px solid " + this.color_;
div.style.position = "absolute";
// Our rectangle is flat against the map, so we add our selves
to the
// MAP_PANE pane, which is at the same z-index as the map itself
(i.e.,
// below the marker shadows)
map.getPane(G_MAP_MAP_PANE).appendChild(div);
this.map_ = map;
this.div_ = div;
}
// Remove the main DIV from the map pane
Rectangle.prototype.remove = function() {
this.div_.parentNode.removeChild(this.div_);
}
// Copy our data to a new Rectangle
Rectangle.prototype.copy = function() {
return new Rectangle(this.bounds_, this.weight_, this.color_,
this.backgroundColor_, this.opacity_);
}
// Redraw the rectangle based on the current projection and zoom
level
Rectangle.prototype.redraw = function(force) {
// We only need to redraw if the coordinate system has changed
if (!force) return;
// Calculate the DIV coordinates of two opposite corners of our
bounds to
// get the size and position of our rectangle
var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest
());
var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast
());
// Now position our DIV based on the DIV coordinates of our
bounds
this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) +
"px";
this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) +
"px";
}
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(36.2000, -95.9000), 7);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// Display a rectangle in the center of the map at about a
quarter of
// the size of the main map
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngDelta = (northEast.lng() - southWest.lng()) / 5;
var latDelta = (northEast.lat() - southWest.lat()) / 6.5;
var rectBounds = new GLatLngBounds(
new GLatLng(southWest.lat() + latDelta,
southWest.lng() + lngDelta),
new GLatLng(northEast.lat() - latDelta,
northEast.lng() - lngDelta));
map.addOverlay(new Rectangle(rectBounds));
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
********************************
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---
