Here Map API, map rendering fails - here-api

Question

Ive successfully created a map, marker and infobubble that uses values from reverse geocoding method. With 1 location, the map works fine and displays the marker and info bubble accordingly. However when i pass two location values from the backend (i am using jsp) the map does not render.
Functions I use are: addMarkerToGroup, addInfoBubble, onSuccess,
function addMarkerToGroup(group, position, inf){
var marker = new H.map.Marker(position);
//add custom data to marker
marker.setData(inf);
group.addObject(marker);
}
function addInfoBubble(position,inf){
var group = set_map.group;
var map = set_map.map;
var ui = set_map.ui;
map.addObject(group);
//add 'tap' event listener, that opens info bubble, to the group
group.addEventListener('tap', function(evt){
//event target is the marker itself, group is a parent event target
var bubble = new H.ui.InfoBubble(evt.target.getPosition(),{
// read custom data
content: evt.target.getData()
});
//show info bubble
ui.addBubble(bubble);
}, false);
addMarkerToGroup(group,position,inf);
}
function callback(){
var platform = new H.service.Platform({
app_id: '#',
app_code: '#',
useCIT: true,
useHTTPS: true
});
var defaultLayers = platform.createDefaultLayers();
var obj = your_location.map_obj;
var map = new H.Map(
obj,
defaultLayers.normal.map,
{
zoom:your_location.map_zoom,
center: {lat:your_location.latitude,lng:your_location.longitude}
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
var ui = H.ui.UI.createDefault(map, defaultLayers);
var group = new H.map.Group();
}
function onSuccess(result){
var index = your.count;
var myclt = your.get_yours(index);
var myttl = your.get_title(index);
var myinf = your.get_info(index);
var location = result.Response.View[0].Result[0];
var countryName, countryCode, province, city, zipcode;
countryName = location.Location.Address.Country;
countryCode = location.Location.Address.Country;
province = location.Location.Address.State;
zipcode = location.Location.Address.PostalCode;
city = location.Location.Address.City;
var address = "";
if (city && city != "") {
address = city;
}
if (province && province != "") {
if (address && address != "") {
address += ", " + province;
} else {
address = province;
}
}
if (zipcode && zipcode != "") {
if (address && address != "") {
address += ", " + zipcode;
} else {
address = zipcode;
}
}
if (countryName && countryName != "") {
if (address && address != "") {
address += ", " + countryName;
} else {
address = countryName;
}
}
$.ajax({
url: "view_remote_device_control.do",
data: {
mode: "update",
client_id: myclt,
city: city,
province: province,
zipcode: zipcode,
country: countryCode
},
type: "GET",
cache: false,
async: true
});
myttl += address;
var position = new H.geo.Point(location.Location.DisplayPosition.Latitude,location.Location.DisplayPosition.Longitude);
var inf = {content: location.Location.Address.Label};
var myinfo = inf.content;
addInfoBubble(here_maps_callback.map,position,inf.content,here_maps_callback.ui);
return myinf;
};
While debugging I get the error:
Uncaught InvalidArgumentError: H.map.ViewModel#setCameraData (Argument #0 position)

Answer 1

Okay, so i realized that it the reason why it was not rendering was due to:
center: {lat:your_location.latitude,lng:your_location.longitude}
Basically due to passing two location values, the location array had two values for both latitude and longitude and it did not know which to use to set the center. By changing both the values of lat and lng to 0 and using:
map.setCenter(evt.target.getPosition());
inside the group event listener it rendered the map accordingly.
Hope this is helpful

Answer 2

A bit confused how is the callback is happening, where are the two location finally retrieved on the JavaScript side ? Do you face the issue if you directly pass the locations in javascript , i mean hard coded as a test ?