Skip to Content
Former Member
Jun 13, 2014 at 08:15 AM

google maps with longitude and latitude


Hello experts,

I try to create an extension with google maps. I took the sample sdk as template and modified the javascript and contribution xml to my needs, but it will not work as desired. I hope you can give me some advices.

I want to enter longitude and latitude values in design studio and create a circle overlay.

Below there is my code without getter and setter and this is a screenshot from design studio.

The map shows a place in congo but the coordinates are from berlin and i have no idea why it is wrong displayed. The properties in contribution.xml are from type string.

Likewise the circle is not created. I´m not sure how to call the initial generated map in afterUpdate function. In sample sdk they used instead of - Can somebody tell me where are the differences and have some suggestions to improve the code?

Thanks a lot


sap.designstudio.sdk.Component.subclass("xxx.DataMap", function() {

var DEFAULT_LATITUDE = "52.533229";

var DEFAULT_LONGITUDE = "13.365441";

var saveLATITUDE = null;

var saveLONGITUDE = null;

var that = this;

this.init = function() {

var mapOptions = {

center: new google.maps.LatLng(DEFAULT_LATITUDE, DEFAULT_LONGITUDE),

zoom: 7,

mapTypeId: google.maps.MapTypeId.ROADMAP

}; = new google.maps.Map(this.$()[0], mapOptions);


this.afterUpdate = function() {

var city = new google.maps.LatLng(saveLATITUDE, saveLONGITUDE);

var mapProp = {

center: city,

zoom: 7,

mapTypeId: google.maps.MapTypeId.ROADMAP


var cityCircle = new google.maps.Circle({

center: city,

radius: 2000,

strokeColor: "#0000FF",

strokeOpacity: 0.4,

strokeWeight: 0,

fillColor: "#0000FF",

fillOpacity: 0.4


cityCircle.setMap(; = new google.maps.Map(this.$()[0],mapProp);



Unbenannt.PNG (65.3 kB)