var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

 function initialize() {
 var myLatLng = new google.maps.LatLng(51.057123,-4.195687 );
 var myOptions = {
    zoom: 11,
    center: new google.maps.LatLng(51.057123,-4.195687 ),
    mapTypeId: google.maps.MapTypeId.ROADMAP ,
    mapTypeControl:true,
    streetViewControl: false,
    scaleControl:true,
    mapTypeControlOptions: {
    	mapTypeIds: [
    	google.maps.MapTypeId.SATELLITE ,
    	google.maps.MapTypeId.ROADMAP  	
    	]
    }
   };
 var map = new google.maps.Map(document.getElementById("map_google"),  myOptions);
 setMarkers(map, riads);
 var swBound = new google.maps.LatLng(51.057123,-4.195687);
 var neBound = new google.maps.LatLng(51.057123,-4.195687);
 var bounds = new google.maps.LatLngBounds(swBound, neBound);
 var srcImage = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/talkeetna.png';
 overlay = new USGSOverlay(bounds, srcImage, map);
 }

 function USGSOverlay(bounds, image, map) {
 // Now initialize all properties.
 this.bounds_ = bounds;
 this.image_ = image;
 this.map_ = map;
 // We define a property to hold the image's div. We'll actually create this div 
 // upon receipt of the add() method so we'll leave it null for now.
 this.div_ = null;
 // Explicitly call setMap on this overlay
 this.setMap(map);
 }

 USGSOverlay.prototype.onAdd = function() {
  // Note: an overlay's receipt of add() indicates that the map's panes are now available for attaching the overlay to the map via the DOM.
  // Create the DIV and set some basic attributes.
  var div = document.createElement('DIV');
  div.style.border = "none";
  div.style.borderWidth = "0px";
  div.style.position = "absolute";
  // Create an IMG element and attach it to the DIV.
  var img = document.createElement("img");
  img.src = this.image_;
  img.style.width = "100%";
  img.style.height = "100%";
  var heading=document.createElement("p");
  heading.innerHTML = "West Farm B&B";
  heading.style.marginTop='0px';
  heading.style.borderTop='0px';
  heading.style.textShadow='2px 2px 1px #fff'; //text-shadow: 2px 2px 1px #fff;
  heading.style.backgroundColor='white';
  heading.style.fontSize='7pt';
  div.appendChild(heading);
  // Set the overlay's div_ property to this DIV
  this.div_ = div;
  // We add an overlay to a map via one of the map's panes. We'll add this overlay to the overlayImage pane.
  var panes = this.getPanes();
  panes.overlayImage.appendChild(this.div_);
 }

 USGSOverlay.prototype.draw = function() {
  // Size and position the overlay. We use a southwest and northeast position of the overlay to peg it to the correct position and size.
  // We need to retrieve the projection from this overlay to do this.
  var overlayProjection = this.getProjection();
  // Retrieve the southwest and northeast coordinates of this overlay in latlngs and convert them to pixels coordinates.
  // We'll use these coordinates to resize the DIV.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  // Resize the image's DIV to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x -45+ 'px';
  div.style.top = ne.y -45+ 'px';
  //div.style.width = (ne.x - sw.x) + 'px';
  //div.style.height = (sw.y - ne.y) + 'px';
  div.style.width =  '90px';
  //div.style.height = '30px';
  div.style.color ='black';

  //div.style.backgroundColor='white';
 }

 USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
 }

 // Note that the visibility property must be a string enclosed in quotes
 USGSOverlay.prototype.hide = function() {
  if (this.div_) {
   this.div_.style.visibility = "hidden";
   }
 }

 USGSOverlay.prototype.show = function() {
  if (this.div_) {
  this.div_.style.visibility = "visible";
  }
 }

 USGSOverlay.prototype.toggle = function() {
  if (this.div_) {
   if (this.div_.style.visibility == "hidden") {
   this.show();
   } else {
   this.hide();
   }
  }
 }

 USGSOverlay.prototype.toggleDOM = function() {
  if (this.getMap()) {
   this.setMap(null);
   } else {
   this.setMap(this.map_);
   }
 } 

var riads = [
  ['West Farm', 51.057123,-4.195687, 5 , 'http://www.appledore-devon.co.uk/images/villa.png' ]
];

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    var riad = locations[i];
    var myLatLng = new google.maps.LatLng(riad[1], riad[2]);
    var contentString = '<div  style="text-align:center"><h3>' + riad[0] + ' B&B</h3><div id="bodyContent">'+
    '<img src="http://www.appledore-devon.co.uk/images/4poster-s.jpg" alt="Double B&amp;B bedroom" /><br/>'+
    '<a href="http://www.appledore-devon.co.uk" />' + riad[0] + ' B&B Website</a>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 200
});

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,    
        icon: riad[4],
        title: riad[0],
        zIndex: riad[3]
    });
 google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});
  }
}