var map;
$(document).ready(function() {

  var informStyles = [
 {
    featureType: "landscape",
    stylers: [
      { visibility: "off" },
      { saturation: -100 },
      { lightness: -100 }
    ]
  },{
    featureType: "poi",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { saturation: -100 },
      { lightness: 100 }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { saturation: -100 }
    ]
  },{
    featureType: "transit",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    stylers: [
      { lightness: 100 }
    ]
  }
 ]

  var inmap = new google.maps.LatLng(49.2837, -123.1065);

  var myOptions = {
    zoom: 16,
    center: inmap,
    mapTypeControlOptions: {
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'invan']
    }
  };

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

  var contentStringPark = '<div id="content" style="margin-left:0px;">'+
        '<h1 id="markHeading" class="markHeading">Client Parking</h1>'+
        '<div>'+
        'Gated client parking is accessed through the rear of our ' +
        '50 Water Street showroom, via Blood Alley.<br /><br />'+
        ' Please call the front desk at <a href="tel:+1-604-682-3868">604-682-3868</a>'+
        ' for access.</p>'+
        '</div>'+
        '</div>';
        
    var infowindow = new google.maps.InfoWindow({
        content: contentStringPark,
        maxWidth: 400
  });
      
  var parkingImage = new google.maps.MarkerImage('imgs/parking.png',
      new google.maps.Size(560,290),
      new google.maps.Point(0,0),
      new google.maps.Point(6,21));

  var parkingPos = new google.maps.LatLng(49.2833, -123.1059);

  var markerPark = new google.maps.Marker({
      position: parkingPos,
      map: map,
      icon: parkingImage,
      title:"Client Parking",
      zIndex:1
  });

  var fiftyImage = new google.maps.MarkerImage('imgs/fifty.png',
      new google.maps.Size(560,290),
      new google.maps.Point(0,0),
      new google.maps.Point(18,41));

  var fiftyPos = new google.maps.LatLng(49.2834,-123.1056);

  var markerFifty = new google.maps.Marker({
      position: fiftyPos,
      map: map,
      icon: fiftyImage,
      title:"50 Water Street",
      clickable: false,
      zIndex:3
  });

 var ninesevenImage = new google.maps.MarkerImage('imgs/nineseven.png',
      new google.maps.Size(560,290),
      new google.maps.Point(0,0),
      new google.maps.Point(18,41));

  var ninesevenPos = new google.maps.LatLng(49.2839,-123.106);

  var markerNineseven = new google.maps.Marker({
      position: ninesevenPos,
      map: map,
      icon: ninesevenImage,
      title:"97 Water Street",
      clickable: false,
      zIndex:2
  });

  var styledMapOptions = {
    name: "Informed"
  };

  var iRoadMapType = new google.maps.StyledMapType(
      informStyles, styledMapOptions);

  map.mapTypes.set('invan', iRoadMapType);
  map.setMapTypeId('invan');

  google.maps.event.addListener(markerPark, 'click', function() {
  infowindow.open(map,markerPark);
  });

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

});