Add the following code in the source code of the page you want to see the map on in the RightNow Customer Portal
Make sure to Replace the URLS and Keys with your own:
let GogoleMapKey = “<YOUR GOOGLE MAP API>”;
let RightNowUserPass = “user:pass”
url: https://<RightNow_Instance>.rightnowdemo.com/services/rest/connect/v1.3/queryResults/?query=’+ROQL
<div id="R_1Map">
<div id="dvMap" style="width:980px; height: 400px;">
</div>
</div>
<div id="legend" style = "font-family: Arial, sans-serif; background:#fff; padding: 10px;margin: 10px;border: 3px solid #000;">
<h3>Legend</h3>
<img src = "https://i.ibb.co/4ZYFWZZ/iconfinder-6-2958192.png" width= "30px" height = "30px"/> Your main property</br>
<img src = "https://i.ibb.co/JmxvdbH/red-100.png" width= "30px" height = "30px"/> Your Road SR</br>
<img src = "https://i.ibb.co/yBWh5Sb/icon-blue-100.png" width= "30px" height = "30px"/>Your Fly Tipping SR</br>
<img src = "https://i.ibb.co/N9YmMkm/32.png" width= "20px" height = "20px"/> Nearby Road Incidents</br>
<img src = "https://i.ibb.co/sF4gHTf/32-1.png" width= "20px" height = "20px"/> Nearby Fly Tipping Incidents</br>
</div>
<script>
//Global Variable Declaration
let GogoleMapKey = "<YOUR GOOGLE MAP API>";
let RightNowUserPass = "user:pass"
function userPass(){
let ussrPass = "Basic " + btoa(RightNowUserPass); // This is base 64 encoding of user:pass
return ussrPass;
}
function addAPI(){
console.log("---------------------ADD JQuery and Google Map API to the HEAD tag------------------------")
var mapScript = document.createElement('script');
mapScript.setAttribute('type','text/javascript')
mapScript.setAttribute('src','https://maps.googleapis.com/maps/api/js?sensor=false&key='+GogoleMapKey);
document.head.appendChild(mapScript);
console.log('--> https://maps.googleapis.com/maps/api was set');
var JSScript = document.createElement('script');
JSScript.setAttribute('type','text/javascript')
JSScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js');
document.head.appendChild(JSScript);
console.log('--> https://ajax.googleapis.com/ajax/libs/jquery was set');
}
addAPI();
function HideMapIfNotLogIn(){
if(document.getElementById("rn_LoginButton")){
document.getElementById("dvMap").style.display = "none";
document.getElementById("R1").style.display = "none";
document.getElementById("legend").style.display = "none";
}else{
document.getElementById("R1").style.display = "block";
document.getElementById("dvMap").style.display = "block";
document.getElementById("legend").style.display = "inline";
}
}
HideMapIfNotLogIn();
function getLogInContactName(){
let ContactName = document.getElementById("contactName").innerHTML
console.log("ContactName Is = " + ContactName);
document.getElementById("contactName").style.display = "none";
return ContactName
}
function getLogInContactID(){
let ID = document.getElementById("contactId").innerHTML
console.log("ID Is = " + ID);
document.getElementById("contactId").style.display = "none";
return ID
}
// GeoCoding
function geocode(addressToGeocode){
return $.ajax({
url: 'https://maps.google.com/maps/api/geocode/json' +'?address=' +addressToGeocode+"&key="+GogoleMapKey,
success: function (result) {
console.log(result);
return result;
//return result.data.results[0].geometry.location.lat;
},
async: false
})
}
//Reverse GeoCoding
function ReverseGeocode(lat_lng){
return $.ajax({
url: 'https://maps.google.com/maps/api/geocode/json' +'?latlng=' +lat_lng+"&key="+GogoleMapKey,
success: function (result) {
console.log(result);
return result;
//return result.data.results[0].geometry.location.lat;
},
async: false
})
}
//Run RightNow ROSQL
function RunQuery(ROQL){
return $.ajax({
url: 'https://<RightNow_Instance>.rightnowdemo.com/services/rest/connect/v1.3/queryResults/?query='+ROQL,
headers: {
'authorization': userPass(),
'content-type': "application/json"
},
success: function (result) {
console.log(result);
return result;
},
async: false
})
}
// Get Contact Address ID
function GetLogInContactInfo(){
let All_Data_Array = [];
let CONTACT_ID = getLogInContactID();
let ROQL_CONTACT_ADDRESS_ID = 'select LG_AddressID from CPT.Contact_Address where ContactID = '+CONTACT_ID+' AND Address_Type = 1';
let LogInContactAddressID = RunQuery(ROQL_CONTACT_ADDRESS_ID).responseJSON.items[0].rows[0];
console.log("CONTACT LG ADDRESS ID = " + LogInContactAddressID);
let ROQL_CONTACT_ADDRESS_INFO = 'select Postal_Town, xCoordinate, yCoordinate from CPT.LG_Address where ID = '+LogInContactAddressID+' LIMIT 25';
let LogInContactAdressInfo = RunQuery(ROQL_CONTACT_ADDRESS_INFO);
let ContactCity = LogInContactAdressInfo.responseJSON.items[0].rows[0][0];
let ContactLat = LogInContactAdressInfo.responseJSON.items[0].rows[0][1];
let ContactLong = LogInContactAdressInfo.responseJSON.items[0].rows[0][2];
console.log("ContactCity == > " + ContactCity);
console.log("ContactLat == > " + ContactLat);
console.log("ContactLong == > " + ContactLong);
All_Data_Array.push(ContactLat + "|" + ContactLong + "|");
let ROQL_ALL_ADDRESSES_WITHIN_THE_TOWN = "select ID from CPT.LG_Address where Postal_Town = '"+ContactCity+"'";
let AllAddressesJSON = RunQuery(ROQL_ALL_ADDRESSES_WITHIN_THE_TOWN);
let AllAddressesIdsArray = AllAddressesJSON.responseJSON.items[0].rows;
let AllAddressesIdsString = '';
for(let i = 0; i<AllAddressesIdsArray.length;i++){
if(i != AllAddressesIdsArray.length-1){
AllAddressesIdsString+=AllAddressesIdsArray[i]+","
}else{
AllAddressesIdsString+=AllAddressesIdsArray[i]
}
}
console.log("AllAddressesIdsString ==> " + AllAddressesIdsString);
let ROQL_ALL_CONTACTS_IN_THE_TOWN = 'select ContactID from CPT.Contact_Address where LG_AddressID IN ('+AllAddressesIdsString+') AND Address_Type = 1 LIMIT 25';
let AllContactsJSON = RunQuery(ROQL_ALL_CONTACTS_IN_THE_TOWN);
let AllContactsIdsArray = AllContactsJSON.responseJSON.items[0].rows;
let AllContactsIdsString = '';
for(let i = 0; i<AllContactsIdsArray.length;i++){
if(AllContactsIdsArray[i] != CONTACT_ID){
if(i != AllContactsIdsArray.length-1){
AllContactsIdsString+=AllContactsIdsArray[i]+","
}else{
AllContactsIdsString+=AllContactsIdsArray[i]
}
}
}
console.log("AllContactsIdsString ==> " + AllContactsIdsString);
let LOG_IN_CONTACT_INCIDENTS = 'select LookupName, Subject, Incidents.Product.Name, Incidents.CustomFields.c.maps_lat, Incidents.CustomFields.c.maps_lng from Incidents where Incidents.PrimaryContact.Contact ='+CONTACT_ID+' AND Incidents.CustomFields.c.maps_lat IS NOT NULL AND Incidents.CustomFields.c.maps_lng IS NOT NULL AND LookupName IS NOT NULL AND Incidents.Product.Name IS NOT NULL AND Subject IS NOT NULL'
let AllLoginContactIncidentsJSON = RunQuery(LOG_IN_CONTACT_INCIDENTS);
let AllLoginContactIncidentsArray = AllLoginContactIncidentsJSON.responseJSON.items[0].rows;
console.log("AllLoginContactIncidentsArray.length " + AllLoginContactIncidentsArray.length);
for(let i = 0; i<AllLoginContactIncidentsArray.length;i++){
console.log("i = " + i);
if(i == 0){
if(AllLoginContactIncidentsArray.length == 1){
All_Data_Array.push("PrimaryContact|" + AllLoginContactIncidentsArray[i][0] + "|" + AllLoginContactIncidentsArray[i][1] + "|" + AllLoginContactIncidentsArray[i][2] + "|" + AllLoginContactIncidentsArray[i][3]+ "|" + AllLoginContactIncidentsArray[i][4]+ "|END");
}else{
All_Data_Array.push("PrimaryContact|" + AllLoginContactIncidentsArray[i][0] + "|" + AllLoginContactIncidentsArray[i][1] + "|" + AllLoginContactIncidentsArray[i][2] + "|" + AllLoginContactIncidentsArray[i][3]+ "|" + AllLoginContactIncidentsArray[i][4]+ "|END");
}
}else if (i != AllLoginContactIncidentsArray.length -1){
All_Data_Array.push("PrimaryContact|" +AllLoginContactIncidentsArray[i][0] + "|" + AllLoginContactIncidentsArray[i][1] + "|" + AllLoginContactIncidentsArray[i][2] + "|" + AllLoginContactIncidentsArray[i][3]+ "|" + AllLoginContactIncidentsArray[i][4]+ "|END");
}else{
All_Data_Array.push("PrimaryContact|" +AllLoginContactIncidentsArray[i][0] + "|" + AllLoginContactIncidentsArray[i][1] + "|" + AllLoginContactIncidentsArray[i][2] + "|" + AllLoginContactIncidentsArray[i][3]+ "|" + AllLoginContactIncidentsArray[i][4] + "|END");
}
}
let OTHER_CONTACT_INCIDENTS = 'select LookupName, Subject, Incidents.Product.Name, Incidents.CustomFields.c.maps_lat, Incidents.CustomFields.c.maps_lng from Incidents where Incidents.PrimaryContact.Contact IN ('+AllContactsIdsString+') AND Incidents.CustomFields.c.maps_lat IS NOT NULL AND Incidents.CustomFields.c.maps_lng IS NOT NULL AND LookupName IS NOT NULL AND Incidents.Product.Name IS NOT NULL AND Subject IS NOT NULL '
let AllOtherContactIncidentsJSON = RunQuery(OTHER_CONTACT_INCIDENTS);
let AllOtherContactIncidentsArray = AllOtherContactIncidentsJSON.responseJSON.items[0].rows;
for(let i = 0; i<AllOtherContactIncidentsArray.length;i++){
All_Data_Array.push("OtherContact|" +AllOtherContactIncidentsArray[i][0] + "|" + AllOtherContactIncidentsArray[i][1] + "|" + AllOtherContactIncidentsArray[i][2] + "|" + AllOtherContactIncidentsArray[i][3]+ "|" + AllOtherContactIncidentsArray[i][4] + "|END");
}
let text = ""
for(let i = 0; i<All_Data_Array.length;i++){
text+= All_Data_Array[i];
}
console.log(text)
RenderGoogleMap(All_Data_Array)
}
window.setTimeout(GetLogInContactInfo, 3000);
function RenderGoogleMap(m){
let markers = m ;
let markToPutOnMap = [];
console.log("--------------RAW--------------")
console.log(markers)
console.log("-----------------------------")
let centralLat;
let centralLon;
let incidentNumber = "";
let incidentSubject = "";
let incidentProduct = "";
let incidentLat = "";
let incidentLong = "";
for(let i = 0; i <markers.length;i++){
if(i==0){
// here is contact info
centralLat = markers[i].split("|")[0];
centralLon = markers[i].split("|")[1];
let ContactName = getLogInContactName();
let lat_log = centralLat + "," + centralLon;
let logInAddress = ReverseGeocode(lat_log).responseJSON.results[1].formatted_address;
let hoverTitle = ContactName + " - " + logInAddress;
var description1 = '<div align="left" style = "font-size: 16px;float: left">' +'<h2>'+"Your main property"+'</h2>'+'<b>'+ "Contact Name :"+'</b>'+ ContactName + '<br>' + '<b>'+"Address : " +'</b>'+ logInAddress+'</div>';
markToPutOnMap.push({'title':hoverTitle,'lat':centralLat,'lng':centralLon,'description':description1,'type':'ContactInfo'});
}else{
// here we have incidents
let markerData = markers[i];
console.log(markerData.split("|"));
if(markerData.includes("PrimaryContact")){
// log in contact incidents
incidentNumber = markerData.split("|")[1];
incidentSubject = markerData.split("|")[2];
incidentProduct = markerData.split("|")[3];
incidentLat = markerData.split("|")[4];
incidentLong = markerData.split("|")[5];
console.log("incidentNumber = " +incidentNumber);
console.log("incidentSubject = " +incidentSubject);
console.log("incidentProduct = " +incidentProduct);
console.log("incidentLat = " +incidentLat);
console.log("incidentLong = " +incidentLong);
var description1 = '<div align="left" style = "font-size: 16px;float: left">' +'<h2>'+"Incident"+'</h2>'+'<b>'+ "Incident Number :"+'</b>'+ incidentNumber + '<br>' + '<b>'+"Subject : " +'</b>'+ incidentSubject +'<br>'+ '<b>'+"Product : " +'</b>'+ incidentProduct +'</div>';
markToPutOnMap.push({'title':incidentSubject,'lat':incidentLat,'lng':incidentLong,'description':description1,'type':'ContactIncident'});
}else{
// other incidents
incidentNumber = markerData.split("|")[1];
incidentSubject = markerData.split("|")[2];
incidentProduct = markerData.split("|")[3];
incidentLat = markerData.split("|")[4];
incidentLong = markerData.split("|")[5];
console.log("incidentNumber = " +incidentNumber);
console.log("incidentSubject = " +incidentSubject);
console.log("incidentProduct = " +incidentProduct);
console.log("incidentLat = " +incidentLat);
console.log("incidentLong = " +incidentLong);
var description1 = '<div align="left" style = "font-size: 16px;float: left">' +'<h2>'+"Nearby Incident"+'</h2>'+'<b>'+ "Incident Number :"+'</b>'+ incidentNumber + '<br>' + '<b>'+"Subject : " +'</b>'+ incidentSubject +'<br>'+ '<b>'+"Product : " +'</b>'+ incidentProduct +'</div>';
markToPutOnMap.push({'title':incidentSubject,'lat':incidentLat,'lng':incidentLong,'description':description1,'type':'OtherIncident'});
}
}
}
console.log("------------------------------MARKERS------------------------------------");
console.log(markToPutOnMap)
console.log("------------------------------------------------------------------");
var mapOptions = {
center: new google.maps.LatLng(centralLat, centralLon),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var lat_lng = new Array();
console.log("markers.length = " +markToPutOnMap.length);
for (n = 0; n < markToPutOnMap.length; n++) {
var data = markToPutOnMap[n];
var ic = "" ;
switch(data.type){
case "ContactInfo" :
ic = "https://i.ibb.co/4ZYFWZZ/iconfinder-6-2958192.png" ;
break;
case "ContactIncident":
if(data.title.includes("Road")){
ic = "https://i.ibb.co/JmxvdbH/red-100.png"
}else{
ic = "https://i.ibb.co/yBWh5Sb/icon-blue-100.png"
}
break;
case "OtherIncident":
if(data.title.includes("Road")){
ic = "https://i.ibb.co/N9YmMkm/32.png";
}else{
ic = "https://i.ibb.co/sF4gHTf/32-1.png"
}
break;
default:
ic = "https://i.ibb.co/PztbfLf/icon-blue-65.png" ;
break;
}
var lblSRs = "Placeholder text"
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
draggable: false,
animation: google.maps.Animation.DROP,
icon: ic
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(document.getElementById('legend'));
}
</script>