Adding a map to Webdrawer

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">
            <td width="50%"><span style="margin-left:10px">Results List</span></td>
            <td width="50%">Results Map</td>
    <td id="listColumn">
            <!-- Search Results go here -->
    <td id="mapColumn"><div id="mapDiv"></div></td>

Next we import the google maps API

<script type="text/javascript" src="">

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);
            google.maps.event.addDomListener(window, "load", initialize);

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 + "');");

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.

    function addMarker(rnum, ltlg) {
        var marker = { "rnum": rnum, "ltlg": ltlg };
    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

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.