Add a new ListEditor class and register JavaScript code in accordance with the Google Maps documentation to show a list of markers on a map (for more details, see https://developers.google.com/maps/documentation/javascript/examples/marker-simple):
C#[ListEditor(typeof(IGoogleMapsMarker), true)]
public class GoogleMapsListEditor : ListEditor {
public GoogleMapsListEditor(IModelListView model) : base(model) { }
protected override void AssignDataSourceToControl(object dataSource) {
WebWindow.CurrentRequestWindow.RegisterClientScript(Model.Id + "_markers_script", ConvertToJS(Enumerable.Cast<IGoogleMapsMarker>((IEnumerable)dataSource)), true);
}
protected override object CreateControlsCore() {
return CreateGoogleMapControl();
}
public static string ConvertToJS(IGoogleMapsMarker marker) {
List<IGoogleMapsMarker> markers = new List<IGoogleMapsMarker>();
if(marker != null) {
markers.Add(marker);
}
return ConvertToJS(markers);
}
public static string ConvertToJS(IEnumerable<IGoogleMapsMarker> markers) {
string markersScript = "var markers = [";
if(markers != null) {
foreach(IGoogleMapsMarker marker in markers) {
string title = (marker.Title == null) ? "" : marker.Title.Replace("'", "\\'");
markersScript += string.Format(@"{{ title: '{0}', latitude: {1}, longitude: {2} }},", title, marker.Position.Latitude, marker.Position.Longitude);
}
}
markersScript = markersScript.TrimEnd(',');
markersScript += "];";
return markersScript;
}
public static WebControl CreateGoogleMapControl() {
Panel ctrl = new Panel();
ctrl.ID = "map-canvas";
ctrl.Height = new Unit(500);
ctrl.Width = new Unit(500);
ASPxPanel geoMapControlPanel = new ASPxPanel();
geoMapControlPanel.ID = "MapPanel";
geoMapControlPanel.Height = new Unit(600);
geoMapControlPanel.Width = new Unit(600);
geoMapControlPanel.Controls.Add(ctrl);
geoMapControlPanel.Load += delegate(object sender, EventArgs e) {
geoMapControlPanel.ClientSideEvents.Init = @"
function ShowMap() {
var mapOptions = {
center: new google.maps.LatLng(" + GoogleMapsDefaults.MapCenterLatitude + ", " + GoogleMapsDefaults.MapCenterLongitude + @"),
zoom: 4,
};
var map = new google.maps.Map(document.getElementById('" + ctrl.ClientID + @"'), mapOptions);
if (typeof markers === 'undefined') {
}
else {
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var latlng = new google.maps.LatLng(data.latitude, data.longitude);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: data.title
});
}
}
}";
};
return geoMapControlPanel;
}
Note that Google Maps JavaScript code is not designed to be registered with the help of the WebWindow.RegisterClientScriptInclude method. Instead, update the 'Default.aspx' file in your XAF ASP.NET project and include a reference to Google Maps JavaScript code as shown below:
ASPx<head runat="server">
<title>Main Page</title>
<meta http-equiv="Expires" content="0" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" ></script>
</head>
Add a new WebPropertyEditor class to show a single marker in a similar way:
C#[PropertyEditor(typeof(IGoogleMapsMarker), true)]
public class GoogleMapsPropertyEditor : WebPropertyEditor {
public GoogleMapsPropertyEditor(Type objectType, IModelMemberViewItem info) : base(objectType, info) {
AllowEdit.SetItemValue(GetType().Name, false); //readonly
}
protected override WebControl CreateViewModeControlCore() {
return GoogleMapsListEditor.CreateGoogleMapControl();
}
protected override void ReadViewModeValueCore() {
WebWindow.CurrentRequestWindow.RegisterClientScript(Model.Id + "_markers_script", GoogleMapsListEditor.ConvertToJS((IGoogleMapsMarker)PropertyValue), true);
}
This solution demonstrates a basic scenario and we will be happy to review screenshots or a short video that demonstrates how the Maps control helps your clients do their work.
This information will help us investigate whether it is possible to provide a universal and useful solution for this scenario.
Don't hesitate to write to us here or in a separate private ticket if you are interested in this integration. Your time and cooperation are appreciated.
UPDATED by Dennis(DevExpress Support):
An improved version of the sample is available at GoogleMapsInXafWebUIExample archive attached to this post. Main improvements are described and shown in the Google Maps integration in XAF Web UI - Looking for real use-cases! blog post.