what's wrong with the code below? when i execute it, the map doesn't even show up.

but when i put the overlayview methods outside the for-loop and manually assign a lat/lng then it magically works?!

but does anyone know how i can loop through an array of lats/lngs (=items) using the overlayview methods?

i hope this makes sense, just don't know how else to explain it. and unfortunately, i run my code on my localhost

var overlay;

OverlayTest.prototype = new google.maps.OverlayView();

[taken out: options]

var map = new google.maps.Map(document.getElementById('map_canvas'), options);

var items = [
['lat','lng'],['lat','lng']
];

for (var i = 0; i < items.length; i++)
{
var latlng = new google.maps.LatLng(items[i][0], items[i][1]);

var bounds = new google.maps.LatLngBounds(latlng);

overlay = new OverlayTest(map, bounds);

function OverlayTest(map, bounds)
{
[taken out: not important]

this.setMap(map);
}

OverlayTest.prototype.onAdd = function()
{
[taken out: not important]
}

OverlayTest.prototype.draw = function()
{
[taken out: not important]
}
}

how can i loop through an array within the overlayview class?

$(document).ready(function()
{
var overlay;

var myLatlng = new google.maps.LatLng(51.501743,-0.140461);

var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

OverlayTest.prototype = new google.maps.OverlayView();

var items = [
  [51.501743,-0.140461],
  [51.506209,-0.146796],
];

for([loop])//loop through array
{
var latlng = new google.maps.LatLng(items[i][0], items[i][1]);

var bounds = new google.maps.LatLngBounds(latlng);

overlay = new OverlayTest(map, bounds);

var element_id = 'map_' + i;

function OverlayTest(map, bounds)
{
this.bounds_ = bounds;

this.map_ = map;

this.div_ = null;

this.setMap(map);
}

OverlayTest.prototype.onAdd = function()
{
var div = '';

this.div_ = div;

var panes = this.getPanes();

panes.mapPane.innerHTML = div;
}

OverlayTest.prototype.draw = function()
{
var overlayProjection = this.getProjection();

var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

var div = document.getElementById(element_id);

div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
}
}
});

the above code doesn't work, but when i manually assign a lat/lng to the overlayview class it magically works (see below)?!

$(document).ready(function()
{
var overlay;

var myLatlng = new google.maps.LatLng(51.501743,-0.140461);

var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

OverlayTest.prototype = new google.maps.OverlayView();

var items = [
  [51.501743,-0.140461],
  [51.506209,-0.146796],
];

var latlng = new google.maps.LatLng(51.506209,-0.146796);//manually assign lat/lng

var bounds = new google.maps.LatLngBounds(latlng);

overlay = new OverlayTest(map, bounds);

function OverlayTest(map, bounds)
{
this.bounds_ = bounds;

this.map_ = map;

this.div_ = null;

this.setMap(map);
}

OverlayTest.prototype.onAdd = function()
{
var div = '';

this.div_ = div;

var panes = this.getPanes();

panes.mapPane.innerHTML = div;
}

OverlayTest.prototype.draw = function()
{
var overlayProjection = this.getProjection();

var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

var div = document.getElementById('map_1');

div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
}
});