My out-of-the-box webdrawer interface lacks a map for the results! Here's what it looks like right now....

Let's fix it!

If I open the results list partial class file in the "/Views/Shared" directory, I can partition the page into two columns.

<table id="container" margin="5">
    <thead>
        <tr>
            <td width="50%"><span style="margin-left:10px">Results List</span></td>
            <td width="50%">Results Map</td>
        </tr>
    </thead>
    <tbody>
    <td id="listColumn">
            <!-- Search Results go here -->
    </td>
    <td id="mapColumn"><div id="mapDiv"></div></td>
    </tbody>
</table>

Next we import the google maps API

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=123">
</script>

But I also need to add some code that results in the map being loaded...

		<script type="text/javascript">
			var map;
			var markers = [];
			var mapmarkers = [];
			function initialize() {
				var mapOptions = {
					center: new google.maps.LatLng(27.897349,-82.155762),
					zoom: 7,
					disableDefaultUI: true,
					zoomControl: true,
					panControl: true,
					mapTypeControl: true,
					scaleControl: true,
					streetViewControl: true,
					rotateControl: true,
					overviewMapControl: true
				};
 
				map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
				addMarkers(map);
			}
            google.maps.event.addDomListener(window, "load", initialize);
		</script>

This gives me my desired user interface!

Next I need to have Webdrawer "addMarker" for each record in the results set. I decided to do this at the very bottom of the results list file, but only if there are records. And then only for those having a GPS location.

if (Model.Results.Count > 0)
{
	<script type="text/javascript">
	@foreach (TrimObject record in Model.Results)
	{
		var gpsloc = record.GetPropertyOrFieldString("RecordGpsLocation");
		if ( !String.IsNullOrWhiteSpace(gpsloc) )
		{
			@Html.Raw("addMarker('" + record.GetPropertyOrFieldString("RecordNumber") + "','" + gpsloc + "');");
		}
	}
	</script>
}

So now I've got the page calling "addMarker" for each record in the search results. I need to store each one in memory by pushing it into the array of markers. I also need to define the addMarkers method called by the initialize function during page load. In that method I iterate each of the array elements, create a marker on the map, and store that marker reference for later manipulation.

<script>
    function addMarker(rnum, ltlg) {
        var marker = { "rnum": rnum, "ltlg": ltlg };
        markers.push(marker);
    }
    function addMarkers(map) {
        for (i = 0; i < markers.length; i++) {
            var marker = markers[i];
 
            if (marker.ltlg.indexOf('POINT(') >= 0) {
                var ltlg = marker.ltlg.replace('POINT(', '').replace(')', '').split(' ');
                var mapmarker = new google.maps.Marker({
                    position: new google.maps.LatLng(ltlg[1], ltlg[0]),
                    map: map,
                    title: marker.rnum
                });
                mapmarkers.push(mapmarker);
            }
        }
    }
</script>

Now if I refresh my results window I can see records plotted on the map. Success!

Whoops.... it's becoming clear that my data import is messed up. It's including locations beyond my desired regional boundary. I should only be importing Florida facilities! That issue will be tabled for now.