// JavaScript Document

  var mapLocatie = new google.maps.LatLng(51.279728,5.941404);
  var markerLocatie = new google.maps.LatLng(51.279728,5.941404);
  var marker;
  var map;
  
  var contentString = '';

	var infowindow = new google.maps.InfoWindow({
		content: contentString,
		disableAutoPan: true,
		flat: true
	});

function initialize() {
	  
    var styles = [
        {
          stylers: [
          /*{ hue: "#ff5e00" },
          { gamma: 1.09 },
          { saturation: -83 },
          { lightness: 3 }*/
          ]
        },{
          featureType: "road",
          elementType: "geometry",
          stylers: [
            { lightness: 100 },
            { visibility: "simplified" }
          ]
        },{
          featureType: "road",
          elementType: "labels",
          stylers: [
            { visibility: "on" },
            { saturation: 0 }
          ]
        }
    ];

	// Create a new StyledMapType object, passing it the array of styles,
	// as well as the name to be displayed on the map type control.
	var styledMap = new google.maps.StyledMapType(styles,
	{name: "Styled Map"});


    var mapOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        center: mapLocatie,

        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']

        }
    };

    map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

	//Associate the styled map with the MapTypeId and set it to display.
	map.mapTypes.set('map_style', styledMap);
	map.setMapTypeId('map_style');

    marker = new google.maps.Marker({
      map:map,
      draggable:true,
	  title:"Keystud",
      position: markerLocatie
    });


    var contentString = '<div id="markerContent">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1>Keystud</h1>'+
        '<div id="bodyContent">'+
        '<p>Heldensedijk 12<br />6088 NT Roggel<br />Nederland</p>' +
        '</div>'+
        '</div>';
    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        disableAutoPan: true,
        flat: true,
        maxWidth: 320
    });
    infowindow.open(map,marker);

	google.maps.event.addListener(marker, 'click', function() {
	  infowindow.open(map,marker);  
	});
	
	google.maps.event.addListener(infowindow, "domready", function() {   
	  setTimeout(function(){$("img[src$='iws3.png']").hide();},80);   
	});
	
  }

google.maps.event.addDomListener(window, 'load', initialize);