$(function() { // onload handler
      var zetcenter = new google.maps.LatLng(59.085738569819505, -4.74609375);
      var mapOptions = {
        zoom:      3,
        center:    zetcenter,
        scrollwheel: false,
        mapTypeControl: false,
        panControl: false,
        streetViewControl: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
        maxZoom: 10,
        minZoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }


 
      var map = new google.maps.Map($("#map_canvas")[0], mapOptions);
 
  var flag = 'pop/flag-pin.png';
  var flagLatLng = new google.maps.LatLng(60.157858871523764, -1.1503833532333374);
  var flagMarker = new google.maps.Marker({
      position: flagLatLng,
      map: map,
      icon: flag
  });



      var currentThing = null;
      var info = $('#thingDetails');
      var icons = {
        'thing-marker':          'pop/pin2.png',
        'thing-marker-active': 'pop/pin2-active.png'
      }

      var image = new google.maps.MarkerImage('pop/pin2.png', 
                                               new google.maps.Size(40, 35),
                                               new google.maps.Point(0,0),
                                               new google.maps.Point(3, 35));
 
      $.getJSON('map.json', function(things) {
        $(things).each(function() {
          var thing = this;
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(thing.position[0], thing.position[1]),
            map:      map,
            title:    thing.title,
            when:    thing.when,
            url:     thing.url,
            icon:     image,
            facebook: thing.facebook,
            twitter: thing.twitter            
          });
 
          google.maps.event.addListener(marker, 'click', function() {
            var hidingMarker = currentThing;
            var slideIn = function(marker) {
              $('h1', info).text(thing.title);
              $('span.description',  info).html('');
              $('span.when',  info).html('');
              $('span.url',  info).html('');
              $('span.twitter',  info).html('');
              $('span.facebook',  info).html('');
              if (thing.description != "") { $('span.description',  info).html('<span class="inner">' + thing.description + '</span>') };
              if (thing.when != "") { $('span.when',  info).html('<span class="inner">' + thing.when + '</span>') };
              if (thing.url != "") { $('span.url',  info).html('<span class="inner">' + thing.url + '</span>') };
              if (thing.twitter != "") { $('span.twitter',  info).html('<span class="inner"><a href="' + thing.twitter + '">Twitter</a></span>') };
              if (thing.facebook != "") { $('span.facebook',  info).html('<span class="inner"><a href="' + thing.facebook + '">Facebook</a></span>') };
              info.animate({left: '0'});
            }
 
            marker.setIcon(image);
 
            if (currentThing) {
              currentThing.setIcon(image);
 
              info.animate(
                { left: '-320px' },
                { complete: function() {
                  if (hidingMarker != marker) {
                    slideIn(marker);
                    currentThing = marker;
                  } else {
                    currentThing = false;
                  }
                }}
              );
            } else {
              slideIn(marker);
              currentThing = marker;
            }
            
          });
        });
      });
    });