if (GBrowserIsCompatible()) {
var marker;
var marker2;
var overlayInstance = null;
var map3;
var client;
var lastMarkerLocation;
var lastMarkerLocation2;
var panorama;
var panorama2;

function createMarker(point,html) {

        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }
function createMarker2(point,html) {

        var marker2 = new GMarker(point);
        GEvent.addListener(marker2, "click", function() {
          marker2.openInfoWindowHtml(html);
        });
        return marker2;
      }

function load() {
  client = new GStreetviewClient();

  var latlng = new GLatLng(-28.642154,153.613511);
  var latlng2 = new GLatLng(-28.641174,153.612986);
    var latlng_center = new GLatLng(-28.642154,153.613511);

  map3 = new GMap2(document.getElementById("map3"));

  map3.addControl(new GLargeMapControl());
  map3.addControl(new GMapTypeControl());

  map3.setCenter(new GLatLng(-28.638331,153.602943),15);

  map3.setCenter(latlng_center, 15);
  
  map3.setMapType(G_HYBRID_MAP);

  var guyIcon = new GIcon(G_DEFAULT_ICON);
  guyIcon.image = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-0.png";
  guyIcon.transparent = "http://maps.google.com/intl/en_us/mapfiles/cb/man-pick.png";
  guyIcon.imageMap = [
        26,13, 30,14, 32,28, 27,28, 28,36, 18,35, 18,27, 16,26,
        16,20, 16,14, 19,13, 22,8
     ];
  guyIcon.iconSize = new GSize(49, 52);
  guyIcon.iconAnchor = new GPoint(25, 35);  // near base of guy's feet
  guyIcon.infoWindowAnchor = new GPoint(25, 5);  // top of guy's head

  marker = new GMarker(latlng, {icon: guyIcon, draggable: true});
  map3.addOverlay(marker);

  marker2 = new GMarker(latlng2, {icon: guyIcon, draggable: true});
  map3.addOverlay(marker2);

  lastMarkerLocation = latlng;
  lastMarkerLocation2 = latlng2;
  GEvent.addListener(marker, "dragend", onDragEnd);
  GEvent.addListener(marker, "click", openPanoramaBubble);
  GEvent.addListener(marker2, "dragend", onDragEnd2);
  GEvent.addListener(marker2, "click", openPanoramaBubble2);
}


function openPanoramaBubble() {


  var contentNode = document.createElement('div');
  contentNode.style.textAlign = 'center';
  contentNode.style.width = '650px';
  contentNode.style.height = '300px';
  contentNode.innerHTML = 'Loading panorama';

  var smallNode = document.createElement('div');
  smallNode.style.width = '350px';
  smallNode.style.height = '200px';
  smallNode.id = 'pano';
  marker.openInfoWindow(smallNode, {maxContent: contentNode, maxTitle: "Full screen"});

  panorama = new GStreetviewPanorama(smallNode);
  panorama.setLocationAndPOV(marker.getLatLng(), {yaw:360});
  GEvent.addListener(panorama, "yawchanged", onYawChange);


  var iw = map3.getInfoWindow();
  GEvent.addListener(iw, "maximizeend", function() {
    panorama.setContainer(contentNode);
    window.setTimeout("panorama.checkResize()", 5);
  });
  GEvent.addListener(marker, "infowindowbeforeclose", function() {
    panorama.remove();
  });
} <!-- end of open bubble function -->



function openPanoramaBubble2() {
  var contentNode2 = document.createElement('div');
  contentNode2.style.textAlign = 'center';
  contentNode2.style.width = '650px';
  contentNode2.style.height = '300px';
  contentNode2.innerHTML = 'Loading panorama';

  var smallNode2 = document.createElement('div');
  smallNode2.style.width = '350px';
  smallNode2.style.height = '200px';
  smallNode2.id = 'pano';
  marker2.openInfoWindow(smallNode2, {maxContent: contentNode2, maxTitle: "Full screen"});


  panorama2 = new GStreetviewPanorama(smallNode2);
  panorama2.setLocationAndPOV(marker2.getLatLng(), {yaw:210});
  GEvent.addListener(panorama2, "yawchanged", onYawChange);


  var iw = map3.getInfoWindow();
  GEvent.addListener(iw, "maximizeend", function() {
    panorama2.setContainer(contentNode2);
    window.setTimeout("panorama2.checkResize()", 5);
  });
  GEvent.addListener(marker2, "infowindowbeforeclose", function() {
    panorama2.remove();
  });
} <!-- end of open bubble function -->


function onYawChange(newYaw) {
  var GUY_NUM_ICONS = 16;
  var GUY_ANGULAR_RES = 360/GUY_NUM_ICONS;
  if (newYaw < 0) {
    newYaw += 360;
  }
  guyImageNum = Math.round(newYaw/GUY_ANGULAR_RES) % GUY_NUM_ICONS;
  guyImageUrl = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-" + guyImageNum + ".png";
  marker.setImage(guyImageUrl);
}
function onYawChange2(newYaw2) {
  var GUY_NUM_ICONS2 = 16;
  var GUY_ANGULAR_RES2 = 360/GUY_NUM_ICONS2;
  if (newYaw2 < 0) {
    newYaw2 += 360;
  }
  guyImageNum = Math.round(newYaw2/GUY_ANGULAR_RES2) % GUY_NUM_ICONS2;
  guyImageUrl = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-" + guyImageNum + ".png";
  marker2.setImage(guyImageUrl);
}

function onDragEnd() {
  var latlng = marker.getLatLng();
  //if (panorama) {
    client.getNearestPanorama(latlng, onResponse);
  //}
}

function onDragEnd2() {
  var latlng2 = marker2.getLatLng();
  //if (panorama2) {
    client.getNearestPanorama(latlng2, onResponse2);
  //}
}


function onResponse(response) {
  if (response.code != 200) {
    marker.setLatLng(lastMarkerLocation);
  } else {
    var latlng = new GLatLng(response.Location.lat, response.Location.lng);
    marker.setLatLng(latlng);
    lastMarkerLocation = latlng;
    openPanoramaBubble();
  }
}
function onResponse2(response) {

  if (response.code != 200) {
    marker2.setLatLng(lastMarkerLocation2);
  } else {
    var latlng2 = new GLatLng(response.Location.lat, response.Location.lng);
    marker2.setLatLng(latlng2);
    lastMarkerLocation2 = latlng2;
    openPanoramaBubble2();
  }
}
}