cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

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

Newbie

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

8 REPLIES 8

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

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 ?

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.

Highlighted

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

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 ?

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 ?

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 ?

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 ?

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;

            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;

            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, 'click');

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

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

                this.currentRegions.setMap(null);

                this.currentRegions = 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, 'mouseover');

                    }

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

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

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

                delete this.markerLookup.latlng;

                this.markerLookup.marker = null;

                delete this.markerLookup;

                this.currentMarkers.setMap(null);

                this.currentMarkers.rowNumber = null;

                this.currentMarkers.row = null;

                this.currentMarkers._isSelected = null;

                this.currentMarkers._assignedIcon = null;

              

                delete this.currentMarkers.rowNumber;

                delete this.currentMarkers.row;

                delete this.currentMarkers._isSelected;

                delete this.currentMarkers._assignedIcon;

              

                    delete this.currentMarkers;

                }

               

                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;

            }

        }

    };

};

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

I'm sorry, zoneColor it was for my case. You must replace it for the color that you want (format #000000).