Using Google API in Lightning Component<\/h3>\n<\/div>\n\nAs we all know that the use of Google API is restricted in Lightning component due to some security issue, although we can use it through iframe, and also do customizations in the map. You can refer to the code given below.<\/p>\n
Here is your Visualfoarce Page<\/strong> which you can include in lightning component later:<\/p>\n<apex:page applyHtmlTag=\"false\" applyBodyTag=\"false\" docType=\"html-5.0\" showHeader=\"false\" controller=\"GetRoute\" standardStylesheets=\"false\">\r\n \r\n <!-- \r\n \/**\r\n * Webkul Software.\r\n *\r\n * @category Webkul\r\n * @author Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license https:\/\/store.webkul.com\/license.html\r\n *\/\r\n -->\r\n\r\n <apex:includescript value=\"{!urlfor($Resource.JQuery)}\"\/>\r\n <html xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" lang=\"en\">\r\n <head>\r\n <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\"\/>\r\n <meta charset=\"utf-8\"\/>\r\n <title>Directions service<\/title>\r\n <style>\r\n html, body {\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n #map {\r\n height: 100%;\r\n } \r\n #Mybutton{\r\n display: none;\r\n }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <apex:form > \r\n <apex:inputhidden id=\"start\" value=\"{!startpoint}\" \/>\r\n <apex:inputhidden id=\"end\" value=\"{!endpoint}\"\/> \r\n <button type=\"button\" id=\"Mybutton\">Mybutton<\/button> \r\n <\/apex:form>\r\n <div id =\"map\"><\/div>\r\n <script>\r\n function initMap() {\r\n var directionsService = new google.maps.DirectionsService;\r\n var directionsDisplay = new google.maps.DirectionsRenderer;\r\n var map = new google.maps.Map(document.getElementById('map'), {\r\n zoom: 7,\r\n center: {lat: 41.85, lng: -87.65}\r\n });\r\n directionsDisplay.setMap(map);\r\n var st;\r\n var ed;\r\n $( document ).on(\"click\" ,\" #Mybutton \",function(){\r\n st =$(\"[id$='start']\").val();\r\n ed =$(\"[id$='end']\").val()\r\n console.log($(\"[id$='start']\").val());\r\n calculateAndDisplayRoute(directionsService, directionsDisplay);\r\n });\r\n if($(\"[id$='start']\").val()!=null && $(\"[id$='start']\").val()!=st && $(\"[id$='end']\").val()!=null && $(\"[id$='end']\").val()!=ed){\r\n $(\"#Mybutton\").trigger(\"click\");\r\n } \r\n }\r\n function calculateAndDisplayRoute(directionsService, directionsDisplay) {\r\n directionsService.route({\r\n origin: $(\"[id$='start']\").val(),\r\n destination: $(\"[id$='end']\").val(),\r\n travelMode: 'DRIVING'\r\n }, function(response, status) {\r\n if (status === 'OK') {\r\n directionsDisplay.setDirections(response);\r\n } else {\r\n \/\/window.alert('Directions request failed due to ' + status);\r\n }\r\n });\r\n }\r\n <\/script>\r\n <script async=\"true\" defer=\"true\" src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=Your_Google_API_Key&callback=initMap\">\r\n <\/script>\r\n <\/body>\r\n <\/html>\r\n<\/apex:page>\r\n<\/pre>\nThe Controller 'GetRoute'<\/strong> used in the Visualforce Page:<\/pre>\npublic with sharing class GetRoute {\r\n\r\n \/**\r\n * Webkul Software.\r\n *\r\n * @category Webkul\r\n * @author Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license https:\/\/store.webkul.com\/license.html\r\n *\/\r\n\r\n public static string startpoint{get{\r\n startpoint = apexpages.currentpage().getparameters().get('startpoint');\r\n return startpoint;\r\n } set;}\r\n public static string endpoint{get{\r\n endpoint = apexpages.currentpage().getparameters().get('endpoint');\r\n return endpoint;\r\n } set;}\r\n \r\n public void nothing(){} \r\n}<\/pre>\nNow we will switch to Lightning Component<\/strong>, here is the code:<\/p>\n<aura:component >\r\n\r\n <!-- \r\n \/**\r\n * Webkul Software.\r\n *\r\n * @category Webkul\r\n * @author Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license https:\/\/store.webkul.com\/license.html\r\n *\/\r\n -->\r\n\r\n <ltng:require styles=\"{!$Resource.SLDS +\r\n '\/assets\/styles\/salesforce-lightning-design-system-ltng.css'}\"\/>\r\n <aura:handler name = \"init\" value=\"{!this}\" action=\"{!c.doinit}\"\/>\r\n <aura:attribute name=\"startPoint\" type=\"String\"\/>\r\n <aura:attribute name=\"endPoint\" type=\"String\"\/>\r\n <aura:attribute name=\"frameSrc\" type=\"String\"\/> \r\n <div class=\"wk_static\">\r\n <div class=\"site-masthead slds-page-header\" role=\"banner\">\r\n <div class=\" slds-grid slds-wrap\">\r\n <div class=\"slds-col slds-has-flexi-truncate\">\r\n <div class=\"slds-media slds-no-space slds-grow\">\r\n <div class=\"slds-media__figure\">\r\n <\/div>\r\n <div class=\"slds-media__body\">\r\n <h1 class=\"slds-page-header__title pageTitle slds-m-right--small slds-align-middle slds-truncate\" title=\"this should match the Record Title\">Using Google API in Lightning Component<\/h1>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div> \r\n <div class=\"slds-grid slds-grid--vertical-align-center slds-box slds-theme--shade\">\r\n <div class=\"slds-size--1-of-2 slds-m-around--small\">\r\n <div class=\"slds-size--1-of-2 setmargin\">\r\n <div class=\"slds-form-element\"> \r\n <div class=\"slds-form-element__control\">\r\n <ui:inputselect aura:id=\"start\" class=\"slds-select slds-m-bottom--small\" labelclass=\"slds-form-element__label\" value=\"{!v.startPoint}\" label=\"Start\" change=\"{!c.GetRoute}\">\r\n <ui:inputSelectOption text=\"chicago, il\" label=\"Chicago\"\/>\r\n <ui:inputSelectOption text=\"st louis, mo\" label=\"St Louis\"\/>\r\n <ui:inputSelectOption text=\"joplin, mo\" label=\"Joplin, MO\"\/>\r\n <ui:inputSelectOption text=\"oklahoma city, ok\" label=\"Oklahoma City\"\/>\r\n <ui:inputSelectOption text=\"amarillo, tx\" label=\"Amarillo\"\/>\r\n <ui:inputSelectOption text=\"gallup, nm\" label=\"Gallup, NM\"\/>\r\n <ui:inputSelectOption text=\"flagstaff, az\" label=\"Flagstaff, AZ\"\/>\r\n <ui:inputSelectOption text=\"winona, az\" label=\"Winona\"\/>\r\n <ui:inputSelectOption text=\"kingman, az\" label=\"Kingman\"\/>\r\n <ui:inputSelectOption text=\"barstow, ca\" label=\"Barstow\"\/>\r\n <ui:inputSelectOption text=\"san bernardino, ca\" label=\"San Bernardino\"\/>\r\n <ui:inputSelectOption text=\"los angeles, ca\" label=\"Los Angeles\"\/>\r\n <\/ui:inputselect>\r\n <ui:inputselect aura:id=\"end\" label=\"End\" class=\"slds-select\" labelclass=\"slds-form-element__label\" value=\"{!v.endPoint}\" change=\"{!c.GetRoute}\">\r\n <ui:inputSelectOption text=\"chicago, il\" label=\"Chicago\"\/>\r\n <ui:inputSelectOption text=\"st louis, mo\" label=\"St Louis\"\/>\r\n <ui:inputSelectOption text=\"joplin, mo\" label=\"Joplin, MO\"\/>\r\n <ui:inputSelectOption text=\"oklahoma city, ok\" label=\"Oklahoma City\"\/>\r\n <ui:inputSelectOption text=\"amarillo, tx\" label=\"Amarillo\"\/>\r\n <ui:inputSelectOption text=\"gallup, nm\" label=\"Gallup, NM\"\/>\r\n <ui:inputSelectOption text=\"flagstaff, az\" label=\"Flagstaff, AZ\"\/>\r\n <ui:inputSelectOption text=\"winona, az\" label=\"Winona\"\/>\r\n <ui:inputSelectOption text=\"kingman, az\" label=\"Kingman\"\/>\r\n <ui:inputSelectOption text=\"barstow, ca\" label=\"Barstow\"\/>\r\n <ui:inputSelectOption text=\"san bernardino, ca\" label=\"San Bernardino\"\/>\r\n <ui:inputSelectOption text=\"los angeles, ca\" label=\"Los Angeles\"\/>\r\n <\/ui:inputselect>\r\n <\/div>\r\n <\/div> \r\n <\/div>\r\n <div class=\"slds-size--4-of-8\"><\/div>\r\n <\/div>\r\n <div class=\"slds-size--1-of-2 slds-m-around--small framediv\">\r\n <iframe id=\"myFrame\" style=\"height: 100%;width: 100%\" src=\"{!v.frameSrc}\"\/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/aura:component><\/pre>\nThe Controller<\/strong> of lightning Component:<\/p>\n({\r\n \r\n \/**\r\n * Webkul Software.\r\n *\r\n * @category Webkul\r\n * @author Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license https:\/\/store.webkul.com\/license.html\r\n *\/\r\n\r\n doinit : function(component, event, helper) { \r\n component.set(\"v.frameSrc\",'https:\/\/wk-aakanksha-dev-ed--c.ap2.visual.force.com\/apex\/googleMap'); \r\n },\r\n GetRoute: function(component, event, helper){\r\n var startpoint = component.find(\"start\");\r\n var sp = startpoint.get(\"v.value\");\r\n var endpoint = component.find(\"end\");\r\n var ep = endpoint.get(\"v.value\");\r\n \r\n var d = new Date();\r\n var n = d.getTime();\r\n component.set(\"v.frameSrc\",'https:\/\/wk-aakanksha-dev-ed--c.ap2.visual.force.com\/apex\/googleMap?t='+n+'&startpoint='+sp+'&endpoint='+ep);\r\n }\r\n})<\/pre>\nHere is related CSS<\/strong>:<\/p>\n\/**\r\n* Webkul Software.\r\n*\r\n* @category Webkul\r\n* @author Webkul\r\n* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n* @license https:\/\/store.webkul.com\/license.html\r\n*\/\r\n\r\n.THIS .framediv{\r\n height: 500px;\r\n}\r\n.THIS .site-masthead{\r\n background-color: #16325c!important; \r\n}\r\n.THIS .pageTitle{\r\n color:#ffffff!important;\r\n}\r\n.THIS .setmargin{\r\n margin: 0 auto;\r\n}<\/pre>\nNote<\/strong> : If you want to know how to integrate google map with visualforce visit the following link How To Use Google Api Key In Visualforce<\/a><\/div>\n<\/div>\n<\/div>\n\n\nOutput<\/h3>\n<\/div>\n![\"using](\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/09\/blog9.png\")
<\/a><\/div>\n <\/p>\n<\/div>\n
\n\n<\/i>Support<\/h3>\n<\/div>\n\nThat\u2019s all for using google API in lightning component, still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to add a ticket, we will be happy to help you. https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/<\/a><\/p>\n<\/div>\n<\/div>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
As we all know that the use of Google API is restricted in Lightning component due to some security issue, although we can use it through iframe, and also do customizations in the map. You can refer to the code given below.<\/p>\n
Here is your Visualfoarce Page<\/strong> which you can include in lightning component later:<\/p>\n Now we will switch to Lightning Component<\/strong>, here is the code:<\/p>\n The Controller<\/strong> of lightning Component:<\/p>\n Here is related CSS<\/strong>:<\/p>\n <\/p>\n<\/div>\n That\u2019s all for using google API in lightning component, still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to add a ticket, we will be happy to help you. https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/<\/a><\/p>\n<\/div>\n<\/div>\n <\/p>\n","protected":false},"excerpt":{"rendered":"<apex:page applyHtmlTag=\"false\" applyBodyTag=\"false\" docType=\"html-5.0\" showHeader=\"false\" controller=\"GetRoute\" standardStylesheets=\"false\">\r\n \r\n <!-- \r\n \/**\r\n * Webkul Software.\r\n *\r\n * @category Webkul\r\n * @author Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license https:\/\/store.webkul.com\/license.html\r\n *\/\r\n -->\r\n\r\n <apex:includescript value=\"{!urlfor($Resource.JQuery)}\"\/>\r\n <html xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" lang=\"en\">\r\n <head>\r\n <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\"\/>\r\n <meta charset=\"utf-8\"\/>\r\n <title>Directions service<\/title>\r\n <style>\r\n html, body {\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n #map {\r\n height: 100%;\r\n } \r\n #Mybutton{\r\n display: none;\r\n }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <apex:form > \r\n <apex:inputhidden id=\"start\" value=\"{!startpoint}\" \/>\r\n <apex:inputhidden id=\"end\" value=\"{!endpoint}\"\/> \r\n <button type=\"button\" id=\"Mybutton\">Mybutton<\/button> \r\n <\/apex:form>\r\n <div id =\"map\"><\/div>\r\n <script>\r\n function initMap() {\r\n var directionsService = new google.maps.DirectionsService;\r\n var directionsDisplay = new google.maps.DirectionsRenderer;\r\n var map = new google.maps.Map(document.getElementById('map'), {\r\n zoom: 7,\r\n center: {lat: 41.85, lng: -87.65}\r\n });\r\n directionsDisplay.setMap(map);\r\n var st;\r\n var ed;\r\n $( document ).on(\"click\" ,\" #Mybutton \",function(){\r\n st =$(\"[id$='start']\").val();\r\n ed =$(\"[id$='end']\").val()\r\n console.log($(\"[id$='start']\").val());\r\n calculateAndDisplayRoute(directionsService, directionsDisplay);\r\n });\r\n if($(\"[id$='start']\").val()!=null && $(\"[id$='start']\").val()!=st && $(\"[id$='end']\").val()!=null && $(\"[id$='end']\").val()!=ed){\r\n $(\"#Mybutton\").trigger(\"click\");\r\n } \r\n }\r\n function calculateAndDisplayRoute(directionsService, directionsDisplay) {\r\n directionsService.route({\r\n origin: $(\"[id$='start']\").val(),\r\n destination: $(\"[id$='end']\").val(),\r\n travelMode: 'DRIVING'\r\n }, function(response, status) {\r\n if (status === 'OK') {\r\n directionsDisplay.setDirections(response);\r\n } else {\r\n \/\/window.alert('Directions request failed due to ' + status);\r\n }\r\n });\r\n }\r\n <\/script>\r\n <script async=\"true\" defer=\"true\" src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=Your_Google_API_Key&callback=initMap\">\r\n <\/script>\r\n <\/body>\r\n <\/html>\r\n<\/apex:page>\r\n<\/pre>\nThe Controller 'GetRoute'<\/strong> used in the Visualforce Page:<\/pre>\n
public with sharing class GetRoute {\r\n\r\n \/**\r\n * Webkul Software.\r\n *\r\n * @category Webkul\r\n * @author Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license https:\/\/store.webkul.com\/license.html\r\n *\/\r\n\r\n public static string startpoint{get{\r\n startpoint = apexpages.currentpage().getparameters().get('startpoint');\r\n return startpoint;\r\n } set;}\r\n public static string endpoint{get{\r\n endpoint = apexpages.currentpage().getparameters().get('endpoint');\r\n return endpoint;\r\n } set;}\r\n \r\n public void nothing(){} \r\n}<\/pre>\n<aura:component >\r\n\r\n <!-- \r\n \/**\r\n * Webkul Software.\r\n *\r\n * @category Webkul\r\n * @author Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license https:\/\/store.webkul.com\/license.html\r\n *\/\r\n -->\r\n\r\n <ltng:require styles=\"{!$Resource.SLDS +\r\n '\/assets\/styles\/salesforce-lightning-design-system-ltng.css'}\"\/>\r\n <aura:handler name = \"init\" value=\"{!this}\" action=\"{!c.doinit}\"\/>\r\n <aura:attribute name=\"startPoint\" type=\"String\"\/>\r\n <aura:attribute name=\"endPoint\" type=\"String\"\/>\r\n <aura:attribute name=\"frameSrc\" type=\"String\"\/> \r\n <div class=\"wk_static\">\r\n <div class=\"site-masthead slds-page-header\" role=\"banner\">\r\n <div class=\" slds-grid slds-wrap\">\r\n <div class=\"slds-col slds-has-flexi-truncate\">\r\n <div class=\"slds-media slds-no-space slds-grow\">\r\n <div class=\"slds-media__figure\">\r\n <\/div>\r\n <div class=\"slds-media__body\">\r\n <h1 class=\"slds-page-header__title pageTitle slds-m-right--small slds-align-middle slds-truncate\" title=\"this should match the Record Title\">Using Google API in Lightning Component<\/h1>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div> \r\n <div class=\"slds-grid slds-grid--vertical-align-center slds-box slds-theme--shade\">\r\n <div class=\"slds-size--1-of-2 slds-m-around--small\">\r\n <div class=\"slds-size--1-of-2 setmargin\">\r\n <div class=\"slds-form-element\"> \r\n <div class=\"slds-form-element__control\">\r\n <ui:inputselect aura:id=\"start\" class=\"slds-select slds-m-bottom--small\" labelclass=\"slds-form-element__label\" value=\"{!v.startPoint}\" label=\"Start\" change=\"{!c.GetRoute}\">\r\n <ui:inputSelectOption text=\"chicago, il\" label=\"Chicago\"\/>\r\n <ui:inputSelectOption text=\"st louis, mo\" label=\"St Louis\"\/>\r\n <ui:inputSelectOption text=\"joplin, mo\" label=\"Joplin, MO\"\/>\r\n <ui:inputSelectOption text=\"oklahoma city, ok\" label=\"Oklahoma City\"\/>\r\n <ui:inputSelectOption text=\"amarillo, tx\" label=\"Amarillo\"\/>\r\n <ui:inputSelectOption text=\"gallup, nm\" label=\"Gallup, NM\"\/>\r\n <ui:inputSelectOption text=\"flagstaff, az\" label=\"Flagstaff, AZ\"\/>\r\n <ui:inputSelectOption text=\"winona, az\" label=\"Winona\"\/>\r\n <ui:inputSelectOption text=\"kingman, az\" label=\"Kingman\"\/>\r\n <ui:inputSelectOption text=\"barstow, ca\" label=\"Barstow\"\/>\r\n <ui:inputSelectOption text=\"san bernardino, ca\" label=\"San Bernardino\"\/>\r\n <ui:inputSelectOption text=\"los angeles, ca\" label=\"Los Angeles\"\/>\r\n <\/ui:inputselect>\r\n <ui:inputselect aura:id=\"end\" label=\"End\" class=\"slds-select\" labelclass=\"slds-form-element__label\" value=\"{!v.endPoint}\" change=\"{!c.GetRoute}\">\r\n <ui:inputSelectOption text=\"chicago, il\" label=\"Chicago\"\/>\r\n <ui:inputSelectOption text=\"st louis, mo\" label=\"St Louis\"\/>\r\n <ui:inputSelectOption text=\"joplin, mo\" label=\"Joplin, MO\"\/>\r\n <ui:inputSelectOption text=\"oklahoma city, ok\" label=\"Oklahoma City\"\/>\r\n <ui:inputSelectOption text=\"amarillo, tx\" label=\"Amarillo\"\/>\r\n <ui:inputSelectOption text=\"gallup, nm\" label=\"Gallup, NM\"\/>\r\n <ui:inputSelectOption text=\"flagstaff, az\" label=\"Flagstaff, AZ\"\/>\r\n <ui:inputSelectOption text=\"winona, az\" label=\"Winona\"\/>\r\n <ui:inputSelectOption text=\"kingman, az\" label=\"Kingman\"\/>\r\n <ui:inputSelectOption text=\"barstow, ca\" label=\"Barstow\"\/>\r\n <ui:inputSelectOption text=\"san bernardino, ca\" label=\"San Bernardino\"\/>\r\n <ui:inputSelectOption text=\"los angeles, ca\" label=\"Los Angeles\"\/>\r\n <\/ui:inputselect>\r\n <\/div>\r\n <\/div> \r\n <\/div>\r\n <div class=\"slds-size--4-of-8\"><\/div>\r\n <\/div>\r\n <div class=\"slds-size--1-of-2 slds-m-around--small framediv\">\r\n <iframe id=\"myFrame\" style=\"height: 100%;width: 100%\" src=\"{!v.frameSrc}\"\/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/aura:component><\/pre>\n({\r\n \r\n \/**\r\n * Webkul Software.\r\n *\r\n * @category Webkul\r\n * @author Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license https:\/\/store.webkul.com\/license.html\r\n *\/\r\n\r\n doinit : function(component, event, helper) { \r\n component.set(\"v.frameSrc\",'https:\/\/wk-aakanksha-dev-ed--c.ap2.visual.force.com\/apex\/googleMap'); \r\n },\r\n GetRoute: function(component, event, helper){\r\n var startpoint = component.find(\"start\");\r\n var sp = startpoint.get(\"v.value\");\r\n var endpoint = component.find(\"end\");\r\n var ep = endpoint.get(\"v.value\");\r\n \r\n var d = new Date();\r\n var n = d.getTime();\r\n component.set(\"v.frameSrc\",'https:\/\/wk-aakanksha-dev-ed--c.ap2.visual.force.com\/apex\/googleMap?t='+n+'&startpoint='+sp+'&endpoint='+ep);\r\n }\r\n})<\/pre>\n\/**\r\n* Webkul Software.\r\n*\r\n* @category Webkul\r\n* @author Webkul\r\n* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n* @license https:\/\/store.webkul.com\/license.html\r\n*\/\r\n\r\n.THIS .framediv{\r\n height: 500px;\r\n}\r\n.THIS .site-masthead{\r\n background-color: #16325c!important; \r\n}\r\n.THIS .pageTitle{\r\n color:#ffffff!important;\r\n}\r\n.THIS .setmargin{\r\n margin: 0 auto;\r\n}<\/pre>\nOutput<\/h3>\n<\/div>\n
<\/a><\/div>\n<\/i>Support<\/h3>\n<\/div>\n