function load() {
var map = document.getElementById("map");
if (GBrowserIsCompatible()) {
var gmap = new GMap2(map);
      // ====== Restricting the range of Zoom Levels =====
      // Get the list of map types      
      var mt = gmap.getMapTypes();
      // Overwrite the getMinimumResolution() and getMaximumResolution() methods
      for (var i=0; i<mt.length; i++) {
        mt[i].getMinimumResolution = function() {return 13;}
        mt[i].getMaximumResolution = function() {return 19;}
      }
      // ====== END OF Restricting the range of Zoom Levels =====
gmap.addControl(new GLargeMapControl()); //draggable zoom
//gmap.addControl( new GSmallMapControl());
gmap.removeMapType(G_SATELLITE_MAP); 
gmap.addControl( new GMapTypeControl());
gmap.addControl( new GScaleControl());
gmap.addControl( new GOverviewMapControl(new GSize(100,100)) );
gmap.setCenter(new GLatLng(51.9999,-0.9881), 14);
GDownloadUrl("points.json", function(data, responseCode) {parseJson(data, gmap);});
       // ====== Restricting the Map display within set Boundaries =====
       // The allowed region which the whole map must be within
      var allowedBounds = new GLatLngBounds(new GLatLng(51.977796273481204, -1.0225868225097656), new GLatLng(52.015234519950584, -0.9308338165283203));

      // Add a move listener to restrict the bounds range
      GEvent.addListener(gmap, "move", function() {checkBounds(allowedBounds, gmap);});
      //GEvent.addListener(gmap, "move", function() {checkBounds2(allowedBounds, gmap);});

      // ====== END OF Restricting the Map display within set Boundaries =====
      

// ===== adding a polygon with a hole =====
var polygon = new GPolygon.fromEncoded({
polylines: [
  {points: "{}v|H|nwEeJiju@`t[e]zN~l~@wx[ocG", //large square
  levels: "BBBBB",
  color: "#ff0000",
  opacity: 0.8,
  weight: 5,
  numLevels: 4,
  zoomFactor: 32},
  {points: "qig|Hn|{DI_CH{JAmAgCoBUE_@cAo@?y@Wi@q@q@_Bu@cAy@]cCeBaASs@ES\\Mf@Ax@Y\\USe@LUf@i@O]N_@Hm@c@q@G_C}AmCqCGo@X_A?y@_@eAs@s@a@{@]M]RSBQ}@YYa@Mu@H[IK]{AyGGiANk@XIV[JcABsAGy@Ro@TYUiBCaB?}Dm@yDo@u@Wo@Ou@KcAE_AJy@Vk@b@k@tCsD`@a@p@Ib@I\\Wj@oB`AwCl@cA~BoBfAg@rA]x@CL\\VB\\[x@_Ah@WZmAh@iA|BiDl@aB\\mAC_Li@mDeA{CuAsCe@QMg@Wk@oB_DiCkB]y@kCa@_Cc@kA@}@fAa@vAeAx@eAVmAQyAIeARe@mAs@Ia@Z{@fBeC`E}@Vi@t@{@z@_BLu@Ei@WgBC_A?cAHQ|@Kz@k@F}At@aAt@oAW_@mA{Dg@gAHeCgAgGbA_Bx@q@nBy@hAw@H[a@Ek@[{@y@GgCbAi@d@?t@Dx@]~@m@~@a@vA}@bAmAn@sA\\sALJbAG~@S~@Ix@^hA\\tA@hAIt@DVNRjAlAJV?\\_@jELLZHpAp@N`@@n@Cp@In@?x@FbAHf@v@d@Hb@Ad@SrAF`@TBhAHP\\D`@g@nBBfAPj@p@f@R~@I|@a@`@s@DWV]`Bo@Hq@EQLSdJBdBJfC^zAAjBWtBs@hDGrA@pAYzAo@lAO|AKlCEzCPlAd@j@h@Il@Hl@n@ZC\\mA`@VLfAA~@hAj@~ACdBZZVyBrJyBhKyBlGeDdEk@j@i@b@m@LwAx@_CxBwBlAcBj@kAf@sDpCcEzCg@d@eBz@y@PoC~D}CrFqBjScDj[KdBKrC]zCu@vD^|AdAjGTvABbCKfEYtEO`DeB`C}ArCoBzCwA~Cb@lAf@nB^pCj@bC~ErEh@Kn@Px@?bC_@dAU\\S^Lb@EVDTDl@vApArBp@vAlEzGrA`@fBF`@Rf@t@p@pAh@t@f@X~@fC|@ZdAZvC?fAGp@?f@MXM`@`@tB|D^`@Jt@N@nA[bBXp@L~@?r@i@z@_@f@a@b@XLu@Xm@\\M\\Rj@LfAa@b@i@p@cArAe@fBa@lA]LxANzG\\zJgAl@~DvRzAnKFLvAw@`@Fd@XbASPo@`@g@l@M`AsMhCuVfCLvEn@lBDdBu@ZmIdAq_@ZmJnBfAnDxBRCn@\\t@oKzBg`@cBiFi@}FMqPnFgAz@?dC?h@IzD{E~AkBrCaCVqBNsBGmCy@iFGaBBqAI{@T{C|@uCf@mA`@uBMe@GeAR[AeBWFk@b@Yc@La@fBaCn@gBNmACwAL[Za@Xk@@q@Ly@dBkEZSI]Ce@Jg@T?TRTMHY`A}@Vu@Dy@Au@NO?[b@cAFk@Ng@Va@@k@Na@RWDa@L]He@?g@DaBGa@Oa@I[", //BTC boundary
  levels: "BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"}],
  fill: true,
  color: "#000000",
  opacity: 0.8,
  outline: true
});
gmap.addOverlay(polygon);
// ==== end of adding a polygon with a hole =======

} else {
alert("Sorry, your browser cannot handle the true power of Google Maps");
}
}

