google maps api v3 - loop through overlays - overlayview methods
- by user317005
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';
}
});
