8 Replies Latest reply on Jan 24, 2017 9:35 AM by aduarte RSS
    Digital One Explorer

    How to use google maps libraries like Drawing Library, Geometry Library and Places Library ?

    Hi all,

     

    Does anyone know how to use google maps libraries like drawing library , geometry library and places library in google maps widget in thingworx ?

     

    Thanks

      • Re: How to use google maps libraries like Drawing Library, Geometry Library and Places Library ?
        ttielebein Collaborator

        There is a section of the Custom Extension Development Guide that talks about using custom widgets, and about using third party libraries in custom widgets.

         

        Hope this helps!

        • Re: How to use google maps libraries like Drawing Library, Geometry Library and Places Library ?
          aduarte Explorer

          Hello,

           

          On the metadata.xml you can replace:
          <FileResource description="" isRuntime="true" isDevelopment="false" type="JS" url="https://maps.google.com/maps/api/js?sensor=false"/>
          By:

          <FileResource type="JS" url="https://maps.google.com/maps/api/js?sensor=false&amp;libraries=drawing,geometry"

            description="" isDevelopment="false" isRuntime="true" />

           

          I hope this can help you.

            • Re: How to use google maps libraries like Drawing Library, Geometry Library and Places Library ?
              Digital One Explorer

              Hi Ana,

              Thanks for your help.

              I have updated the metadata.xml file as you said.

              But how to use that in the map ? I am unable to use it .

                • Re: How to use google maps libraries like Drawing Library, Geometry Library and Places Library ?
                  aduarte Explorer

                  Hello,

                   

                  I added another data source to save the shapes and i call the function that i use to add the drawing option at the updateProperty.

                  But I think that you can added the code that you need at the afterRender, after having the map:

                        this.map = new google.maps.Map(document.getElementById(this.jqElementId), options);

                   

                  var polyOptions = {
                    strokeOpacity: 0.9,
                    strokeWeight: 2,
                    strokeColor: zoneColor,
                    fillOpacity: 0.50,
                    fillColor: zoneColor,
                    editable: true,
                    draggable: true             
                   };
                  
                  drawingManager = new google.maps.drawing.DrawingManager({
                    drawingControl: true,
                    drawingControlOptions: {
                     position: google.maps.ControlPosition.TOP_CENTER,
                     drawingModes: [
                           google.maps.drawing.OverlayType.CIRCLE,
                           google.maps.drawing.OverlayType.POLYGON
                     ]
                    },
                    polygonOptions: polyOptions,
                    circleOptions: polyOptions
                  });
                  
                  drawingManager.setMap(this.map);
                  

                   

                  drawingManager is declared as global variable.

                   

                  For my case, i just want to give the option to draw polygons and circles.

                  This is only for drawing the shapes.

                   

                  I hope this can help you,

                  Regards.

                  drawingManager

                    • Re: How to use google maps libraries like Drawing Library, Geometry Library and Places Library ?
                      Digital One Explorer

                      Hi Ana,

                      I tried the above steps as you said but still I can't see the drawing options available at the top of the map.

                      Can you please help regarding this ?

                        • Re: How to use google maps libraries like Drawing Library, Geometry Library and Places Library ?
                          aduarte Explorer

                          Hello,

                           

                             Of course, can you send me your code please?

                            • Re: How to use google maps libraries like Drawing Library, Geometry Library and Places Library ?
                              Digital One Explorer

                              TW.Runtime.Widgets.googlemap = function () {

                               

                               

                               

                               

                                  var infoWindow = undefined;

                                var drawingManager = undefined;

                                var userHasPannedOrZoomedSinceAutoZoom = false;

                                var initialData = true;

                                var weAreChangingBounds = false;

                                var autoZoomBehavior = 'every-data-change';

                                  var regionInfoWindow = undefined;

                                  var lastRegionNumber = undefined;

                                  var lastData = undefined;

                                  var lastRegionData = undefined;

                                  var infoId = 'MapInfoWindow' + TW.uniqueId();

                                  var tooltipMashupWidth = 100;

                                  var tooltipMashupHeight = 100;

                                  var isMashupTooltipConfigured = false;

                                  var isRegionTooltipConfigured = false;

                                  var dataInfotable = undefined;

                               

                               

                                  this.runtimeProperties = function () {

                                      return {

                                       'supportsAutoResize': true,

                                          'needsDataLoadingAndError': true,

                                          'propertyAttributes': {

                                              'TooltipLabel1': {'isLocalizable': true},

                                              'TooltipLabel2': {'isLocalizable': true},

                                              'TooltipLabel3': {'isLocalizable': true},

                                              'TooltipLabel4': {'isLocalizable': true},

                                              'RegionTooltipLabel1': {'isLocalizable': true},

                                              'RegionTooltipLabel2': {'isLocalizable': true},

                                              'RegionTooltipLabel3': {'isLocalizable': true},

                                              'RegionTooltipLabel4': {'isLocalizable': true}

                                          }

                                      };

                                  };

                               

                               

                                this.resize = function(width,height) {

                                try {

                                          google.maps.event.trigger(this.map, 'resize');

                                } catch(err) {}

                                };

                               

                               

                                  this.renderHtml = function () {

                               

                               

                                      tooltipMashupWidth = thisWidget.getProperty('TooltipMashupWidth');

                                      tooltipMashupHeight = thisWidget.getProperty('TooltipMashupHeight');

                                   var oldAutoZoom = this.getProperty('AutoZoom');

                                   autoZoomBehavior =  this.getProperty('AutoZoomBehavior');

                                   switch( autoZoomBehavior ) {

                                   case 'disable-on-user-pan-zoom':

                                   case 'only-when-autozoom-invoked':

                                       case 'only-initial-data':

                                   // leave these alone

                                   break;

                                   default:

                                   // anything else, default to our old behavior

                                   if( oldAutoZoom === undefined || oldAutoZoom === true )  {

                                   autoZoomBehavior = 'every-data-change';

                                   } else if( oldAutoZoom === false ) {

                                   autoZoomBehavior = 'only-when-autozoom-invoked';

                                   } else {

                                   autoZoomBehavior = 'every-data-change';

                                   }

                                   break;

                                   }

                               

                               

                                      var mashupName = thisWidget.getProperty('TooltipMashupName');

                                      if (mashupName !== undefined && mashupName.length > 0) {

                                          isMashupTooltipConfigured = true;

                                      }

                               

                               

                                      try {

                                          if (google !== undefined && google !== null) {

                                              this.haveGoogleMaps = true;

                                          }

                                      }

                                      catch (errmsg) {

                                      }

                               

                               

                                      if (this.haveGoogleMaps)

                                          return '<div class="widget-content widget-map-runtime"></div>';

                                      else

                                          return '<div class="widget-content widget-map-runtime"><span class="textsize-large">Google Maps Are Not Available</span></div>';

                                  };

                               

                               

                                  var thisWidget = this;

                                 

                                  this.haveGoogleMaps = false;

                                  this.ignoreSelectionEvent = false;

                                  this.ignoreRegionSelectionEvent = false;

                                  this.map = undefined;

                                  this.selectionMarker = null;

                                  this.startMarker = null;

                                  this.endMarker = null;

                                  this.polyline = null;

                                  this.routePolyline = null;

                                  this.plannedRoutePolyline = null;

                                  this.dataBounds;

                                  this.plannedRouteDataBounds;

                                  this.routeDataBounds;

                                  this.regionDataBounds;

                                  this.lastBounds;

                                  this.lastZoom;

                                  this.markerLookup = new Array();

                                  this.currentMarkers = new Array();

                                  this.selectedRows = new Array();

                                  this.currentRegions = new Array();

                                  this.selectedRegionRows = new Array();

                                  this.markerStyle;

                                  this.selectedMarkerStyle;

                                  this.selectionMarkerStyle;

                                  this.startMarkerStyle;

                                  this.endMarkerStyle;

                                  this.pathStyle;

                                  this.routeStyle;

                                  this.plannedRouteStyle;

                                  this.regionStyle;

                               

                               

                                  this.afterRender = function () {

                               

                               

                                      this.markerStyle = TW.getStyleFromStyleDefinition(this.getProperty('MarkerStyle'));

                                      this.selectionMarkerStyle = TW.getStyleFromStyleDefinition(this.getProperty('SelectionMarkerStyle'));

                                      this.selectedMarkerStyle = TW.getStyleFromStyleDefinition(this.getProperty('SelectedMarkerStyle'));

                                      this.startMarkerStyle = TW.getStyleFromStyleDefinition(this.getProperty('StartMarkerStyle'));

                                      this.endMarkerStyle = TW.getStyleFromStyleDefinition(this.getProperty('EndMarkerStyle'));

                                      this.pathStyle = TW.getStyleFromStyleDefinition(this.getProperty('PathStyle'));

                                      this.plannedRouteStyle = TW.getStyleFromStyleDefinition(this.getProperty('PlannedRouteStyle'));

                                      this.routeStyle = TW.getStyleFromStyleDefinition(this.getProperty('RouteStyle'));

                                      this.regionStyle = TW.getStyleFromStyleDefinition(this.getProperty('RegionStyle'));

                                      this.selectedRegionStyle = TW.getStyleFromStyleDefinition(this.getProperty('SelectedRegionStyle'));

                                     

                                      if (this.haveGoogleMaps) {

                                          var zoom = parseInt(this.getProperty('Zoom'));

                               

                               

                                          var centerPosition = new google.maps.LatLng(TW.clientPosition.coords.latitude, TW.clientPosition.coords.longitude);

                               

                               

                                          if (this.getProperty('SelectedLocation') !== undefined) {

                                              centerPosition = new google.maps.LatLng(this.getProperty('SelectedLocation').latitude, this.getProperty('SelectedLocation').longitude);

                                          }

                               

                               

                                          var options = {

                                              zoom: zoom,

                                              center: centerPosition,

                                              mapTypeId: this.getProperty('MapType')

                                          };

                               

                               

                                       switch( this.getProperty('MapSkin','normal') ) {

                                       case 'normal':

                                       break;

                                       case 'blue':

                                       options['styles'] = [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#193341"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2c5a71"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#29768a"},{"lightness":-37}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#3e606f"},{"weight":2},{"gamma":0.84}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":0.6},{"color":"#1a3541"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#2c5a71"}]}];

                                       break;

                                       case 'gray':

                                       options['styles'] = [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}];

                                break;

                                       }

                               

                               

                                          if (this.getProperty('EnableLocationSelection')) {

                                              options["disableDoubleClickZoom"] = true;

                                          }

                                          else {

                                              options["disableDoubleClickZoom"] = false;

                                          }

                               

                               

                                          this.map = new google.maps.Map(document.getElementById(this.jqElementId), options);

                                          //if (TW.Runtime.globalMap === undefined) {

                                          //    $('body').append(

                                          //                '<div id="global-map" style="top:0px;left:0px;width:200px;height:200px;">' +

                                          //                '</div>');

                                          //    TW.Runtime.globalMap = new google.maps.Map(document.getElementById('global-map'), options);

                                          //}

                               

                               

                                          //this.map = TW.Runtime.globalMap;

                                          //this.jqElement.append($('#global-map'));

                                          //$('#global-map').show().css('height', this.getProperty('Height') + 'px').css('width', this.getProperty('Width') + 'px');

                               

                                var polyOptions = { 

                                 strokeOpacity: 0.9, 

                                 strokeWeight: 2, 

                                 strokeColor: zoneColor, 

                                 fillOpacity: 0.50, 

                                 fillColor: zoneColor, 

                                 editable: true, 

                                 draggable: true              

                                }; 

                                

                                drawingManager = new google.maps.drawing.DrawingManager({ 

                                 drawingControl: true, 

                                 drawingControlOptions: { 

                                  position: google.maps.ControlPosition.TOP_CENTER, 

                                  drawingModes: [ 

                                google.maps.drawing.OverlayType.CIRCLE, 

                                google.maps.drawing.OverlayType.POLYGON 

                                  ] 

                                 }, 

                                 polygonOptions: polyOptions, 

                                 circleOptions: polyOptions 

                                }); 

                                

                                drawingManager.setMap(this.map); 

                               

                               

                                          infoWindow = new google.maps.InfoWindow();

                                          regionInfoWindow = new google.maps.InfoWindow();

                               

                               

                               

                                          if(this.getProperty('ShowTraffic')) {

                                              this.trafficLayer = new google.maps.TrafficLayer();

                                              this.trafficLayer.setMap(this.map);

                                          }

                                         

                                          google.maps.event.addListener(this.map, 'idle', function (event) {

                                          var bounds = thisWidget.map.getBounds();

                                        

                                          var changed = false;

                               

                               

                                          if(thisWidget.lastBounds !== undefined) {

                                          if(thisWidget.lastBounds.getNorthEast().lat() != bounds.getNorthEast().lat())

                                          changed = true;

                                          if(thisWidget.lastBounds.getNorthEast().lng() != bounds.getNorthEast().lng())

                                          changed = true;

                                          if(thisWidget.lastBounds.getSouthWest().lat() != bounds.getSouthWest().lat())

                                          changed = true;

                                          if(thisWidget.lastBounds.getSouthWest().lng() != bounds.getSouthWest().lng())

                                          changed = true;

                                          }

                                          else {

                                          changed = true;

                                          }

                                        

                                          if(changed) {

                               

                               

                                           // ignore this if it's just getting the initial bearings

                                           if( thisWidget.lastBounds !== undefined ) {

                                           if( !weAreChangingBounds ) {

                                           userHasPannedOrZoomedSinceAutoZoom = true;

                                           }

                                           weAreChangingBounds = false;

                                           }

                               

                               

                                                  var nelocation = new Object();

                                                  nelocation.units = "WGS84";

                                                  nelocation.elevation = 0.0;

                                                  nelocation.latitude = bounds.getNorthEast().lat();

                                                  nelocation.longitude = bounds.getNorthEast().lng();

                               

                               

                                                  thisWidget.setProperty('NEBoundary', nelocation);

                               

                               

                                                  var swlocation = new Object();

                                                  swlocation.units = "WGS84";

                                                  swlocation.elevation = 0.0;

                                                  swlocation.latitude = bounds.getSouthWest().lat();

                                                  swlocation.longitude = bounds.getSouthWest().lng();

                               

                               

                                                  thisWidget.setProperty('SWBoundary', swlocation);

                                                 

                                                  var nelocation = new Object();

                                                  nelocation.units = "WGS84";

                                                  nelocation.elevation = 0.0;

                                                  nelocation.latitude = bounds.getSouthWest().lat();

                                                  nelocation.longitude = bounds.getNorthEast().lng();

                               

                               

                                                  thisWidget.setProperty('SEBoundary', nelocation);

                               

                               

                                                  var swlocation = new Object();

                                                  swlocation.units = "WGS84";

                                                  swlocation.elevation = 0.0;

                                                  swlocation.latitude = bounds.getNorthEast().lat();

                                                  swlocation.longitude = bounds.getSouthWest().lng();

                               

                               

                                                  thisWidget.setProperty('NWBoundary', swlocation);

                                                 

                                                  thisWidget.lastBounds = bounds;

                                                 

                                                  thisWidget.jqElement.triggerHandler('BoundsChanged');

                                                 

                                          }

                                        

                                          var zoomChanged = false;

                                        

                                          var currentZoom = thisWidget.map.getZoom();

                                        

                                          if(thisWidget.lastZoom !== undefined) {

                                          if(thisWidget.lastZoom != currentZoom)

                                          zooomChanged = true;

                                          }

                                          else {

                                          zoomChanged = true;

                                          }

                                        

                                          if(zoomChanged) {

                               

                               

                                                  thisWidget.setProperty('CurrentZoom', currentZoom);

                                                 

                                                  thisWidget.lastZoom = currentZoom;

                                          }

                                          });

                               

                               

                                          if (this.getProperty('EnableLocationSelection')) {

                                              if (this.getProperty('ShowSelectionMarker') === true) {

                                                  this.selectionMarker = new google.maps.Marker({

                                                      map: this.map,

                                                      position: centerPosition,

                                                      title: "Selection",

                                                      icon: this.selectionMarkerStyle.image

                                                  });

                                                  this.selectionMarker.setZIndex(google.maps.Marker.MAX_ZINDEX + 3);

                                              }

                               

                               

                                              google.maps.event.addListener(this.map, 'dblclick', function (event) {

                                                  var location = new Object();

                                                  location.units = "WGS84";

                                                  location.elevation = 0.0;

                                                  location.latitude = event.latLng.lat();

                                                  location.longitude = event.latLng.lng();

                               

                               

                                                  thisWidget.moveSelectionMarker(location);

                               

                               

                                                  thisWidget.setProperty('SelectedLocation', location);

                               

                               

                                                  thisWidget.jqElement.triggerHandler('Changed');

                                                 

                                              });

                               

                               

                                              google.maps.event.trigger(this.map, 'resize');

                               

                               

                                           weAreChangingBounds = true;

                                              this.map.setZoom(this.map.getZoom() - 1);

                                           weAreChangingBounds = true;

                                              this.map.setZoom(this.map.getZoom() + 1);

                                          }

                                      }

                                  };

                               

                               

                                  this.moveSelectionMarker = function (newLocation) {

                                      if (this.haveGoogleMaps) {

                                          if (newLocation !== undefined) {

                                              var latlng = new google.maps.LatLng(newLocation.latitude, newLocation.longitude);

                               

                               

                                              if (this.getProperty('ShowSelectionMarker') === true) {

                                                  if (this.selectionMarker !== null) {

                                                      this.selectionMarker.setMap(this.map);

                                                  this.selectionMarker.setPosition(latlng);

                                                  } else {

                                                   this.selectionMarker = new google.maps.Marker({

                                                       position: latlng,

                                                       map: this.map,

                                                       title: "Selection",

                                                       icon: this.selectionMarkerStyle.image

                                                   });

                                                   this.selectionMarker.setZIndex(google.maps.Marker.MAX_ZINDEX + 3);

                                                  }

                                              }

                               

                               

                                           weAreChangingBounds = true;

                                              this.map.setCenter(latlng);

                                          }

                                      }

                                  };

                               

                               

                                  this.clearSelectedRegions = function () {

                               

                               

                                      thisWidget.selectedRegionRows = [];

                               

                               

                                      for (var regionNo = 0; regionNo < thisWidget.currentRegions.length; regionNo++) {

                                          var currentRegion = thisWidget.currentRegions[regionNo];

                                          currentRegion.setOptions( { fillColor: currentRegion._assignedFillColor, strokeColor : currentRegion._assignedStrokeColor, strokeWeight : currentRegion._assignedStrokeWeight });

                                          currentRegion._isSelected = false;

                                      }

                                  };

                               

                               

                                  this.clearSelectedMarkers = function () {

                               

                               

                                      thisWidget.selectedRows = [];

                               

                               

                                      for (var markerNo = 0; markerNo < thisWidget.currentMarkers.length; markerNo++) {

                                          var currentMarker = thisWidget.currentMarkers[markerNo];

                                          currentMarker._isSelected = false;

                                          currentMarker.setIcon(currentMarker._assignedIcon);

                                          currentMarker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

                                      }

                                  };

                               

                               

                                  this.setSelectedMarker = function (selectedRow) {

                               

                               

                                      var isMultiselect = thisWidget.properties['MultiSelect'];

                               

                               

                                      var selectedMarker;

                               

                               

                                      for (var markerNo = 0; markerNo < thisWidget.currentMarkers.length; markerNo++) {

                                          var currentMarker = thisWidget.currentMarkers[markerNo];

                                          if (currentMarker.rowNumber === selectedRow) {

                                              selectedMarker = currentMarker;

                                              break;

                                          }

                                      }

                               

                               

                                      if (selectedMarker !== undefined) {

                                          if (selectedMarker._isSelected) {

                                              if (isMultiselect) {

                                                  TW.removeElementFromArray(thisWidget.selectedRows, selectedRow);

                                                  selectedMarker._isSelected = false;

                                                  selectedMarker.setIcon(selectedMarker._assignedIcon);

                                                  selectedMarker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

                                                  if (!thisWidget.ignoreSelectionEvent) {

                                                      thisWidget.updateSelection('Data', thisWidget.selectedRows);

                                                  }

                                              }

                                          }

                                          else {

                                              if (!isMultiselect) {

                                                  thisWidget.clearSelectedMarkers();

                                                  thisWidget.selectedRows = [selectedRow];

                                              }

                                              else

                                                  thisWidget.selectedRows.push(selectedRow);

                               

                               

                                              selectedMarker.setIcon(thisWidget.selectedMarkerStyle.image);

                                              selectedMarker._isSelected = true;

                                              selectedMarker.setZIndex(google.maps.Marker.MAX_ZINDEX + 2);

                               

                               

                                              if (!thisWidget.ignoreSelectionEvent) {

                                                  thisWidget.updateSelection('Data', thisWidget.selectedRows);

                                              }

                                          }

                                      }

                                  };

                               

                               

                                  this.setSelectedRegion = function (selectedRow) {

                               

                               

                                      var isMultiselect = thisWidget.properties['RegionMultiSelect'];

                               

                               

                                      var selectedRegion;

                               

                               

                                      for (var regionNo = 0; regionNo < thisWidget.currentRegions.length; regionNo++) {

                                          var currentRegion = thisWidget.currentRegions[regionNo];

                                          if (currentRegion.rowNumber === selectedRow) {

                                              selectedRegion = currentRegion;

                                              break;

                                          }

                                      }

                               

                               

                                      if (selectedRegion !== undefined) {

                                          if (selectedRegion._isSelected) {

                                              if (isMultiselect) {

                                                  TW.removeElementFromArray(thisWidget.selectedRegionRows, selectedRow);

                                                  selectedRegion._isSelected = false;

                                                  selectedRegion.setOptions( { fillColor: selectedRegion._assignedFillColor, strokeColor : selectedRegion._assignedStrokeColor, strokeWeight : selectedRegion._assignedStrokeWeight });

                                                  if (!thisWidget.ignoreRegionSelectionEvent) {

                                                      thisWidget.updateSelection('RegionData', thisWidget.selectedRegionRows);

                                                  }

                                              }

                                          }

                                          else {

                                              if (!isMultiselect) {

                                                  thisWidget.clearSelectedRegions();

                                                  thisWidget.selectedRegionRows = [selectedRow];

                                              }

                                              else

                                                  thisWidget.selectedRegionRows.push(selectedRow);

                               

                               

                                              selectedRegion._isSelected = true;

                                              selectedRegion.setOptions( { fillColor: thisWidget.selectedRegionStyle.backgroundColor, strokeColor : thisWidget.selectedRegionStyle.lineColor, strokeWeight : parseInt(thisWidget.selectedRegionStyle.lineThickness) });

                               

                               

                                              if (!thisWidget.ignoreRegionSelectionEvent) {

                                                  thisWidget.updateSelection('RegionData', thisWidget.selectedRegionRows);

                                              }

                                          }

                                      }

                                  };

                               

                               

                                  this.handleSelectionUpdate = function (propertyName, selectedRows, selectedRowIndices) {

                               

                               

                                      if (propertyName == "Data") {

                                          thisWidget.ignoreSelectionEvent = true;

                               

                               

                                          thisWidget.clearSelectedMarkers();

                               

                               

                                          var nSelectedRows = selectedRowIndices.length;

                               

                               

                                          for (var selectedRowIndex = 0; selectedRowIndex < nSelectedRows;selectedRowIndex++) {

                                              thisWidget.setSelectedMarker(selectedRowIndices[selectedRowIndex]);

                                          }

                                         

                                          thisWidget.ignoreSelectionEvent = false;

                                      }

                               

                               

                                      if (propertyName == "RegionData") {

                                          thisWidget.ignoreRegionSelectionEvent = true;

                               

                               

                                          thisWidget.clearSelectedRegions();

                               

                               

                                          var nSelectedRows = selectedRowIndices.length;

                               

                               

                                          for (var selectedRowIndex = 0; selectedRowIndex < nSelectedRows;selectedRowIndex++) {

                                              thisWidget.setSelectedRegion(selectedRowIndices[selectedRowIndex]);

                                          }

                                         

                                          thisWidget.ignoreRegionSelectionEvent = false;

                                      }

                               

                               

                                  };

                               

                               

                                  this.mouseOverEventListener = function (e) {

                                      var latlng = e.latLng;

                               

                               

                                      if (!isMashupTooltipConfigured) {

                                          return;

                                      }

                               

                               

                               

                               

                                      var markerCount = thisWidget.markerLookup.length;

                                      for (var i = 0; i < markerCount; i++) {

                                          var markerInfo = thisWidget.markerLookup[i];

                                          if (latlng.lat() == markerInfo.latlng.lat() && latlng.lng() == markerInfo.latlng.lng()) {

                                              var selectedMarker = markerInfo.marker;

                               

                               

                                              var selectedRowNo = selectedMarker.rowNumber;

                               

                               

                                              TW.log.info('Should display info for Row #' + selectedRowNo);

                                              //thisWidget.setSelectedMarker(selectedRowNo);

                               

                               

                                              thisWidget.cleanupTooltipMashup();

                               

                               

                                              infoWindow.setContent('<div id="' + infoId + '" style="width:' + tooltipMashupWidth + 'px;height:' + tooltipMashupHeight + 'px;">Loading Tooltip Mashup...</div>');

                                              //infoWindow.setContent('<div id="' + infoId + '" style="">Hello there, selected Row #' + selectedRowNo + ', "' + lastData[selectedRowNo]['name'] + '"</div>');

                                              //infoWindow.setContent('Hello there, selected Row #' + selectedRowNo + '');

                                              infoWindow.setPosition(markerInfo.latlng);

                                              infoWindow.open(this.map, markerInfo.marker);

                                              setTimeout(function () {

                                                  var mashupSpec = {};

                                                  mashupSpec.mashupName = thisWidget.getProperty('TooltipMashupName');

                                                  mashupSpec.mashupParameters = {};

                               

                               

                                                  var mashupParameters = thisWidget.properties['MashupParameters'];

                                                  if (mashupParameters === undefined)

                                                      mashupParameters = [];

                               

                               

                                                  var nParams = mashupParameters.length;

                               

                               

                                                  for (var paramNo = 0; paramNo < nParams; paramNo++) {

                                                      var paramInfo = mashupParameters[paramNo],

                                                          propName = paramInfo.ParameterName,

                                                          fldName = thisWidget.getProperty(propName),

                                                          propValue;

                                                      if (fldName === 'ALL_FIELDS') {

                                                          propValue = JSON.parse(JSON.stringify(dataInfotable));

                                                          propValue.rows.push(lastData[selectedRowNo]);

                                                      } else {

                                                          propValue = lastData[selectedRowNo][thisWidget.getProperty(propName)];

                                                      }

                                                      if (propValue !== undefined) {

                                                          mashupSpec.mashupParameters[propName] = propValue;

                                                      }

                                                  }

                               

                               

                                                  $('#' + infoId).mashup(mashupSpec);

                                              }, 100);

                                              return;

                                          }

                                      }

                                  };

                               

                               

                                  this.regionMouseOverEventListener = function (e) {

                                  if(this.rowNumber != lastRegionNumber) {

                                      regionInfoWindow.setContent(this.title);

                                          regionInfoWindow.open(this.map);

                                          regionInfoWindow.setPosition(this._tooltipCenter);

                                          lastRegionNumber = this.rowNumber;

                                  }

                                  };

                               

                               

                                  this.clickEventListener = function (e) {

                                      var latlng = e.latLng;

                               

                               

                                      var markerCount = thisWidget.markerLookup.length;

                                      for (var i = 0; i < markerCount; i++) {

                                          var markerInfo = thisWidget.markerLookup[i];

                                          if (latlng.lat() == markerInfo.latlng.lat() && latlng.lng() == markerInfo.latlng.lng()) {

                                              var selectedMarker = markerInfo.marker;

                               

                               

                                              var selectedRowNo = selectedMarker.rowNumber;

                               

                               

                                              thisWidget.setSelectedMarker(selectedRowNo);

                               

                               

                                              return;

                                          }

                                      }

                                  };

                               

                               

                                  this.regionClickEventListener = function (e) {

                                      thisWidget.setSelectedRegion(this.rowNumber);

                                  };

                               

                               

                                  this.dblclickEventListener = function (e) {

                                     

                                      thisWidget.jqElement.triggerHandler('DoubleClicked');

                                  };

                                 

                                  this.cleanupRouteOverlays = function () {

                                      try {

                                          if (this.routePolyline !== undefined && this.routePolyline !== null) {

                                          google.maps.event.clearInstanceListeners(this.routePolyline);

                                              this.routePolyline.setMap(null);

                                              this.routePolyline = null;

                                              delete this.routePolyline;

                                          }

                                      }

                                      catch (destroyErr) {

                              //         alert('error in destroy routePolyline');

                                      }

                                  };

                                 

                                  this.cleanupPlannedRouteOverlays = function () {

                                      try {

                                          if (this.plannedRoutePolyline !== undefined && this.plannedRoutePolyline !== null) {

                                          google.maps.event.clearInstanceListeners(this.plannedRoutePolyline);

                                              this.plannedRoutePolyline.setMap(null);

                                              this.plannedRoutePolyline = null;

                                              delete this.plannedRoutePolyline;

                                          }

                                      }

                                      catch (destroyErr) {

                              //         alert('error in destroy plannedRoutePolyline');

                                      }

                                  };

                                 

                                  this.cleanupRegionOverlays = function () {

                                      try {

                                          if (this.currentRegions !== undefined && this.currentRegions !== null) {

                                              for (var x = 0; x < this.currentRegions.length; x++) {

                                                  google.maps.event.clearListeners(this.currentRegions[x], 'click');

                                                  google.maps.event.clearListeners(this.currentRegions[x], 'mouseover');

                                              google.maps.event.clearInstanceListeners(this.currentRegions[x]);

                                              this.currentRegions[x].setMap(null);

                                              this.currentRegions[x] = null;

                                              }

                                             

                                              this.currentRegions = {};

                                          }

                                      }

                                      catch (err) {

                                       TW.log.error('error cleanupRegionOverlays', err);

                              //         alert('error in destroy routePolyline');

                                      }

                                  };

                                 

                                  this.cleanupMapOverlays = function () {

                                      try {

                                          if (this.polyline !== undefined && this.polyline !== null) {

                                          google.maps.event.clearInstanceListeners(this.polyline);

                                              this.polyline.setMap(null);

                                              this.polyline = null;

                                              delete this.polyline;

                                          }

                                      }

                                      catch (destroyErr) {

                              //         alert('error in destroy polyline');

                                      }

                                     

                                      try {

                                          if (this.currentMarkers !== undefined) {

                                              for (var x = 0; x < this.currentMarkers.length; x++) {

                                                  if (isMashupTooltipConfigured) {

                                                      google.maps.event.clearListeners(this.currentMarkers[x], 'mouseover');

                                                  }

                                                  google.maps.event.clearListeners(this.currentMarkers[x], 'click');

                                                  google.maps.event.clearListeners(this.currentMarkers[x], 'dblclick');

                                              google.maps.event.clearInstanceListeners(this.currentMarkers[x]);

                               

                               

                                              delete this.markerLookup[x].latlng;

                                              this.markerLookup[x].marker = null;

                                              delete this.markerLookup[x];

                               

                               

                                              this.currentMarkers[x].setMap(null);

                               

                               

                                              this.currentMarkers[x].rowNumber = null;

                                              this.currentMarkers[x].row = null;

                                              this.currentMarkers[x]._isSelected = null;

                                              this.currentMarkers[x]._assignedIcon = null;

                                            

                                              delete this.currentMarkers[x].rowNumber;

                                              delete this.currentMarkers[x].row;

                                              delete this.currentMarkers[x]._isSelected;

                                              delete this.currentMarkers[x]._assignedIcon;

                                            

                                                  delete this.currentMarkers[x];

                                              }

                                             

                                              this.currentMarkers = [];

                                              this.markerLookup = [];

                                          }

                                      }

                                      catch (destroyErr) {

                              //         alert('error in destroy markers');

                                      }

                               

                               

                                      try {

                                          if (this.startMarker !== null && this.startMarker !== undefined) {

                                              if (isMashupTooltipConfigured) {

                                                  google.maps.event.clearListeners(this.startMarker, 'mouseover');

                                              }

                                              google.maps.event.clearListeners(this.startMarker, 'click');

                                              google.maps.event.clearListeners(this.startMarker, 'dblclick');

                                          google.maps.event.clearInstanceListeners(this.startMarker);

                                              this.startMarker.setMap(null);

                                              this.startMarker = null;

                                              delete this.startMarker;

                                          }

                                         

                                          if (this.endMarker !== null && this.endMarker !== undefined) {

                                              if (isMashupTooltipConfigured) {

                                                  google.maps.event.clearListeners(this.endMarker, 'mouseover');

                                              }

                                              google.maps.event.clearListeners(this.endMarker, 'click');

                                              google.maps.event.clearListeners(this.endMarker, 'dblclick');

                                          google.maps.event.clearInstanceListeners(this.endMarker);

                                              this.endMarker.setMap(null);

                                              this.endMarker = null;

                                              delete this.endMarker;

                                          }

                                      }

                                      catch (destroyErr) {

                              //         alert('error in destroy start/end');

                                      }

                                     

                                      this.selectedRows = [];

                                  };

                                 

                                  this.cleanupMapContent = function () {

                                  this.cleanupMapOverlays();

                                  this.cleanupRouteOverlays();

                                  this.cleanupPlannedRouteOverlays();

                                  this.cleanupRegionOverlays();

                                

                                  try {

                                          if(this.trafficLayer !== null && this.trafficLayer !== undefined) {

                                          google.maps.event.clearInstanceListeners(this.trafficLayer);

                                              this.trafficLayer.setMap(null);

                                              this.trafficLayer = null;

                                              delete this.trafficLayer;

                                          }

                                      }

                                      catch (destroyErr) {

                                      }

                                     

                                      try {

                                          if (this.selectionMarker !== null && this.selectionMarker !== undefined) {

                                          google.maps.event.clearInstanceListeners(this.selectionMarker);

                                              this.selectionMarker.setMap(null);

                                              this.selectionMarker = null;

                                              delete this.selectionMarker;

                                          }

                                         

                                      }

                                      catch (destroyErr) {

                                      }

                                  };

                                 

                                  this.cleanupTooltipMashup = function () {

                                      try {

                                          var mashupTooltips = $('#' + infoId);

                                          if (mashupTooltips.length > 0) {

                                              mashupTooltips.mashup('destroy');

                                              TW.purgeJqElement(mashupTooltips);

                                          }

                                      }

                                      catch (destroyErr) {

                               

                               

                                      }

                                  };

                               

                               

                                  this.serviceInvoked = function (serviceName) {

                                      var widgetReference = this;

                                      if (serviceName === 'AutoZoom') {

                                          setTimeout(function () {

                                              var effectiveBounds = new google.maps.LatLngBounds();

                                        

                                              if(widgetReference.routeDataBounds !== undefined) {

                                              effectiveBounds.union(widgetReference.routeDataBounds);

                                              }

                                             

                                              if(widgetReference.plannedRouteDataBounds !== undefined) {

                                              effectiveBounds.union(widgetReference.plannedRouteDataBounds);

                                              }

                                             

                                              if(widgetReference.regionDataBounds !== undefined) {

                                              effectiveBounds.union(widgetReference.regionDataBounds);

                                              }

                                             

                                              if(widgetReference.dataBounds !== undefined) {

                                              effectiveBounds.union(widgetReference.dataBounds);

                                              }

                                             

                                           weAreChangingBounds = true;

                                              widgetReference.map.fitBounds(effectiveBounds);

                               

                               

                                           userHasPannedOrZoomedSinceAutoZoom = false;

                                          }, 100);

                                      } else {

                                          TW.log.error('Google map widget, unexpected serviceName invoked "' + serviceName + '"');

                                      }

                                  };

                               

                               

                                  this.beforeDestroy = function () {

                                  this.cleanupMapContent();

                               

                               

                                  try {

                                     google.maps.event.clearInstanceListeners(this.map);

                                      }

                                      catch(destroyErr) {

                                    

                                      }

                                     

                                  this.cleanupTooltipMashup();

                               

                               

                                      //// put the map back in the body to be reused

                                  //$('body').append($('#global-map'));

                                  //$('#global-map').hide();

                               

                               

                                  dataInfotable = null;

                               

                               

                                  thisWidget = null;

                                  this.map = null;

                                  delete this.map;

                                  };

                               

                               

                                  this.updateProperty = function (updatePropertyInfo) {

                               

                               

                                      if (this.haveGoogleMaps) {

                               

                               

                                       var zoomOnDataRefresh = true;

                                       switch( autoZoomBehavior )  {

                                       case 'disable-on-user-pan-zoom':

                                               if( userHasPannedOrZoomedSinceAutoZoom === true ) {

                                               zoomOnDataRefresh = false;

                                               }

                                       break;

                                       case 'only-when-autozoom-invoked':

                                       zoomOnDataRefresh = false;

                                       break;

                                       case 'only-initial-data':

                                       zoomOnDataRefresh = initialData;

                                       initialData = false;

                                       break;

                                       default:

                                       zoomOnDataRefresh = true;

                                       }

                               

                               

                                          if (updatePropertyInfo.TargetProperty === 'Zoom') {

                                              var zoom = parseInt(updatePropertyInfo.RawSinglePropertyValue);

                                           weAreChangingBounds = true;

                                              this.map.setZoom(zoom);

                                              return;

                                          }

                               

                               

                                          if (updatePropertyInfo.TargetProperty === 'ShowTraffic') {

                                              this.setProperty('ShowTraffic', updatePropertyInfo.RawSinglePropertyValue);

                                             

                                              if(this.getProperty('ShowTraffic')) {

                                              if(this.trafficLayer === undefined || this.trafficLayer === null) {

                                                      this.trafficLayer = new google.maps.TrafficLayer();

                                              }

                                                  this.trafficLayer.setMap(this.map);

                                              }

                                              else{

                                              if(this.trafficLayer !== undefined) {

                                                  google.maps.event.clearInstanceListeners(this.trafficLayer);

                                                      this.trafficLayer.setMap(null);

                                                      this.trafficLayer = null;

                                                      delete this.trafficLayer;

                                              }

                                              }

                                          }

                               

                                          if (updatePropertyInfo.TargetProperty === 'SelectedLocation') {

                                              var location = updatePropertyInfo.RawSinglePropertyValue;

                               

                               

                                              if (location != undefined && location.latitude != 0 && location.longitude != 0 && location.latitude != undefined && location.longitude != undefined) {

                                                  this.moveSelectionMarker(location);

                                                  weAreChangingBounds = true;

                                                  this.map.setCenter(this.map.getCenter());

                                                  thisWidget.setProperty('SelectedLocation', location);

                                              } else {

                                                  this.selectionMarker.setMap(null);

                                                  this.selectionMarker = null;

                                                  thisWidget.setProperty('SelectedLocation', undefined);

                                              }

                                             

                                              return;

                                          }

                               

                               

                                          var redrawRoute = function() {

                                              var showRoute = this.getProperty('ShowRoute');

                                             

                                              if(showRoute) {

                                                  this.routeDataBounds = new google.maps.LatLngBounds();

                               

                               

                                                  var dataRows = updatePropertyInfo.ActualDataRows;

                               

                               

                                                  this.cleanupRouteOverlays();

                                                 

                                                  var locationField = this.getProperty('RouteLocationField');

                               

                               

                                                  var LatLngList = [];

                                                  var nRows = dataRows.length;

                               

                               

                                                  for (var rowNumber = 0; rowNumber < nRows; rowNumber++) {

                                                      var row = dataRows[rowNumber];

                                                      var thisLocation = row[locationField];

                                                      if (thisLocation !== undefined && thisLocation.latitude !== 0.0 && thisLocation.longitude !== 0.0) {

                                                          var latlng = new google.maps.LatLng(thisLocation.latitude, thisLocation.longitude);

                                                          LatLngList.push(latlng);

                                                          this.routeDataBounds.extend(latlng);

                                                      }

                                                  }

                               

                               

                                                  if (LatLngList.length > 1) {

                                                      this.routePolyline = new google.maps.Polyline({

                                                          path: LatLngList,

                                                          strokeColor: thisWidget.routeStyle.lineColor,

                                                          strokeOpacity: 1.0,

                                                          strokeWeight: parseInt(thisWidget.routeStyle.lineThickness)

                                                      });

                               

                               

                                                      this.routePolyline.setMap(thisWidget.map);

                               

                               

                                                  }

                               

                               

                                                  if(zoomOnDataRefresh ) {

                                                   google.maps.event.trigger(this.map, 'resize');

                               

                                           weAreChangingBounds = true;

                                                   this.map.setZoom(this.map.getZoom() - 1);

                                           weAreChangingBounds = true;

                                                   this.map.setZoom(this.map.getZoom() + 1);

                                                 

                                                   // Autofit if we have more than one data point

                               

                                                   if (LatLngList.length > 1) {

                                                       var effectiveBounds = new google.maps.LatLngBounds();

                               

                                                       if(this.routeDataBounds !== undefined) {

                                                        effectiveBounds.union(this.routeDataBounds);

                                                       }

                                                      

                                                       if(this.regionDataBounds !== undefined) {

                                                        effectiveBounds.union(this.regionDataBounds);

                                                       }

                                                      

                                                       if(this.dataBounds !== undefined) {

                                                        effectiveBounds.union(this.dataBounds);

                                                       }

                                                      

                                                       this.map.fitBounds(effectiveBounds);

                                                   }

                                                   else {

                                                       if (LatLngList.length > 0) {

                                           weAreChangingBounds = true;

                                                           this.map.setCenter(LatLngList[0]);

                                           weAreChangingBounds = true;

                                                           this.map.setZoom(this.map.getZoom());

                                                       }

                                                   }

                                                  }

                                              }

                                             

                                              return;

                                          };

                               

                               

                                          if (updatePropertyInfo.TargetProperty === 'RouteData') {

                                              redrawRoute.call(this);

                                          }

                               

                               

                                          var redrawPlannedRoute = function() {

                                              var showRoute = this.getProperty('ShowPlannedRoute');

                                             

                                              if(showRoute) {

                                                  this.plannedRouteDataBounds = new google.maps.LatLngBounds();

                               

                               

                                                  var dataRows = updatePropertyInfo.ActualDataRows;

                               

                               

                                                  this.cleanupPlannedRouteOverlays();

                                                 

                                                  var locationField = this.getProperty('PlannedRouteLocationField');

                               

                               

                                                  var LatLngList = [];

                                                  var nRows = dataRows.length;

                               

                               

                                                  for (var rowNumber = 0; rowNumber < nRows; rowNumber++) {

                                                      var row = dataRows[rowNumber];

                                                      var thisLocation = row[locationField];

                                                      if (thisLocation !== undefined && thisLocation.latitude !== 0.0 && thisLocation.longitude !== 0.0) {

                                                          var latlng = new google.maps.LatLng(thisLocation.latitude, thisLocation.longitude);

                                                          LatLngList.push(latlng);

                                                          this.plannedRouteDataBounds.extend(latlng);

                                                      }

                                                  }

                               

                               

                                                  if (LatLngList.length > 1) {

                                                      this.plannedRoutePolyline = new google.maps.Polyline({

                                                          path: LatLngList,

                                                          strokeColor: thisWidget.plannedRouteStyle.lineColor,

                                                          strokeOpacity: 1.0,

                                                          strokeWeight: parseInt(thisWidget.plannedRouteStyle.lineThickness)

                                                      });

                               

                               

                                                      this.plannedRoutePolyline.setMap(thisWidget.map);

                               

                               

                                                  }

                               

                               

                                                  if(zoomOnDataRefresh ) {

                                                   google.maps.event.trigger(this.map, 'resize');

                               

                                           weAreChangingBounds = true;

                                                   this.map.setZoom(this.map.getZoom() - 1);

                                           weAreChangingBounds = true;

                                                   this.map.setZoom(this.map.getZoom() + 1);

                                                 

                                                   // Autofit if we have more than one data point

                               

                                                   if (LatLngList.length > 1) {

                                                       var effectiveBounds = new google.maps.LatLngBounds();

                               

                                                       if(this.plannedRouteDataBounds !== undefined) {

                                                        effectiveBounds.union(this.plannedRouteDataBounds);

                                                       }

                                                      

                                                       if(this.routeDataBounds !== undefined) {

                                                        effectiveBounds.union(this.routeDataBounds);

                                                       }

                                                      

                                                       if(this.regionDataBounds !== undefined) {

                                                        effectiveBounds.union(this.regionDataBounds);

                                                       }

                                                      

                                                       if(this.dataBounds !== undefined) {

                                                        effectiveBounds.union(this.dataBounds);

                                                       }

                                                      

                                                       this.map.fitBounds(effectiveBounds);

                                                   }

                                                   else {

                                                       if (LatLngList.length > 0) {

                                           weAreChangingBounds = true;

                                                           this.map.setCenter(LatLngList[0]);

                                           weAreChangingBounds = true;

                                                           this.map.setZoom(this.map.getZoom());

                                                       }

                                                   }

                                                  }

                                              }

                                             

                                              return;

                                          };

                               

                               

                                          if (updatePropertyInfo.TargetProperty === 'PlannedRouteData') {

                                              redrawPlannedRoute.call(this);

                                          }

                               

                               

                                          var redrawRegions = function() {

                                              var tooltipField1 = this.getProperty('RegionTooltipField1');

                                              var tooltipLabel1 = this.getProperty('RegionTooltipLabel1');

                                              var tooltipField2 = this.getProperty('RegionTooltipField2');

                                              var tooltipLabel2 = this.getProperty('RegionTooltipLabel2');

                                              var tooltipField3 = this.getProperty('RegionTooltipField3');

                                              var tooltipLabel3 = this.getProperty('RegionTooltipLabel3');

                                              var tooltipField4 = this.getProperty('RegionTooltipField4');

                                              var tooltipLabel4 = this.getProperty('RegionTooltipLabel4');

                               

                               

                                              var showRegions = this.getProperty('ShowRegions');

                                              var showRegionTooltips = this.getProperty('ShowRegionTooltips');

                                             

                                              if(showRegions) {

                                                  this.regionDataBounds = new google.maps.LatLngBounds();

                               

                               

                                                  var dataRows = updatePropertyInfo.ActualDataRows;

                               

                               

                                                  var enableRegionSelection = this.getProperty('EnableRegionSelection');

                                                 

                                                  this.cleanupRegionOverlays();

                                                 

                                                  var locationsField = this.getProperty('RegionLocationsField');

                                                  var locationField = this.getProperty('RegionLocationField');

                                                  var fillOpacity = this.getProperty('RegionFillOpacity');

                               

                               

                                                  this.currentRegions = [];

                                                  var LatLngList = [];

                                                 

                                                  var nRows = dataRows.length;

                               

                               

                                                  for (var rowNumber = 0; rowNumber < nRows; rowNumber++) {

                                                      var row = dataRows[rowNumber];

                                                      var locationTable = row[locationsField];

                                                      if(locationTable !== undefined) {

                                                          var RegionLatLngList = [];

                                                          var regionDataRows = locationTable.rows;

                                                          var nRegionRows = regionDataRows.length;

                                                         

                                                          var polygonBounds = new google.maps.LatLngBounds();

                                                         

                                                          for (var regionRowNumber = 0; regionRowNumber < nRegionRows; regionRowNumber++) {

                                                              var regionRow = regionDataRows[regionRowNumber];

                                                              var thisLocation = regionRow[locationField];

                                                           if (thisLocation !== undefined && thisLocation.latitude !== 0.0 && thisLocation.longitude !== 0.0) {

                                                               var latlng = new google.maps.LatLng(thisLocation.latitude, thisLocation.longitude);

                                                               RegionLatLngList.push(latlng);

                                                               LatLngList.push(latlng);

                                                               this.regionDataBounds.extend(latlng);

                                                               polygonBounds.extend(latlng);

                                                           }

                                                          }

                                                         

                                                          if (RegionLatLngList.length > 1) {

                                                        

                                                              var hasRegionFormatting = thisWidget.properties['RegionFormatting'] !== undefined;

                               

                               

                                                              var formatStyle = thisWidget.regionStyle;

                                                             

                                                              if (hasRegionFormatting) {

                                                                  formatStyle = TW.getStyleFromStateFormatting({ DataRow: row, StateFormatting: thisWidget.properties['RegionFormatting'] });

                                                              }

                               

                               

                                                              var regionProps = {

                                                                      paths: RegionLatLngList,

                                                                      strokeColor: formatStyle.lineColor,

                                                                      strokeOpacity: 1.0,

                                                                      strokeWeight: parseInt(formatStyle.lineThickness),

                                                                      fillColor: formatStyle.backgroundColor,

                                                                      fillOpacity: fillOpacity

                                                                  };

                                                             

                                                             

                                                              var regionPolygon = new google.maps.Polygon(regionProps);

                               

                               

                                                              var regionLayerField = thisWidget.properties['RegionLayerField'];

                                                             

                                                              if( regionPolygon['setZIndex'] !== undefined ) {

                                                               if(regionLayerField !== undefined && regionLayerField !== '') {

                                                                   var regionLayer = row[regionLayerField];

                               

                               

                                                                   if(regionLayer !== undefined)

                                                                       regionPolygon.setZIndex(google.maps.Marker.MAX_ZINDEX + regionLayer);

                                                                   else

                                                                       regionPolygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

                                                               }

                                                               else {

                                                                   regionPolygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

                                                               }

                                                              }

                               

                               

                                                              regionPolygon._assignedFillColor = formatStyle.backgroundColor;

                                                              regionPolygon._assignedStrokeColor = formatStyle.lineColor;

                                                              regionPolygon._assignedStrokeWeight = parseInt(formatStyle.lineThickness);

                                                             

                                                              regionPolygon.rowNumber = rowNumber;

                                                              regionPolygon.rowData = row;

                                                              regionPolygon._isSelected = false;

                                                              regionPolygon._tooltipCenter = polygonBounds.getCenter();

                                                              regionPolygon.setMap(thisWidget.map);

                               

                               

                                                              if(enableRegionSelection) {

                                                                  google.maps.event.addListener(regionPolygon, 'click', this.regionClickEventListener);

                                                              }

                                                             

                                                              this.currentRegions.push(regionPolygon);

                               

                               

                                                              if(showRegionTooltips) {

                                                                  var title = '';

                               

                               

                                                                  if (tooltipField1 !== undefined && tooltipField1 !== '') {

                                                                      if (tooltipLabel1 !== undefined && tooltipLabel1 !== '')

                                                                          title = title + tooltipLabel1 + ' : ';

                                                                      else

                                                                          title = title + tooltipField1 + ' : ';

                               

                               

                                                                      title = title + row[tooltipField1];

                                                                  }

                               

                               

                                                                  if (tooltipField2 !== undefined && tooltipField2 !== '') {

                                                                      if (title.length > 0)

                                                                          title = title + '<BR>';

                               

                               

                                                                      if (tooltipLabel2 !== undefined && tooltipLabel2 !== '')

                                                                          title = title + tooltipLabel2 + ' : ';

                                                                      else

                                                                          title = title + tooltipField2 + ' : ';

                               

                               

                                                                      title = title + row[tooltipField2];

                                                                  }

                               

                               

                                                                  if (tooltipField3 !== undefined && tooltipField3 !== '') {

                                                                      if (title.length > 0)

                                                                          title = title + '<BR>';

                               

                               

                                                                      if (tooltipLabel3 !== undefined && tooltipLabel3 !== '')

                                                                          title = title + tooltipLabel3 + ' : ';

                                                                      else

                                                                          title = title + tooltipField3 + ' : ';

                               

                               

                                                                      title = title + row[tooltipField3];

                                                                  }

                               

                               

                                                                  if (tooltipField4 !== undefined && tooltipField4 !== '') {

                                                                      if (title.length > 0)

                                                                          title = title + '<BR>';

                               

                               

                                                                      if (tooltipLabel4 !== undefined && tooltipLabel4 !== '')

                                                                          title = title + tooltipLabel4 + ' : ';

                                                                      else

                                                                          title = title + tooltipField4 + ' : ';

                               

                               

                                                                      title = title + row[tooltipField4];

                                                                  }

                               

                               

                                                                  if (title.length > 0) {

                                                                      regionPolygon.title = title;

                                                                      google.maps.event.addListener(regionPolygon, 'mouseover', this.regionMouseOverEventListener);

                                                                  }

                                                              }

                               

                               

                                                          }

                               

                               

                                                      }

                                                  }

                               

                               

                                                  // Autofit if we have more than one data point

                               

                               

                                                  if(zoomOnDataRefresh) {

                                                   google.maps.event.trigger(this.map, 'resize');

                               

                                           weAreChangingBounds = true;

                                                   this.map.setZoom(this.map.getZoom() - 1);

                                           weAreChangingBounds = true;

                                                   this.map.setZoom(this.map.getZoom() + 1);

                               

                                                   // Autofit if we have more than one data point

                               

                                                   if (LatLngList.length > 1) {

                                                       var effectiveBounds = new google.maps.LatLngBounds();

                               

                                                       if(this.plannedRouteDataBounds !== undefined) {

                                                        effectiveBounds.union(this.plannedRouteDataBounds);

                                                       }

                                                      

                                                       if(this.routeDataBounds !== undefined) {

                                                        effectiveBounds.union(this.routeDataBounds);

                                                       }

                                                      

                                                       if(this.regionDataBounds !== undefined) {

                                                        effectiveBounds.union(this.regionDataBounds);

                                                       }

                                                      

                                                       if(this.dataBounds !== undefined) {

                                                        effectiveBounds.union(this.dataBounds);

                                                       }

                                                      

                                                       this.map.fitBounds(effectiveBounds);

                                                   }

                                                   else {

                                                       if (LatLngList.length > 0) {

                                           weAreChangingBounds = true;

                                                           this.map.setCenter(LatLngList[0]);

                                           weAreChangingBounds = true;

                                                           this.map.setZoom(this.map.getZoom());

                                                       }

                                                   }

                                                  }

                                              }

                                             

                                              return;

                                          };

                               

                               

                                          if (updatePropertyInfo.TargetProperty === 'RegionData') {

                                              redrawRegions.call(this);

                                          }

                               

                               

                                          var redrawMap = function() {

                                              dataInfotable = {

                                                  dataShape: {

                                                      fieldDefinitions: updatePropertyInfo.DataShape

                                                  },

                                                  rows: []

                                              };

                                              this.dataBounds = new google.maps.LatLngBounds();

                               

                               

                                              this.selectedRows = [];

                               

                               

                                              var dataRows = updatePropertyInfo.ActualDataRows;

                               

                               

                                              lastData = dataRows;

                               

                               

                                              this.cleanupMapOverlays();

                                             

                                              var locationField = this.getProperty('LocationField');

                               

                               

                                              var tooltipField1 = this.getProperty('TooltipField1');

                                              var tooltipLabel1 = this.getProperty('TooltipLabel1');

                                              var tooltipField2 = this.getProperty('TooltipField2');

                                              var tooltipLabel2 = this.getProperty('TooltipLabel2');

                                              var tooltipField3 = this.getProperty('TooltipField3');

                                              var tooltipLabel3 = this.getProperty('TooltipLabel3');

                                              var tooltipField4 = this.getProperty('TooltipField4');

                                              var tooltipLabel4 = this.getProperty('TooltipLabel4');

                               

                               

                                              var LatLngList = [];

                               

                               

                                              var showMarkers = this.getProperty('ShowMarkers');

                                              var showMarkerTooltips = this.getProperty('ShowMarkerTooltips');

                                             

                                              if(showMarkerTooltips == null || showMarkerTooltips == undefined)

                                              showMarkerTooltips = true;

                                             

                                              var enableMarkerSelection = this.getProperty('EnableMarkerSelection');

                               

                               

                                              var nRows = dataRows.length;

                               

                               

                                              for (var rowNumber = 0; rowNumber < nRows; rowNumber++) {

                                                  var row = dataRows[rowNumber];

                                                  var thisLocation = row[locationField];

                                                  if (thisLocation !== undefined && thisLocation.latitude !== 0.0 && thisLocation.longitude !== 0.0) {

                                                      var latlng = new google.maps.LatLng(thisLocation.latitude, thisLocation.longitude);

                                                      LatLngList.push(latlng);

                               

                               

                                                      if (showMarkers) {

                               

                               

                                                          var markerProps = {

                                                              map: this.map,

                                                              position: latlng

                                                          };

                               

                               

                                                          if(showMarkerTooltips) {

                                                           var title = '';

                               

                                                           if (tooltipField1 !== undefined && tooltipField1 !== '') {

                                                               if (tooltipLabel1 !== undefined && tooltipLabel1 !== '')

                                                                   title = title + tooltipLabel1 + ' : ';

                                                               else

                                                                   title = title + tooltipField1 + ' : ';

                               

                                                               title = title + row[tooltipField1];

                                                           }

                               

                                                           if (tooltipField2 !== undefined && tooltipField2 !== '') {

                                                               if (title.length > 0)

                                                                   title = title + '\n';

                               

                                                               if (tooltipLabel2 !== undefined && tooltipLabel2 !== '')

                                                                   title = title + tooltipLabel2 + ' : ';

                                                               else

                                                                   title = title + tooltipField2 + ' : ';

                               

                                                               title = title + row[tooltipField2];

                                                           }

                               

                                                           if (tooltipField3 !== undefined && tooltipField3 !== '') {

                                                               if (title.length > 0)

                                                                   title = title + '\n';

                               

                                                               if (tooltipLabel3 !== undefined && tooltipLabel3 !== '')

                                                                   title = title + tooltipLabel3 + ' : ';

                                                               else

                                                                   title = title + tooltipField3 + ' : ';

                               

                                                               title = title + row[tooltipField3];

                                                           }

                               

                                                           if (tooltipField4 !== undefined && tooltipField4 !== '') {

                                                               if (title.length > 0)

                                                                   title = title + '\n';

                               

                                                               if (tooltipLabel4 !== undefined && tooltipLabel4 !== '')

                                                                   title = title + tooltipLabel4 + ' : ';

                                                               else

                                                                   title = title + tooltipField4 + ' : ';

                               

                                                               title = title + row[tooltipField4];

                                                           }

                               

                                                           if (title.length > 0 && !isMashupTooltipConfigured) {

                                                               markerProps.title = title;

                                                           }

                                                          }

                                                         

                                                          var markerField = thisWidget.properties['MarkerField'];

                                                         

                                                          var hasFormatting = thisWidget.properties['MarkerFormatting'] !== undefined;

                               

                               

                                                          if (hasFormatting) {

                                                              var formatStyle = TW.getStyleFromStateFormatting({ DataRow: row, StateFormatting: thisWidget.properties['MarkerFormatting'] });

                                                              if (formatStyle.styleDefinitionName !== undefined) {

                                                                  markerProps.icon = formatStyle.image;

                                                              } else {

                                                                  markerProps.icon = thisWidget.markerStyle.image;

                                                              }

                                                          }

                                                          else

                                                              markerProps.icon = thisWidget.markerStyle.image;

                               

                               

                                                          if(markerField !== undefined && markerField !== '') {

                                                          var markerImagePath = row[markerField];

                                                              if(markerImagePath !== undefined && markerImagePath !== '') {

                                                              markerProps.icon = markerImagePath;

                                                              }

                                                          }

                                                         

                                                          var marker = new google.maps.Marker(markerProps);

                                                          marker.rowNumber = rowNumber;

                                                          marker.rowData = row;

                                                          marker._isSelected = false;

                                                          marker._assignedIcon = markerProps.icon;

                                                         

                                                          var markerLayerField = thisWidget.properties['MarkerLayerField'];

                                                         

                                                          if(markerLayerField !== undefined && markerLayerField !== '') {

                                                          var markerLayer = row[markerLayerField];

                                                        

                                                          if(markerLayer !== undefined)

                                                          marker.setZIndex(google.maps.Marker.MAX_ZINDEX + markerLayer);

                                                          else

                                                          marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

                                                          }

                                                          else

                                                          marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

                               

                               

                                                          this.currentMarkers.push(marker);

                               

                               

                                                          this.markerLookup.push({ latlng : latlng, marker : marker});

                                                         

                                                          // This funky code is because we are in a loop and need to do some closure magic

                               

                               

                                                          if (isMashupTooltipConfigured) {

                                                              google.maps.event.addListener(marker, 'mouseover', this.mouseOverEventListener);

                                                          }

                                                         

                                                          if (enableMarkerSelection) {

                                                              google.maps.event.addListener(marker, 'click', this.clickEventListener);

                                                              google.maps.event.addListener(marker, 'dblclick', this.dblclickEventListener);

                                                          }

                                                      }

                               

                               

                                                      this.dataBounds.extend(latlng);

                                                  }

                                              }

                               

                               

                                              var showPathBetweenMarkers = this.getProperty('ShowPathBetweenMarkers');

                                              if (LatLngList.length > 1 && showPathBetweenMarkers) {

                                                  this.polyline = new google.maps.Polyline({

                                                      path: LatLngList,

                                                      strokeColor: thisWidget.pathStyle.lineColor,

                                                      strokeOpacity: 1.0,

                                                      strokeWeight: parseInt(thisWidget.pathStyle.lineThickness)

                                                  });

                               

                               

                                                  this.polyline.setMap(thisWidget.map);

                               

                               

                                                  if (this.getProperty('ShowEndMarker')) {

                                                      this.endMarker = new google.maps.Marker({

                                                          map: this.map,

                                                          position: LatLngList[LatLngList.length - 1],

                                                          title: "End",

                                                          icon: this.endMarkerStyle.image

                                                      });

                                                      this.endMarker.setZIndex(google.maps.Marker.MAX_ZINDEX + 2);

                                                  }

                               

                               

                                                  if (this.getProperty('ShowStartMarker')) {

                                                      this.startMarker = new google.maps.Marker({

                                                          map: this.map,

                                                          position: LatLngList[0],

                                                          title: "Start",

                                                          icon: this.startMarkerStyle.image

                                                      });

                                                      this.startMarker.setZIndex(google.maps.Marker.MAX_ZINDEX + 2);

                                                  }

                               

                               

                                              }

                               

                               

                                              // Autofit if we have more than one data point

                               

                               

                                              if(zoomOnDataRefresh) {

                                               google.maps.event.trigger(this.map, 'resize');

                               

                                           weAreChangingBounds = true;

                                               this.map.setZoom(this.map.getZoom() - 1);

                                           weAreChangingBounds = true;

                                               this.map.setZoom(this.map.getZoom() + 1);

                               

                                               // Autofit if we have more than one data point

                               

                                               if (LatLngList.length > 1) {

                                                   var effectiveBounds = new google.maps.LatLngBounds();

                               

                                                      if(this.plannedRouteDataBounds !== undefined) {

                                                      effectiveBounds.union(this.plannedRouteDataBounds);

                                                      }

                                                     

                                                   if(this.routeDataBounds !== undefined) {

                                                    effectiveBounds.union(this.routeDataBounds);

                                                   }

                                                  

                                                      if(this.regionDataBounds !== undefined) {

                                                      effectiveBounds.union(this.regionDataBounds);

                                                      }

                                                     

                                                   if(this.dataBounds !== undefined) {

                                                    effectiveBounds.union(this.dataBounds);

                                                   }

                                                  

                                                   this.map.fitBounds(effectiveBounds);

                                               }

                                               else {

                                                   if (LatLngList.length > 0) {

                                           weAreChangingBounds = true;

                                                       this.map.setCenter(LatLngList[0]);

                                           weAreChangingBounds = true;

                                                       this.map.setZoom(this.map.getZoom());

                                                   }

                                               }

                                              }

                                             

                                              // Finally, handle any pre-selected markers

                               

                               

                                              thisWidget.clearSelectedMarkers();

                                              var selectedRowIndices = updatePropertyInfo.SelectedRowIndices;

                               

                               

                                              if (selectedRowIndices !== undefined) {

                                                  var nSelectedRows = selectedRowIndices.length;

                               

                               

                                                  for (var selectedRowIndex = 0; selectedRowIndex < nSelectedRows; selectedRowIndex++) {

                                                      thisWidget.setSelectedMarker(selectedRowIndices[selectedRowIndex]);

                                                  }

                                              }

                                          };

                               

                               

                                          if (updatePropertyInfo.TargetProperty === 'Data') {

                                              redrawMap.call(this);

                                          }

                               

                               

                                          switch (updatePropertyInfo.TargetProperty) {

                                              case 'ShowPathBetweenMarkers':

                                              case 'ShowStartMarker':

                                              case 'ShowEndMarker':

                                              case 'ShowMarkers':

                                                  thisWidget.setProperty(updatePropertyInfo.TargetProperty, updatePropertyInfo.RawSinglePropertyValue);

                                                  redrawMap.call(this);

                                                  break;

                                              case 'ShowRoute':

                                                  thisWidget.setProperty(updatePropertyInfo.TargetProperty, updatePropertyInfo.RawSinglePropertyValue);

                                                  redrawRoute.call(this);

                                                  break;

                                              case 'ShowPlannedRoute':

                                                  thisWidget.setProperty(updatePropertyInfo.TargetProperty, updatePropertyInfo.RawSinglePropertyValue);

                                                  redrawPlannedRoute.call(this);

                                                  break;

                                              case 'ShowRegions':

                                                  thisWidget.setProperty(updatePropertyInfo.TargetProperty, updatePropertyInfo.RawSinglePropertyValue);

                                                  redrawRegions.call(this);

                                                  break;

                                          }

                                      }

                                  };

                              };