function createMarker(input) {
var marker = new GMarker(input.point);
//GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml( input.ro_ad + " vs. " + input.gr_id );});
GEvent.addListener(marker, 'mouseover', function(){ marker.openInfoWindowHtml(formatWindow(input));});
//GEvent.addListener(marker, 'mouseout', function(){ marker.closeInfoWindow();}); 
GEvent.addListener(marker, "click", function(){ marker.closeInfoWindow();} );
return marker;
}

function parseJson (doc, gmap) {
var jsonData = eval("(" + doc + ")");
for (var i = 0; i < jsonData.markers.length; i++) {
var marker = createMarker(jsonData.markers[i]);
gmap.addOverlay(marker);
}
}

function formatWindow (input) {
var html = "<div class=\"bubble\">";
html += "A Highway Salt Bin is located at<br>";
html += "<h3>" + input.road + ", Buckingham.</h3>";
html += "<p>" + input.grid_ref + "</p>";
html += "<p>Salt bins are filled during September/October<br>by Buckinghamshire County Council";
html += "</p></div>";
return html;
}
     
 function checkBounds2(allowedBounds, gmap){
   // this is the bounds object that limits the map
   //var bounds = map.GBounds(-160.02685546875, 22.6748473511885, -155.0830078125, 18.5629474428883);
   // get new lat and lng location
   var loc = gmap.GLocation(evt.newLat, evt.newLng);
   // check if we are out of bounds
   if (!allowedBounds.containsLatLng(loc))
   {
      evt.newLat = evt.newLat > allowedBounds.top ? allowedBounds.top : (evt.newLat < allowedBounds.bottom ? allowedBounds.bottom : evt.newLat);
      evt.newLng = evt.newLng > allowedBounds.right ? allowedBounds.right : (evt.newLng < allowedBounds.left ? allowedBounds.left : evt.newLng);
      gmap.setCenter(gmap.GLocation(evt.newLat, evt.newLng));
   }
}
    
     
      
      // If the map position is out of range, move it back
      function checkBounds(allowedBounds, gmap) {
        // Perform the check and return if OK
        //if (allowedBounds.contains(gmap.getBounds())){ 
        //if (allowedBounds.contains(gmap.getCenter())) {
        var pointt = gmap.getCenter();
        if (allowedBounds.containsLatLng(pointt)) {
          return;
        }
        // It`s not OK, so find the nearest allowed point and move there
        var C = gmap.getCenter();
        var X = C.lng();
        var Y = C.lat();
        var AmaxX = allowedBounds.getNorthEast().lng();
        var AmaxY = allowedBounds.getNorthEast().lat();
        var AminX = allowedBounds.getSouthWest().lng();
        var AminY = allowedBounds.getSouthWest().lat();
        if (X < AminX) {X = AminX;}
        if (X > AmaxX) {X = AmaxX;}
        if (Y < AminY) {Y = AminY;}
        if (Y > AmaxY) {Y = AmaxY;}
        //alert ("Restricting "+Y+" "+X);
        gmap.setCenter(new GLatLng(Y,X));
      }

window.onload = load;
window.onunload = GUnload;