Google Map API Infobox and for Loop - google-maps

Question

hoping to get some help here. I have locations on a database that I have successfully managed to put into an array that successfully plots the markers on the map. The only drawback is i want to customise the look of the market infowindow, so im using infobox.
But when I echo the variable from my array it echo's the last result into each infobox and im completly stumped on this one.
Could someone please look at my code and see where iv gone wrong or point me in the right direction?
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js"></script>
<script type="text/javascript" language="javascript">
// -- Location API -- //
infos = [];
function initialize() {
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(54.57206165565852, 12.48046875),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
/* now inside your initialise function */
infowindow = new google.maps.InfoWindow({
content: "holding..."
});
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, beaches);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
[1, 'Peterhead', 57.487044, -1.800417, 1, 'Building 1', 'Glenbank'],
[2, 'Cowdenbeath', 56.09946, -3.35909, 1, 'Building 22', 'The Paragon Works Station'],
[3, 'Norfolk', 52.595971, 1.728609, 1, 'Building 3', '39 Southgates Road']
];
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('http://stlab.co.uk/group/assets/img/icons/map-pin.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(15, 22),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(5, 22));
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var html = '<div class="phoney">'+beach[4]+'<br>'+beach[5]+'</div>'
var myLatLng = new google.maps.LatLng(beach[2], beach[3]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
content:html,
title: beach[1],
zIndex: beach[4]
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = beach[0]+"<br>"+beach[6];
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function (e) {
ib.open(map, this);
});
var ib = new InfoBox(myOptions);
}
}
</script>

Answer 1

here is the working example.
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js"></script>
<script type="text/javascript">
// -- Location API -- //
var infos = [];
var ib = new InfoBox();
function initialize() {
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(54.57206165565852, 12.48046875),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
/* now inside your initialise function */
var infowindow = new google.maps.InfoWindow({
content: "holding..."
});
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var beaches = [
[1, 'Peterhead', 57.487044, -1.800417, 1, 'Building 1', 'Glenbank'],
[2, 'Cowdenbeath', 56.09946, -3.35909, 1, 'Building 22', 'The Paragon Works Station'],
[3, 'Norfolk', 52.595971, 1.728609, 1, 'Building 3', '39 Southgates Road']
];
for (var i = 0; i < beaches.length; i++) {
setMarkers(map, beaches[i]);
}
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
function setMarkers(map, beach) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('http://stlab.co.uk/group/assets/img/icons/map-pin.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(15, 22),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(5, 22));
//var beach = locations[i];
var html = '<div class="phoney">'+beach[4]+'<br>'+beach[5]+'</div>'
var myLatLng = new google.maps.LatLng(beach[2], beach[3]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
content:html,
title: beach[1],
zIndex: beach[4]
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px;background: yellow; padding: 5px;";
boxText.innerHTML = beach[0]+"<br>"+beach[6];
var myOptions = {
content:boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function (e) {
ib.setOptions(myOptions);
ib.open(map, marker);
});
}
</script>