<%@ Master Language="C#" MasterPageFile="~/masterpages/Master.master" AutoEventWireup="true" %>

 
 
<asp:Content ContentPlaceHolderId="SpecialContent" runat="server">
  <!-- Insert "SpecialContent" markup here -->
</asp:Content>

  
<asp:Content ContentPlaceHolderId="Head" runat="server">
  
  <script src="/scripts/mapr/jquery.signalR.js" type="text/javascript"></script>
  <script src="/scripts/mapr/mapR.js" type="text/javascript"></script>
  <script src="/signalr/hubs" type="text/javascript"></script>

  <script type="text/javascript" src="//www.google.com/jsapi?key=ABQIAAAA0NU1XDEzOML2eyLWhmJ9LBSxfxjTTu64lrS209cfOxNPw1orBxShNTRVj48sdN3ldWVic17nG0GLeA"></script>
  <script type="text/javascript" src="//tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
  
  
  <script type="text/javascript">
    jQuery(document).ready(function(){
      init_maps();
    });
    
    var cloudmade;
    var map;
    
    function init_maps(){
    cloudmade = new CM.Tiles.CloudMade.Web({key: 'f6690526ff844cc783025e8234a4f0fa', styleId:23746});
    map = new CM.Map('map', cloudmade);
    var lat = 51.514;
    var lng = -0.137;
    
      
    if (google.loader.ClientLocation) {
       lat = google.loader.ClientLocation.latitude;
       lng = google.loader.ClientLocation.longitude;
    } 

    map.setCenter(new CM.LatLng(lat,lng), 4);
    //map.disableScrollWheelZoom();
  }
  
    
  function renderPin(act){
    
    alert(act);
    
    var location = new CM.LatLng(act.Lat, act.Long);
    
    var CloudMadeIcon = new CM.Icon();
    CloudMadeIcon.image = "/images/dropPointer.png";
    CloudMadeIcon.iconSize = new CM.Size(8, 13);
    CloudMadeIcon.iconAnchor = new CM.Point(4, 13);
        
    var marker= new CM.Marker(location, { title: act.Text, icon: CloudMadeIcon} );
    map.addOverlay(marker);

    var html = "<div class='makr'><img width='32' height='32' src='" + act.Icon + "'>" + 
              "<h3 style='text-align: center'><a href='" + act.Url + "'>" + act.Text + "</a></h3>" +
              "<small>" + act.Description + "</small>" +
              "</div>"
    
        
    marker.bindInfoWindow(html);    
    marker.openInfoWindow(html);
  }
  
</script>
</asp:Content>
  
  
<asp:Content ContentPlaceHolderId="Main" runat="server">
  <div id="map" style="width: 100%; height: 800px"></div>  
</asp:Content>