Re: How to use google maps libraries like Drawing ...

done11 · ‎Dec 09, 2016

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

ttielebein · ‎Dec 09, 2016

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!

aduarte · ‎Dec 26, 2016

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&libraries=drawing,geometry"

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

I hope this can help you.

done11 · ‎Jan 12, 2017

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 .

aduarte · ‎Jan 16, 2017

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

done11 · ‎Jan 19, 2017

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 ?

aduarte · ‎Jan 19, 2017

Hello,

Of course, can you send me your code please?

done11 · ‎Jan 24, 2017

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;

}

};

aduarte · ‎Jan 24, 2017

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

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

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