<div class="row">
    <div class="col-lg-12 map-row">
	<!-- begin map -->
	<div id="map-canvas" data-lat="43.794037" data-lng="-79.419264" data-zoom="8"></div>
	<div class="addresses-block">
	    <a class="marker" data-lat="43.518299" data-lng="-79.877404" data-marker="img/marker2.png" data-string="Milton"></a>
	    <a class="marker" data-lat="43.471371" data-lng="-79.912705" data-marker="img/marker2.png" data-string="Burlington"></a>
	    <a class="marker" data-lat="43.850855" data-lng="-79.020373" data-marker="img/marker2.png" data-string="Ajax"></a>
	    <a class="marker" data-lat="43.837208" data-lng="-79.508276" data-marker="img/marker2.png" data-string="Vaughan"></a>
	    <a class="marker" data-lat="43.653226" data-lng="-79.383184" data-marker="img/marker2.png" data-string="Toronto"></a>
	    <a class="marker" data-lat="43.882840" data-lng="-79.440281" data-marker="img/marker2.png" data-string="Richmond Hill"></a>
	    <a class="marker" data-lat="43.838412" data-lng="-79.086758" data-marker="img/marker2.png" data-string="Pickering"></a>
	    <a class="marker" data-lat="43.467517" data-lng="-79.687666" data-marker="img/marker2.png" data-string="Oakville"></a>
	    <a class="marker" data-lat="43.589045" data-lng="-79.644120" data-marker="img/marker2.png" data-string="Mississauga"></a>
	    <a class="marker" data-lat="43.731548" data-lng="-79.762418" data-marker="img/marker2.png" data-string="Brampton"></a>
	    <a class="marker" data-lat="44.296296" data-lng="-79.436232" data-marker="img/marker2.png" data-string="Georgina"></a>
	    <a class="marker" data-lat="44.389356" data-lng="-79.690332" data-marker="img/marker2.png" data-string="Barrie"></a>
	    <a class="marker" data-lat="44.608246" data-lng="-79.419678" data-marker="img/marker2.png" data-string="Orillia"></a>
	    <a class="marker" data-lat="43.897093" data-lng="-78.865791" data-marker="img/marker2.png" data-string="Oshawa"></a>
	    <a class="marker" data-lat="43.450301" data-lng="-80.483192" data-marker="img/marker2.png" data-string="Kitchener"></a>
	    <a class="marker" data-lat="43.544805" data-lng="-80.248167" data-marker="img/marker2.png" data-string="Guelph"></a>
	</div>
	<!-- end map -->
    </div>
</div>


$(function() {

	var marker = [], infowindow = [], map, image = 'img/marker2.png';

	function addMarker(location,name,contentstr,markimg){
        marker[name] = new google.maps.Marker({
            position: location,
            map: map,
			icon: markimg
        });
        marker[name].setMap(map);

		infowindow[name] = new google.maps.InfoWindow({
			content:contentstr
		});

		google.maps.event.addListener(marker[name], 'click', function() {
			infowindow[name].open(map,marker[name]);
		});
    }

	function initialize() {

		var lat = $('#map-canvas').attr("data-lat");
		var lng = $('#map-canvas').attr("data-lng");

		var myLatlng = new google.maps.LatLng(lat,lng);

		var setZoom = parseInt($('#map-canvas').attr("data-zoom"));

		var styles = [{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}]
		var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});

		var mapOptions = {
			zoom: setZoom,

			panControl: false,
			panControlOptions: {
				position: google.maps.ControlPosition.LEFT_BOTTOM
			},
			zoomControl: true,
			zoomControlOptions: {
				style: google.maps.ZoomControlStyle.LARGE,
				position: google.maps.ControlPosition.LEFT_BOTTOM
			},
			streetViewControl: true,
			streetViewControlOptions: {
				position: google.maps.ControlPosition.LEFT_BOTTOM
			},
			scrollwheel: false,
			center: myLatlng,
			mapTypeControlOptions: {
			  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
			}

		};
		map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

		map.mapTypes.set('map_style', styledMap);
  		map.setMapTypeId('map_style');


		$('.addresses-block a').each(function(){
			var mark_lat = $(this).attr('data-lat');
			var mark_lng = $(this).attr('data-lng');
			var this_index = $('.addresses-block a').index(this);
			var mark_name = 'template_marker_'+this_index;
			var mark_locat = new google.maps.LatLng(mark_lat, mark_lng);
			var mark_str = $(this).attr('data-string');
			var mark_img = $(this).attr('data-marker');
			addMarker(mark_locat,mark_name,mark_str,mark_img);
		});

	}

	$(window).load(function(){
		setTimeout(function(){initialize();}, 500);
	});

});