Cool idea !

It'd be really nice to have some kind of our.umbraco API so trusted users could access the 'People' section data.

I'd like to build a map mashup where you could find a certified developer who is "online now" for support calls.

Absolutly great idea with the live map.
Absolutly great idea with an online list with / without map.

/Jesper

The Google API behind this is rather easy actually. You would start by registering an API Key for Google here: <span style="color: #000000; font-family: Verdana; font-size: 10px; line-height: normal; ">http://code.google.com/apis/maps/

Next, you will want to read a little about the API and browse through some of the samples to get some familiarity. The basic code for rendering an object on the map looks like this:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=[yourgooglemapsAPIkey]"></script>
    <script type="text/javascript">

    var map = null;
    var geocoder = null;

    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -112.1419), 13);
        geocoder = new GClientGeocoder();
      }
    }

    function showAddress(address, caption) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(caption);
            }
          }
        );
      }
    }
    </script>
    <script type="text/javascript" language="javascript">
<span style="white-space: pre;">  </span>initialize();
    </script>

We also need to add a DIV element to the control to render the map and a literal control to call the javascript.

<div id="map_canvas" style="width: 500px; height: 480px; float:left; border: 1px solid black;"></div>
<asp:literal id="scriptrunner" runat="server" />

In the "ShowAddress" function, you will want Umbraco to get the latest result, event, etc... to display. This example will demonstrate how to do that with the API.

Start with the Node ID that contains all the child objects (Example: A Node:Events may contain many children events underneath it like so)

+ Root
   + Events
       + Event #1 (Date 7/3/2009)
       + Event #2 (Date 8/15/2009)
       + Event #3 (Date 7/21/2009)

In your .NET Control, we first need to perform some setup. We have one public property for the "root node" that can be defined at the macro level as a contentPicker to make this easily customizable for the end user. This does not have to be public or set up on the macro, but I'm a fan of reusable code.

Imports umbraco.presentation.nodeFactory
Imports umbraco.library

Public Class GoogleMapHandler
<span style="white-space:pre">    </span>Private NodeID As Integer
<span style="white-space:pre">    </span>Private CalendarNodeID As Integer

<span style="white-space:pre">    </span>Public WriteOnly Property intNodeID() As Integer
<span style="white-space:pre">    </span>    Set(ByVal value As Integer)
        <span style="white-space:pre">    </span>NodeID = value
<span style="white-space:pre">    </span>    End Set
<span style="white-space:pre">    </span>End Property

Next we set up the Page_Load event in the code behind for the user control. In here, we are going to loop through the children of the selected root node and add them to a datatable. This will allow us to sort the resulting output by creating a data view around the table. Also, we are going to make sure that we only add records to the dataview that are less than one day old. This will help to limit the result set and reduce the memory load on the web server and increase the rendering speed when there are very large structures.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim n As Node = New Node(NodeID)

<span style="white-space:pre">    </span>' Set up the datatable to contain all the elements we need for the map
        Dim oTable As New Data.DataTable
        oTable.Columns.Add(New Data.DataColumn("nodeid"))
        oTable.Columns.Add(New Data.DataColumn("createdate", GetType(DateTime)))
        oTable.Columns.Add(New Data.DataColumn("address"))
<span style="white-space:pre">    </span>oTable.Columns.Add(New Data.DataColumn("caption"))

 <span style="white-space:pre">   </span>' Loop through the children of the selected root node and add each one to the hashtable as a GoogleMapData object
        For Each child As Node In n.Children
            If child.CreateDate >= DateAdd(DateInterval.Day, Now(), -1)
            ' add an item to the data view
<span style="white-space:pre">        </span>Dim oMapData As DataRow = oTable.NewRow()
                 oMapData.NodeID = child.Id
                 oMapData.CreateDate = child.CreateDate
                 oMapData.Address = child.GetProperty("address").Value
                 oMapData.Caption = child.GetProperty("caption").Value
                 oTable.Rows.Add(oDataRow)
<span style="white-space:pre">    </span>    End If
' Once we have the data in a table, we are going to create a new Data View that we can use to sort the information <span style="white-space:pre">   </span>' quickly

<span style="white-space:pre">    </span>Dim oDataView As DataView = New DataView(oTable)

<span style="white-space:pre">    </span>' Now sort the view in descending order to make sure the most recent event is first
<span style="white-space:pre">    </span>oDataView.Sort = "CreateDate DESC"

