google map API OverlayViewとoverlayMapTypesのlayerの順番を制御したい

google map APIで、
OverlayViewとoverlayMapTypesのlayerの順番を制御することは可能でしょうか。

サンプルのコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
5    <meta charset="utf-8">
6    <title>Adding a Custom Overlay</title>
7    <style>
8      html, body {
9        height: 100%;
10        margin: 0px;
11        padding: 0px
12      }
13      #map-canvas {
14        height: 100%;
15        width: 70%;
16        padding: 0px;
17        float:left;
18      }
19      #info-box{
20        height: 100%;
21        width: 30%;
22        float:left;
23      }
24    </style>
25    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
26    <script>
27// [START region_initialization]
28// This example creates a custom overlay called USGSOverlay, containing
29// a U.S. Geological Survey (USGS) image of the relevant area on the map.
30
31// Set the custom overlay object's prototype to a new instance
32// of OverlayView. In effect, this will subclass the overlay class.
33// Note that we set the prototype to an instance, rather than the
34// parent class itself, because we do not wish to modify the parent class.
35
36var overlay;
37USGSOverlay.prototype = new google.maps.OverlayView();
38
39var swMarker;
40var neMarker;
41var map;
42// Initialize the map and the custom overlay.
43
44function initialize() {
45  var mapOptions = {
46    zoom: 11,
47    center: new google.maps.LatLng(62.323907, -150.109291),
48    mapTypeId: google.maps.MapTypeId.SATELLITE
49  };
50
51  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
52
53  var swBound = new google.maps.LatLng(62.281819, -150.287132);
54  var neBound = new google.maps.LatLng(62.400471, -150.005608);
55  var bounds = new google.maps.LatLngBounds(swBound, neBound);
56
57  // The photograph is courtesy of the U.S. Geological Survey.
58  var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
59  srcImage += 'examples/full/images/talkeetna.png';
60
61  // The custom USGSOverlay object contains the USGS image,
62  // the bounds of the image, and a reference to the map.
63  overlay = new USGSOverlay(bounds, srcImage, map);
64  
65  // Let's create two markers that will act as holders of the Overlay bounds.
66  swMarker = new google.maps.Marker({
67    position: swBound, 
68    map: map, // handle of the map 
69    draggable:true
70  });
71  neMarker = new google.maps.Marker({
72    position: neBound, 
73    map: map, // handle of the map 
74    draggable:true
75  });
76  
77  //this callback will be called everytime the markers are moved
78  // updating the Overlay bounds.
79  var dragcallback = function(){
80    document.getElementById('sw-lat').value = swMarker.position.lat();
81    document.getElementById('sw-lon').value = swMarker.position.lng();
82    document.getElementById('ne-lat').value = neMarker.position.lat()
83    document.getElementById('ne-lon').value = neMarker.position.lng();
84    overlay.bounds_ = new google.maps.LatLngBounds(swMarker.position, neMarker.position);
85    overlay.draw();
86  }
87  google.maps.event.addListener(swMarker,'drag',dragcallback);
88  google.maps.event.addListener(neMarker,'drag',dragcallback);
89
90
91  //ADD ImageMaptype
92
93  var weatherMapType = new google.maps.ImageMapType({
94	getTileUrl: function(coord, zoom) {
95		return 'http://tile.openstreetmap.org/'
96				+ zoom + '/' 
97				+ coord.x + '/' 
98				+ coord.y + '.png';
99	},
100	tileSize: new google.maps.Size(256, 256),
101	maxZoom: 9,  //表示する最大のズーム値
102	minZoom: 0,  //表示する最小のズーム値
103	name: 'clouds_new'
104});
105
106map.overlayMapTypes.insertAt(0, weatherMapType);
107
108}
109// [END region_initialization]
110
111// [START region_constructor]
112/** @constructor */
113function USGSOverlay(bounds, image, map) {
114
115  // Initialize all properties.
116  this.bounds_ = bounds;
117  this.image_ = image;
118  this.map_ = map;
119
120  // Define a property to hold the image's div. We'll
121  // actually create this div upon receipt of the onAdd()
122  // method so we'll leave it null for now.
123  this.div_ = null;
124
125  // Explicitly call setMap on this overlay.
126  this.setMap(map);
127}
128// [END region_constructor]
129
130// [START region_attachment]
131/**
132 * onAdd is called when the map's panes are ready and the overlay has been
133 * added to the map.
134 */
135USGSOverlay.prototype.onAdd = function() {
136
137  var div = document.createElement('div');
138  div.style.borderStyle = 'none';
139  div.style.borderWidth = '0px';
140  div.style.position = 'absolute';
141
142  // Create the img element and attach it to the div.
143  var img = document.createElement('img');
144  img.src = this.image_;
145  img.style.width = '100%';
146  img.style.height = '100%';
147  img.style.position = 'absolute';
148  img.style.opacity = '0.6';
149  img.style.filter = 'alpha(opacity=60)';
150  div.appendChild(img);
151
152  this.div_ = div;
153
154  // Add the element to the "overlayLayer" pane.
155  var panes = this.getPanes();
156  panes.overlayLayer.appendChild(div);
157};
158// [END region_attachment]
159
160// [START region_drawing]
161USGSOverlay.prototype.draw = function() {
162
163  // We use the south-west and north-east
164  // coordinates of the overlay to peg it to the correct position and size.
165  // To do this, we need to retrieve the projection from the overlay.
166  var overlayProjection = this.getProjection();
167
168  // Retrieve the south-west and north-east coordinates of this overlay
169  // in LatLngs and convert them to pixel coordinates.
170  // We'll use these coordinates to resize the div.
171  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
172  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
173
174  // Resize the image's div to fit the indicated dimensions.
175  var div = this.div_;
176  div.style.left = sw.x + 'px';
177  div.style.top = ne.y + 'px';
178  div.style.width = (ne.x - sw.x) + 'px';
179  div.style.height = (sw.y - ne.y) + 'px';
180};
181// [END region_drawing]
182
183// [START region_removal]
184// The onRemove() method will be called automatically from the API if
185// we ever set the overlay's map property to 'null'.
186USGSOverlay.prototype.onRemove = function() {
187  this.div_.parentNode.removeChild(this.div_);
188  this.div_ = null;
189};
190// [END region_removal]
191
192google.maps.event.addDomListener(window, 'load', initialize);
193
194
195
196    </script>
197  </head>
198  <body>
199    <div id="info-box">
200      <br/>
201      <br/>
202      <label for="sw-lat">SW Lat</label>
203      <input id="sw-lat" name="sw-lat" type="text" value="" readonly="readonly"/><br/>
204      <label for="sw-lon">SW Lon</label>
205      <input id="sw-lon" name="sw-lon" type="text" value="" readonly="readonly"/><br/>
206      <label for="ne-lat">NE Lat</label>
207      <input id="ne-lat" name="ne-lat" type="text" value="" readonly="readonly"/><br/>
208      <label for="ne-lon">NE Lon</label>
209      <input id="ne-lon" name="ne-lon" type="text" value="" readonly="readonly"/>
210    </div>
211    <div id="map-canvas"></div>
212  </body>
213</html>