I would like to give a big nod to chuxuanhy who helped me solve this problem and kindly sent me an example. I'm going to build on that example slightly, hopefully making it something that is more applicable to a real world example.
This example uses the gmaps-utility-library and will allow you to extend the extInfoWindow to enable you to customise the look, feel and operation of this class.
Please check back on this code forum as I will be posting up a more complex real world application which I am working on. Its looking like another 2 months for me to get it finished but I would very much like to share my experiences with others who are using Reimers fantastic Google Maps control.
Before we start there are a few things which you will need to download:
1. http://gmaps-utility-library-dev.googlecode.com/svn/tags/extinfowindow/1.1/src/extinfowindow.js
2. view-source:http://gmaps-utility-library-dev.googlecode.com/svn/tags/extinfowindow/1.1/examples/css/simpleExampleWindow.css
If you work through this example then you will need to eventually learn how the style elements are set if you want to fully customise the look and make something that looks great. Instructions are here:
http://gmaps-utility-library-dev.googlecode.com/svn/tags/extinfowindow/1.1/docs/examples.html
Save files in step 1 & 2 into your root directory for simplicity.
Setting up the aspx file
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="map.aspx.cs" Inherits="map" %>
<%@ register assembly="GoogleMap" namespace="Reimers.Map" tagprefix="Reimers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>GMap-utility example</title>
<link rel="stylesheet" type="text/css" href="simpleExampleWindow.css"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<Reimers:GoogleMap OnMapLoaded="mapLoad_ServerEvent" AjaxScriptLoading="False" ID="GMap" Height="380" width="460" runat="server" GoogleKey="Your Map Key" />
</div>
</form>
</body>
</html>
Setting up the .cs code behind file
The code is below:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Reimers.Map;
using System.Text;
using Reimers.WebControls.UI;
public partial class map : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//set map defaults
GMap.ClearOverlays();
GMap.Zoom = 10;
GoogleLatLng initialPoint = new GoogleLatLng(42.420714, -0.401875);
GMap.Center = initialPoint;
}
//Need to register the extinfowindow.js file so the map can access the methods
HtmlForm form = Page.Form;
HtmlGenericControl javascript = new HtmlGenericControl();
javascript.TagName = "script";
javascript.Attributes.Add("type", "text/javascript");
javascript.Attributes.Add("src", "extinfowindow.js");
form.Controls.Add(javascript);
}
protected void mapLoad_ServerEvent(object sender, Reimers.Map.BoundsEventArgs e)
{
//call our method which creates an array of longitude and latitudes
//This array is completely arbitrary, you could be using a stored procedure to return these values from a database or wherever.
string[,] arr = returnArray();
//Ok, we have an array of results so let build these up into some javascript commands that we want to send to the map
//Using a string builder as many examples use a standard string which needs to be instantiated each time it is appended to.
StringBuilder javascript_SentBackToMap = new StringBuilder();
//looping through the array of longitude and latitudes we have created
for(int i=0; i<=arr.GetUpperBound(0)-1; i++)
{
//First step is to create a marker object and give it an ID so the map knows to assign the event to a specific marker
javascript_SentBackToMap.Append("var marker" + i.ToString() + " = new GMarker(new GLatLng(" + arr[i, 0] + "," + arr[i, 1] + "));");
//Next we need to add an event listener for the mouse over which will make the extwindow appear
javascript_SentBackToMap.Append("GEvent.addListener(marker" + i.ToString() + ", 'mouseover', function(){");
javascript_SentBackToMap.Append("marker" + i.ToString() + ".openExtInfoWindow(");
javascript_SentBackToMap.Append("reimers.map." + GMap.ID + ",");
javascript_SentBackToMap.Append("'simple_example_window',");
//assign the text to be displayed in the extended window contents
javascript_SentBackToMap.Append("'<div>Im some HTML content that will go in the simple examples ExtInfoWindow.</div>',");
javascript_SentBackToMap.Append("{breakOffset: 3});});");
////Also need to add an event that closes the extwindow when the user mouses out of the marker
javascript_SentBackToMap.Append("GEvent.addListener(marker" + i.ToString() + ", 'mouseout', function(){");
javascript_SentBackToMap.Append("marker" + i.ToString() + ".closeExtInfoWindow(reimers.map." + GMap.ID + ")});");
//Finally add the marker to the map.
javascript_SentBackToMap.Append("reimers.map." + GMap.ID + ".addOverlay(marker" + i.ToString() + ");");
}
//now we have built up the javascript command we need to assign this to the map itself. Using Reimers.dk super cool
//map control we can simply add this as follows
//NB** note that the first command is to clear any existing overlays
//NB** Note also that we are centering the map at some initial lnglat values and a zoom value
GoogleLatLng mapPanTo = new GoogleLatLng(Convert.ToDouble(arr[0, 0]), Convert.ToDouble(arr[0, 0]));
e.MapCommand = e.Map.ClearOverlays() + javascript_SentBackToMap.ToString();
}
protected string[,] returnArray()
{
//declare and init 2-dimensional array
string[,] arr = new string[10, 2];
//fill our array with some dummy longitude and latitudes
arr[0,0] = "42.420714";
arr[0, 1] = "-0.401875";
arr[1, 0] = "42.521714";
arr[1, 1] = "-0.402875";
arr[2, 0] = "42.421714";
arr[2, 1] = "-0.502875";
arr[3, 0] = "43.440714";
arr[3, 1] = "-0.431875";
arr[4, 0] = "42.450714";
arr[4, 1] = "-0.401875";
arr[5, 0] = "42.490714";
arr[5, 1] = "-0.451875";
arr[6, 0] = "42.470714";
arr[6, 1] = "-0.451875";
arr[7, 0] = "42.480714";
arr[7, 1] = "-0.431875";
arr[8, 0] = "42.490714";
arr[8, 1] = "-0.421875";
arr[9, 0] = "42.500714";
arr[9, 1] = "-0.411875";
return arr;
}
}