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 that.map instead of this.map - Can somebody tell me where are the differences and have some suggestions to improve the code?

Thanks a lot

Robert

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

        };

        this.map = 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(this.map);

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

    };