The Google API behind this is rather easy actually. You would
start by registering an API Key for Google here: 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">
�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
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)
' 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"))
�<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
�� 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.
Happy coding!