[Google Maps] Is there a way to create polygons using this?

[Google Maps] Is there a way to create polygons using this?

  
Forge Component
(17)
Published on 24 Apr by OutSystems Labs
17 votes
Published on 24 Apr by OutSystems Labs

The title says it all.

Hi Karlo,

We haven't wrapped that functionality in the component, but you should be able to access the Maps API JS objects directly and create the polygons "manually" (meaning you'd write your own JS code instead of OS blocks and actions).

Let me know if you run into any issues.

Cheers

I fixed my problem just by exposing the map object as it is my problem on what to put in setMap of the polygon. Referencing in this thread


and for those who wonders as well here's what I do


var map = osGoogleMap.getMap('"+myMap.Id+"').gMap; //Getting the Map Object

//Coordinates on the map to create the Polygon
var coords = [{lat:"+P1y+",lng:"+P1x+"},{lat:"+P2y+",lng:"+P2x+"},{lat:"+P3y+",lng:"+P3x+"},{lat:"+P4y+", lng:"+P4x+"}];

//Create the Polygon
var Area = new google.maps.Polygon({
          paths: coords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });

//Put it in the map
Area.setMap(map);


Hope this helps

That's awesome Karlo. Thanks for sharing your solution with the community :)

I have a new issue regarding this, I'm trying to add a polygon on the map initialization. I have no problem when it comes to button click, as the page is already fully loaded and you can detect the map object by using the code osGoogleMap.getMap().gMap;. But when it comes to map initialization the map can't be detected with the code as the page isn't fully loaded yet, I've tried putting a javascript with a button click on the end of the page to RunJavaScript and use the code, it will work when the debugger is running but it doesn't when the debugger is not running.

Anyone have an idea to get the map object upon page initialization/preparation?

Hi Karlo,

For you to know that the map is fully loaded/initialized use this aproach:

google.maps.event.addListener(map, 'idle', function() {
    // write your handler here
});
  • This needs to be added inside Google Maps block API


Another way is to write a piece of javascript code like this:

function isIntialized(){
var map; //get your map object here

if (typeof map ==='undefined'){

setTimeout(isIntialized,1000);

}else{

// when object is found the map is intialized
// write handler here
}
}

Call this function on document ready, this way you dont need to mess arround with the Google Maps API.

Please let me know if this helps you in any way

Thanks,

Hugo

Hugo wrote:

Hi Karlo,

For you to know that the map is fully loaded/initialized use this aproach:

google.maps.event.addListener(map, 'idle', function() {
    // write your handler here
});
  • This needs to be added inside Google Maps block API


Another way is to write a piece of javascript code like this:

function isIntialized(){
var map; //get your map object here

if (typeof map ==='undefined'){

setTimeout(isIntialized,1000);

}else{

// when object is found the map is intialized
// write handler here
}
}

Call this function on document ready, this way you dont need to mess arround with the Google Maps API.

Please let me know if this helps you in any way

Thanks,

Hugo

This worked! thank you so much :)