<span style="white-space:pre">    </span>' Finally, get the data from the row and cram it in to our JavaScript for the Map
<span style="white-space: pre;">  </span>scriptrunner.Text = "<script language=""javascript"" type=""text/javascript"">" & _
<span style="white-space: pre;">              </span>"showAddress('" & oDataView(0)("address") & "','" & oDataView(0)("caption") & "');" & _
<span style="white-space: pre;">              </span>"</script>"

End Sub        

I haven't tested this code example, but there is a similar version of this code working in a beta mode at http://www.wicatech.net/calendar-events/event-1.aspx.

Happy coding!

I'd like to see a skype "call me" link for certified developers who are online and willing to give support.

This was discussed in the support open space at codegarden.

Ouch! My post has been eaten by formatting... :-/

Reposting because of the formatting problem above.... I hope this works better this time.

Next, you will want to read a little about the API and browse through some of the samples to get some familiarity. The basic code for rendering an object on the map looks like this:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=[yourgooglemapsAPIkey]"></script>
    <script type="text/javascript">

    var map = null;
    var geocoder = null;

    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -112.1419), 13);
        geocoder = new GClientGeocoder();
      }
    }

    function showAddress(address, caption) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(caption);
            }
          }
        );
      }
    }
    </script>
    <script type="text/javascript" language="javascript">
    initialize();
    </script>

We also need to add a DIV element to the control to render the map and a literal control to call the javascript.

<div id="map_canvas" style="width: 500px; height: 480px; float:left; border: 1px solid black;"></div>
<asp:literal id="scriptrunner" runat="server" />

In the "ShowAddress" function, you will want Umbraco to get the latest result, event, etc... to display. This example will demonstrate how to do that with the API. Start with the Node ID that contains all the child objects (Example: A Node:Events may contain many children events underneath it like so)

+ Root
   + Events
       + Event #1 (Date 7/3/2009)
       + Event #2 (Date 8/15/2009)
       + Event #3 (Date 7/21/2009)

In your .NET Control, we first need to perform some setup. We have one public property for the "root node" that can be defined at the macro level as a contentPicker to make this easily customizable for the end user. This does not have to be public or set up on the macro, but I'm a fan of reusable code.

Imports umbraco.presentation.nodeFactory
Imports umbraco.library

Public Class GoogleMapHandler
        Private NodeID As Integer
        Private CalendarNodeID As Integer

Public WriteOnly Property intNodeID() As Integer
    Set(ByVal value As Integer)
        NodeID = value
    End Set
End Property

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim n As Node = New Node(NodeID)

    ' Set up the datatable to contain all the elements we need for the map
    Dim oTable As New Data.DataTable
    oTable.Columns.Add(New Data.DataColumn("nodeid"))
    oTable.Columns.Add(New Data.DataColumn("createdate", GetType(DateTime)))
    oTable.Columns.Add(New Data.DataColumn("address"))
    oTable.Columns.Add(New Data.DataColumn("caption"))

    ' Loop through the children of the selected root node and add each one to the hashtable as a GoogleMapData object
    For Each child As Node In n.Children
        If child.CreateDate >= DateAdd(DateInterval.Day, Now(), -1) Then
            ' add an item to the data view
            Dim oMapData As DataRow = oTable.NewRow()
            oMapData.NodeID = child.Id
            oMapData.CreateDate = child.CreateDate
            oMapData.Address = child.GetProperty("address").Value
            oMapData.Caption = child.GetProperty("caption").Value
            oTable.Rows.Add(oDataRow)
    End If<br />        Next     

        ' Once we have the data in a table, we are going to create a new Data View that we can use to sort the information <span style="white-space:pre">        </span>' quickly

        Dim oDataView As DataView = New DataView(oTable)

        ' Now sort the view in descending order to make sure the most recent event is first
        oDataView.Sort = "CreateDate DESC"

        ' Finally, get the data from the row and cram it in to our JavaScript for the Map
        scriptrunner.Text = "<script language=""javascript"" type=""text/javascript"">" & _
         "showAddress('" & oDataView(0)("address") & "','" & oDataView(0)("caption") & "');" & _
         "</script>"

End Sub

I haven't tested this code example, but there is a similar version of this code working in a beta mode at

http://www.wicatech.net/calendar-events/event-1.aspx.

That is an awesome feature!

would we just use jquery ajax posts to a generic handler which would return a list of locations?

is working on a reply...