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

Forge Component
(35)
Published on 3 Jul (3 weeks ago) by Labs
35 votes
Published on 3 Jul (3 weeks ago) by 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 :)


Hola, ¿no tienes un ejemplo de triangulación para dispositivos móviles con google map?

Karlo Calazan wrote: hello, do not you have an example of triangulation for mobile devices with google map?

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



José Muñoz wrote:

Karlo Calazan wrote: hello, do not you have an example of triangulation for mobile devices with google map?

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




Hello, sorry I don't have any examples in mobile development in this.

Loy escribió:I understand, you have a web example that you can share with me to see how to replicate it in mobile. Thank you very much.

José Muñoz escribió:

Karlo Calazan escribió: hola, ¿no tienes un ejemplo de triangulación para dispositivos móviles con google map?

Solucioné mi problema simplemente exponiendo el objeto de mapa, ya que es mi problema sobre qué poner en setMap del polígono. Haciendo referencia en este hilo


Y para los que se preguntan, esto es lo que hago.


var map = osGoogleMap.getMap ('"+ myMap.Id +"'). gMap; // Obteniendo el objeto de mapa 

// Coordenadas en el mapa para crear el polígono 
var coords = [{lat: "+ P1y +", lng: "+ P1x +"}, {lat: "+ P2y +", lng: "+ P2x +" }, {lat: "+ P3y +", lng: "+ P3x +"}, {lat: "+ P4y +", lng: "+ P4x +"}]; 

// Crear el Polígono 
var Area = new google.maps.Polygon ({ 
          paths: coords, 
          strokeColor: '# FF0000', 
          strokeOpacity: 0.8, 
          strokeWeight: 2, 
          fillColor: '# FF0000', 
          fillOpacity: 0.35 
        )); 

// Ponlo en el mapa 
Area.setMap (mapa);


Espero que esto ayude




Hola, lo siento, no tengo ningún ejemplo de desarrollo móvil en esto.