• Home
  • Integrate Google Maps into NetSuite
Category: Uncategorized

Integrate Google Maps into NetSuite

In this day and age, businesses need to stay one step ahead in terms of targeting customers and adding value to them.

The first step is to get a cutting edge, futuristic cloud based technology like NetSuite. Next, optimize the use of NetSuite to meet your business goals. One such way is to integrate Google Maps into NetSuite.

Google maps integrated into NetSuite can have several benefits.


  • Maps in an SSP application can boost interests in your business as it can show activities surrounding your location.
  • Maps integrated into your website, if implemented strategically, can increase network traffic to your site as visitors no longer need to pull out a separate browser window to load maps to view proximity of their location.

This is a simple script on how to integrate Google Maps API into NetSuite. For this example, use an embedded Inline HTML to display the map using Google Geocode API with a Marker on the map. The Suitelet can accept location keywords, e.g. City and Country through a NetSuite textbox object.

  1. Follow the step on Google API Documentation on how to setup a Google Project using your Google/Gmail account. This is a necessary step to be able to get your unique CLIENT ID that we’ll need later on. Here’s the link in Google:
  2. https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key
  3. Google provided a sample HTML code for displaying the basic map interface. We are going to use this example and convert it into Suitelet adding our modifications. Below is the explanation of the modified script:

NetSuite Objects:

1.0.

var htmlTxtCity = form.addField('custpage_city', 'text').setLayoutType('outsideabove'); - This is a text box that will appear on the suitelet form that will accept CITY value.

2.0.

var htmlHeaderCountry = form.addField('custpage_country', 'text').setLayoutType('outsideabove') - This is a text box that will appear on the suitelet form that will accept COUNTRY value.

3.0.

var htmlMaps = form.addField('custpage_maps', 'inlinehtml'); - This is the inlineHTML object that will display the actual Google Map on the suitelet form.

Google Objects:

1.0

var URL = 'https://maps.googleapis.com/maps/api/geocode/json?address='; - This is the Geocode API URL we will call to retrieve the Latitude and Longitude coordinates of the CITY and COUNTRY entered by a user on the suitelet form.

2.0

var KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; - This is the unique CLIENT ID Google will assign to you. See step 1.

//createHTML function snippet

var res = nlapiRequestURL(URL + LOC + '&key=' + KEY); //REQUEST call to Geocode API. This will return an object with the following format:

"{

"results" : [

{

"address_components" : [

{

"long_name" : "Kolkata",

"short_name" : "Kolkata",

"types" : [ "locality", "political" ]

},

{

"long_name" : "Kolkata",

"short_name" : "Kolkata",

"types" : [ "administrative_area_level_2", "political" ]

},

{

"long_name" : "West Bengal",

"short_name" : "WB",

"types" : [ "administrative_area_level_1", "political" ]

},

{

"long_name" : "India",

"short_name" : "IN",

"types" : [ "country", "political" ]

}

],

"formatted_address" : "Kolkata, West Bengal, India",

"geometry" : {

"bounds" : {

"northeast" : {

"lat" : 23.0083628,

"lng" : 88.5428696

},

"southwest" : {

"lat" : 22.3436288,

"lng" : 88.1936357

}

},

"location" : {

"lat" : 22.572646,

"lng" : 88.36389500000001

},

"location_type" : "APPROXIMATE",

"viewport" : {

"northeast" : {

"lat" : 23.0078201,

"lng" : 88.5428696

},

"southwest" : {

"lat" : 22.3436288,

"lng" : 88.19430439999999

}

}

},

"place_id" : "ChIJZ_YISduC-DkRvCxsj-Yw40M",

"types" : [ "locality", "political" ]

}

],

"status" : "OK"

}

"

//We need the LAT and LNG of the LOCATION node. Below is how we get to it.

var jsonbody = JSON.parse(res.body);

jsonbody.results[0].geometry.location;

lat = jsonbody.results[0].geometry.location.lat;

lng = jsonbody.results[0].geometry.location.lng;

