google maps with 'real time' actions

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; ">code.google.com/.../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

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