google maps with longitude and latitude

[Former Member]

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);

    };

[henrique_pinto · Accepted solution]

That map is centered exactly in point with lag/long 0, 13.365441.

Apparently the latitude variable is not being properly passed/interpreted.

Check to see if you don't have a syntax error in reading the latitude variable.

If not, might be a bug on the SDK/API.

Best,

Henrique.

[Former Member · Accepted solution]

You are right. There was a typo in the setter function.

Do you have an idea why the circle is not created?

Thanks

Robert

[henrique_pinto · Accepted solution]

I haven't played with google maps API, but checking your code, why are you reinitializing the map on the update function?

You create the map on the init function, the update function shouldn't define a new map object.

Apparently, you're overwriting the existing map object with a new one everytime.

Alternatively, you could avoid the setMap function and just add the param

map: this.map,

in the cirtyCircle var definition.

That's what's done in google's sample code.

Circles - Google Maps JavaScript API v3 - Google Developers

[Former Member · Accepted solution]

Thanks for your efforts Henrique.

here is the afterUpdate function, if anybody planned to do something similar.

this.afterUpdate = function() {

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

        this.map.setCenter(city);

        var cityCircle = new google.maps.Circle({
          center: city,
          radius: 2000,
          strokeColor: "#0000FF",
          strokeOpacity: 0.4,
          strokeWeight: 0,
          fillColor: "#0000FF",
          fillOpacity: 0.4,
          map: this.map
        });

    };

[henrique_pinto · Accepted solution]

Cool! 😉