Once we have the LAT and LNG values, will make another call to the Google Map API to display location to the map:

html += ' var uluru = {lat: '+lat+', lng: '+lng+'};';

html += ' src="https://maps.googleapis.com/maps/api/js?key='+KEY+'&callback=initMap">';

Running it all together:

var Maps = {};

var URL = 'https://maps.googleapis.com/maps/api/geocode/json?address=';

var KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

Maps.main = function (request,response)

{

var form = drawform(request);

response.writePage(form);

};

function drawform(request){

var form = nlapiCreateForm('Google Maps in Suitelet Example', true);

var htmlHeaderCity = form.addField('custpage_headercity', 'inlinehtml').setLayoutType('outsideabove', 'startrow');

htmlHeaderCity.setDefaultValue("City");

var htmlTxtCity = form.addField('custpage_city', 'text').setLayoutType('outsideabove');

var htmlHeaderCountry = form.addField('custpage_headercountry', 'inlinehtml').setLayoutType('outsideabove', 'startrow');

htmlHeaderCountry.setDefaultValue("Country");

var htmlHeaderCountry = form.addField('custpage_country', 'text').setLayoutType('outsideabove')

var htmlMaps = form.addField('custpage_maps', 'inlinehtml');

var city = request.getParameter('custpage_city');

var country = request.getParameter('custpage_country');

nlapiLogExecution('Debug','city and count',city +' '+country);

if (city!=null){

var html = createHTML(city,country);

htmlMaps.setDefaultValue(html);

}

form.addSubmitButton('Submit');

form.addResetButton('Reset');

return form;

}

function createHTML(city,country){

var LOC = city+'+'+country;

var res = nlapiRequestURL(URL+LOC+'&key='+KEY);

var jsonbody = JSON.parse(res.body);

var lat = 0;

var lng = 0;

nlapiLogExecution('Debug','jsonbody',JSON.stringify(jsonbody));

if (jsonbody){

jsonbody.results[0].geometry.location;

lat = jsonbody.results[0].geometry.location.lat;

lng = jsonbody.results[0].geometry.location.lng;

}


var html = '<!DOCTYPE html>';

html += '<html>';

html += '<head>';

html += '<style>';

html += '#map {';

html += 'height: 400px;';

html += 'width: 100%;';

html += '}';

html += '</style>';

html += '</head>';

html += '<body>';

html += '<h3>My Google Maps Demo</h3>';

html += '<div id="map"></div>';

html += '<script>';

html += 'function initMap() {';

html += 'var uluru = {lat: '+lat+', lng: '+lng+'};';

html += 'var map = new google.maps.Map(document.getElementById(\'map\'), {';

html += 'zoom: 15,';

html += 'center: uluru';

html += '});';

html += 'var marker = new google.maps.Marker({';

html += 'position: uluru,';

html += 'map: map';

html += '});';

html += '}';

html += '</script>';

html += '<script async defer';

html += 'src="https://maps.googleapis.com/maps/api/js?key='+KEY+'&callback=initMap">';

html += '</script>';

html += '</body>';

html += '</html>';

nlapiLogExecution('Debug','html',html);

return html;

}

ACTUAL RESULT:

On Initial Load:

User Enters Values and hit Submit:

Result:

You can use this if you need an external Suitelet form requirement address details, look-up and other things where a map within NetSuite is needed.

Some ways this can add value to a business are:

For example, a Logistics company implementing NetSuite can add maps to their NetSuite SSP website to show areas they serve and how many branches they have there.

A Kitchen supply company can visually display the restaurants around them, gather data, them import directly into NetSuite as leads. These are few examples of how Google Maps integrated into NetSuite can be valuable to a business.

Hope this tip can generate more customers and add to the bottom line!!!

Enjoy!

Starting the conversation is easy.


You're just a few keystrokes away from a conversation that could change your business.




Message sent. We'll get back to you soon!

Contact us

Leave us a message, and we will reply shortly.

Required *