Google Map API on SUP 2.2

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

I wanted to share another code example with SUP 2.2 Workflow with Geolocation capability. I worked on a simple Hybrid application that mapped outage locations and placed markers on each Lat, Long for different statuses. This example does assume that you have knowledge of attaining the necessary data from an MBO and have your basic foundations on workflow. I will leave all the details and jump straight to handling the results from an MBO. Hopefully this crude example will help someone along the way and cut a lot of the learning curves when it comes to mapping.

Before you begin, you need to go to https://developers.google.com/maps/documentation/javascript/v2/introduction, and attain your Google Developer key.

Assuming that you have an MBO that queries for records with latitudes and longitudes, in this case my data source was a web service that provided me with Status, Latitude and Longitude columns:

In hwc.customAfterDataReceived function, this is my logic to handle the incoming data and begin to plot on the map:

hwc.customAfterDataReceived = function(incomingDataMessage) {

var latLongArray = new Array();

//process list of locations

var mvc = incomingDataMessage.getValues();

var outageLocationListMessageValue = mvc.getData("mboLatLong");

var locationArray = outageLocationListMessageValue.getValue();

for (var i = 0; i < locationArray.length; i++) {

//add location record to local array

latLongArray.push([locationArray[i].getData("mboOutageWS_status_attribKey").getValue(),

locationArray[i].getData("mboOutageWS_latitude_attribKey").getValue(),

locationArray[i].getData("mboOutageWS_longitude_attribKey").getValue()]);

}

//localized to your region and setup map config

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 10,

center: new google.maps.LatLng(50.4447259142307,-104.60932810886),

mapTypeId: google.maps.MapTypeId.ROADMAP

});

var marker;

//plot on map

for(var i=0; i<latLongArray.length; i++) {

var status = latLongArray[i][0];

var lat = latLongArray[i][1];

var long = latLongArray[i][2];

//plot only with status, lat and long values

if( status != "" && lat != "" && long != "" ) {

if(status === "status1") var image = "images/status1.png";

if(status === "status2") var image = "images/status2.png";

if(status === "status3") var image = "images/status3.png";

marker = new google.maps.Marker({

position: new google.maps.LatLng(latLongArray[i][1], latLongArray[i][2]),

map: map,

icon: image

});

google.maps.event.addListener(marker, 'click', (function(marker, i) {

return function() {

infowindow.setContent(latLongArray[i][0]);

infowindow.open(map, marker);

}

})(marker, i));

}//if

}//for

};

The destination screen that will display the map and its markers will have to contain HTMLView component. the HTMLView component should have in either the embedded HTML or in the Default Value field the following HTML snippets:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<meta name = "format-detection" content = "telephone=no" />

<script src="http://maps.google.com/maps/api/js?key=<YOUR GOOGLE API DEVELOPER KEY>&sensor=true&region=CA&zoom=13&size=600x300"

type="text/javascript"></script>

</head>

<body>

<div id="map" style="width: 800px; height: 800px;"></div>

</body>

</html>

Note on the <div id="map" style="width: 800px; height: 800px;"></div>, the "id" has the value of "map". This is important as you should note in the DataReceived function the line, var map = new google.maps.Map(document.getElementById('map'), { is what tells the API where to draw the map.

This was test on an iPad3. One issue with iPad is the rendering of the map image. I run this originally on a landscape mode. When the map is being rendered on the screen, it doesn't display the map completely. But when I move the iPad to Portrait, it then forces the screen to refresh and the map is drawn completely. Something that I need to determine how to fix but if anyone has an idea, I'd greatly appreciate the input.

Hope this helps in some way.