Aprende a resaltar una ciudad, estado o país con polígonos o capas KML en Google Maps de la manera correcta.


Aunque esto no siempre es necesario en aplicaciones que usan Google Maps para mostrar direcciones o algo relacionado, algunos clientes quieren resaltar alguna área, ciudad o país. En este artículo, explicaremos 2 formas de resaltar alguna ciudad, estado o país con JavaScript.

Breve descripción de lo que vas a hacer

Para lograr esto, básicamente necesitará buscar las coordenadas del estado o país en GADM. Una vez que los tengas, dibuja una forma en Google Maps con el objeto Polígono proporcionando una matriz con todas las coordenadas que juegan básicamente como bordes del lugar que quieres resaltar.

Importante: recupere las coordenadas geográficas de la ciudad, estado o país

El punto más importante de este tutorial es conocer las coordenadas geográficas de los límites-límites del área que desea resaltar. Con Google Maps, no podrá obtener dicha información de esta herramienta; en cambio, le recomendamos una forma más fácil de obtenerla a través de la utilidad GADM . En el sitio web de GADM, podrá descargar datos KZM sobre países enteros, por lo que podrá resaltar Países, Estados o Ciudades según sus necesidades.

Desde la web de descarga deberás descargar los datos de KZM y según tus necesidades tendrás 3 niveles disponibles (y en casi todos los casos corresponde la descripción de color):

Nota

Vamos a seguir este tutorial con Colombia como País y vamos a dibujar la ciudad de Bucaramanga.

  • nivel-0: corresponde a las coordenadas de todo el país (fuera del área roja)
  • nivel1: corresponde a las coordenadas de los estados internos (dentro de las áreas rojas)
  • nivel2: corresponde a las coordenadas de ciudades, comunidades (dentro de las áreas azules)

Geographic Coordinates of Countries, States or Cities for Google Maps KMZ GADM

Los datos de GADM están disponibles gratuitamente para uso académico y otros usos no comerciales. No se permite la redistribución o uso comercial sin permiso previo. Se permite utilizar los datos para crear mapas para publicaciones académicas.

Luego de descargar el nivel que necesitas (en nuestro caso tenemos el nivel2 del cual podemos recuperar las coordenadas de las ciudades), necesitarás extraer el contenido del archivo KMZ (en nuestro caso el archivo es gadm36_COL_2.kmz) con una herramienta como WinRar o 7zip, dentro encontrarás un archivo KML (en nuestro caso gadm36_COL_2.kml):

KML File inside KMZ File Geographic Coordinates

Luego, abra el archivo kml con un editor de texto y encontrará básicamente una estructura XML de datos:

KML Data

Ahora lo que tiene que hacer es buscar su estado o ciudad que desea resaltar en Google Maps. En nuestro caso estamos buscando las coordenadas de la hermosa ciudad de Bucaramanga en Colombia. Después de buscar en el contenido del archivo, encontrará las coordenadas del estado / ciudad en el formato de longitud y latitud (primero lng y luego lat). Por ejemplo, las coordenadas de la ciudad de Bucaramanga según la base de datos GADM son (lng y lat):

-73.077796936035,7.18019914627087 
-73.0765991210938,7.17500114440924 
-73.0805969238281,7.16109991073608 
-73.081199645996,7.14789915084839 
-73.0748977661132,7.13860082626343 
-73.0655975341797,7.13280010223394 
-73.0626983642578,7.12929916381836 
-73.0673980712889,7.1263999938966 
-73.0759963989258,7.10970115661621 
-73.084098815918,7.10449981689459 
-73.0943984985352,7.09769916534424 
-73.1088027954102,7.08269977569586 
-73.1156997680664,7.07289981842052 
-73.1231994628906,7.07060003280645 
-73.1300964355469,7.05680179595953 
-73.1393966674804,7.05340003967291 
-73.1473999023437,7.05050086975098 
-73.152099609375,7.05919981002808 
-73.1601028442383,7.06330013275158 
-73.1688003540039,7.06389999389648 
-73.1802978515624,7.06629991531383 
-73.1843032836913,7.07320117950451 
-73.1860961914062,7.08760023117071 
-73.1884002685546,7.1096010208131 
-73.1815032958984,7.12750101089489 
-73.1780014038085,7.15230083465588 
-73.1781005859374,7.17660093307501 
-73.1763000488281,7.18930006027233 
-73.1770782470703,7.19456291198725 
-73.1682968139647,7.19389915466314 
-73.1636962890624,7.1995987892152 
-73.1591033935547,7.20250082016003 
-73.1452026367187,7.211100101471 
-73.1360015869141,7.21739912033081 
-73.1261978149414,7.22079992294312 
-73.1199035644531,7.22370100021362 
-73.1118011474609,7.2241997718811 
-73.1078033447265,7.22540187835699 
-73.1054992675781,7.22540187835699 
-73.1054992675781,7.22129917144787 
-73.1048965454102,7.21269989013683 
-73.1048965454102,7.20340108871466 
-73.1031036376953,7.19760084152222 
-73.0973968505859,7.1911988258363 
-73.0915985107421,7.18540000915522 
-73.0864028930664,7.18370008468634 
-73.077796936035,7.18019914627087

Estas son las coordenadas que necesitas para resaltar las que quieres, sin embargo hay 2 formas de hacerlo, usando un KmlLayer o un Polígono en Google Maps. Explicaremos cómo hacerlo de ambas formas:

A. Dibujar un polígono

Si elige la forma Polígono, deberá crear una matriz de coordenadas para dibujar en su mapa. Deberá obtener las coordenadas del punto importante de este artículo y luego construir su propia matriz de coordenadas, por ejemplo:

// Inicializar algún mapa con centro en Bucaramanga
var map = new google.maps.Map(document.getElementById('marker-map'), {
    center: {
        lat: 7.119082288502541,
        lng: -73.120029012106
    },
    zoom: 13,
    mapTypeId: 'roadmap'
});

// Una matriz con las coordenadas de los límites de Bucaramanga, extraídas manualmente de la base de datos GADM
var BucaramangaDelimiters = [
    { lng: -73.077796936035,  lat: 7.18019914627087 },
    { lng: -73.0765991210938, lat: 7.17500114440924 },
    { lng: -73.0805969238281, lat: 7.16109991073608 },
    { lng: -73.081199645996,  lat: 7.14789915084839 },
    { lng: -73.0748977661132, lat: 7.13860082626343 },
    { lng: -73.0655975341797, lat: 7.13280010223394 },
    { lng: -73.0626983642578, lat: 7.12929916381836 },
    { lng: -73.0673980712889, lat: 7.1263999938966  },
    { lng: -73.0759963989258, lat: 7.10970115661621 },
    { lng: -73.084098815918,  lat: 7.10449981689459 },
    { lng: -73.0943984985352, lat: 7.09769916534424 },
    { lng: -73.1088027954102, lat: 7.08269977569586 },
    { lng: -73.1156997680664, lat: 7.07289981842052 },
    { lng: -73.1231994628906, lat: 7.07060003280645 },
    { lng: -73.1300964355469, lat: 7.05680179595953 },
    { lng: -73.1393966674804, lat: 7.05340003967291 },
    { lng: -73.1473999023437, lat: 7.05050086975098 },
    { lng: -73.152099609375,  lat: 7.05919981002808 },
    { lng: -73.1601028442383, lat: 7.06330013275158 },
    { lng: -73.1688003540039, lat: 7.06389999389648 },
    { lng: -73.1802978515624, lat: 7.06629991531383 },
    { lng: -73.1843032836913, lat: 7.07320117950451 },
    { lng: -73.1860961914062, lat: 7.08760023117071 },
    { lng: -73.1884002685546, lat: 7.1096010208131  },
    { lng: -73.1815032958984, lat: 7.12750101089489 },
    { lng: -73.1780014038085, lat: 7.15230083465588 },
    { lng: -73.1781005859374, lat: 7.17660093307501 },
    { lng: -73.1763000488281, lat: 7.18930006027233 },
    { lng: -73.1770782470703, lat: 7.19456291198725 },
    { lng: -73.1682968139647, lat: 7.19389915466314 },
    { lng: -73.1636962890624, lat: 7.1995987892152  },
    { lng: -73.1591033935547, lat: 7.20250082016003 },
    { lng: -73.1452026367187, lat: 7.211100101471   },
    { lng: -73.1360015869141, lat: 7.21739912033081 },
    { lng: -73.1261978149414, lat: 7.22079992294312 },
    { lng: -73.1199035644531, lat: 7.22370100021362 },
    { lng: -73.1118011474609, lat: 7.2241997718811  },
    { lng: -73.1078033447265, lat: 7.22540187835699 },
    { lng: -73.1054992675781, lat: 7.22540187835699 },
    { lng: -73.1054992675781, lat: 7.22129917144787 },
    { lng: -73.1048965454102, lat: 7.21269989013683 },
    { lng: -73.1048965454102, lat: 7.20340108871466 },
    { lng: -73.1031036376953, lat: 7.19760084152222 },
    { lng: -73.0973968505859, lat: 7.1911988258363  },
    { lng: -73.0915985107421, lat: 7.18540000915522 },
    { lng: -73.0864028930664, lat: 7.18370008468634 },
    { lng: -73.077796936035,  lat: 7.18019914627087 }
];

// Construye el polígono.
var BucaramangaPolygon = new google.maps.Polygon({
    paths: BucaramangaDelimiters,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});

// Dibuja el polígono en la instancia de mapa deseada
BucaramangaPolygon.setMap(map);

Este mapa mostraría el siguiente mapa:

Bucaramanga Google Maps Polygon Highlight JavaScript

El truco para vago

Si no deseas construir manualmente la matriz de coordenadas, puede usar JavaScript para construirla automáticamente a partir del contenido del nodo Coordenadas de MultiGeometría de los datos de GADM usando la siguiente función:

/**
 * Crea una matriz de coordenadas a partir del contenido del nodo MultiGeometryCoordinates de la base de datos GADM.
 */
function buildCoordinatesArrayFromString(MultiGeometryCoordinates){
    var finalData = [];
    var grouped = MultiGeometryCoordinates.split("\n");

    grouped.forEach(function(item, i){
        let a = item.trim().split(',');

        finalData.push({
            lng: parseFloat(a[0]),
            lat: parseFloat(a[1])
        });
    });

    return finalData;
}

Luego, simplemente copia las coordenadas del archivo GADM como una cadena literal de la siguiente manera (observe los saltos de línea en la cadena literal):

let kmlAreaData = `-73.077796936035,7.18019914627087 
-73.0765991210938,7.17500114440924 
-73.0805969238281,7.16109991073608 
-73.081199645996,7.14789915084839 
-73.0748977661132,7.13860082626343 
-73.0655975341797,7.13280010223394 
-73.0626983642578,7.12929916381836 
-73.0673980712889,7.1263999938966 
-73.0759963989258,7.10970115661621 
-73.084098815918,7.10449981689459 
-73.0943984985352,7.09769916534424 
-73.1088027954102,7.08269977569586 
-73.1156997680664,7.07289981842052 
-73.1231994628906,7.07060003280645 
-73.1300964355469,7.05680179595953 
-73.1393966674804,7.05340003967291 
-73.1473999023437,7.05050086975098 
-73.152099609375,7.05919981002808 
-73.1601028442383,7.06330013275158 
-73.1688003540039,7.06389999389648 
-73.1802978515624,7.06629991531383 
-73.1843032836913,7.07320117950451 
-73.1860961914062,7.08760023117071 
-73.1884002685546,7.1096010208131 
-73.1815032958984,7.12750101089489 
-73.1780014038085,7.15230083465588 
-73.1781005859374,7.17660093307501 
-73.1763000488281,7.18930006027233 
-73.1770782470703,7.19456291198725 
-73.1682968139647,7.19389915466314 
-73.1636962890624,7.1995987892152 
-73.1591033935547,7.20250082016003 
-73.1452026367187,7.211100101471 
-73.1360015869141,7.21739912033081 
-73.1261978149414,7.22079992294312 
-73.1199035644531,7.22370100021362 
-73.1118011474609,7.2241997718811 
-73.1078033447265,7.22540187835699 
-73.1054992675781,7.22540187835699 
-73.1054992675781,7.22129917144787 
-73.1048965454102,7.21269989013683 
-73.1048965454102,7.20340108871466 
-73.1031036376953,7.19760084152222 
-73.0973968505859,7.1911988258363 
-73.0915985107421,7.18540000915522 
-73.0864028930664,7.18370008468634 
-73.077796936035,7.18019914627087`;

var coordinates = buildCoordinatesArrayFromString(kmlAreaData);

/**
 *  Crea una matriz con la siguiente estructura:
    [
        { lng: -73.077796936035,  lat: 7.18019914627087 },
        { lng: -73.0805969238281, lat: 7.16109991073608 },
        ....
    ]
*/
console.log(finalData);

Luego puede usar la variable finalData para dibujar las coordenadas, por ejemplo:

// Inicializar algún mapa con centro en Bucaramanga
var map = new google.maps.Map(document.getElementById('marker-map'), {
    center: {
        lat: 7.119082288502541,
        lng: -73.120029012106
    },
    zoom: 13,
    mapTypeId: 'roadmap'
});

let kmlAreaData = `-73.077796936035,7.18019914627087 
-73.0765991210938,7.17500114440924 
-73.0805969238281,7.16109991073608 
-73.081199645996,7.14789915084839 
-73.0748977661132,7.13860082626343 
-73.0655975341797,7.13280010223394 
-73.0626983642578,7.12929916381836 
-73.0673980712889,7.1263999938966 
-73.0759963989258,7.10970115661621 
-73.084098815918,7.10449981689459 
-73.0943984985352,7.09769916534424 
-73.1088027954102,7.08269977569586 
-73.1156997680664,7.07289981842052 
-73.1231994628906,7.07060003280645 
-73.1300964355469,7.05680179595953 
-73.1393966674804,7.05340003967291 
-73.1473999023437,7.05050086975098 
-73.152099609375,7.05919981002808 
-73.1601028442383,7.06330013275158 
-73.1688003540039,7.06389999389648 
-73.1802978515624,7.06629991531383 
-73.1843032836913,7.07320117950451 
-73.1860961914062,7.08760023117071 
-73.1884002685546,7.1096010208131 
-73.1815032958984,7.12750101089489 
-73.1780014038085,7.15230083465588 
-73.1781005859374,7.17660093307501 
-73.1763000488281,7.18930006027233 
-73.1770782470703,7.19456291198725 
-73.1682968139647,7.19389915466314 
-73.1636962890624,7.1995987892152 
-73.1591033935547,7.20250082016003 
-73.1452026367187,7.211100101471 
-73.1360015869141,7.21739912033081 
-73.1261978149414,7.22079992294312 
-73.1199035644531,7.22370100021362 
-73.1118011474609,7.2241997718811 
-73.1078033447265,7.22540187835699 
-73.1054992675781,7.22540187835699 
-73.1054992675781,7.22129917144787 
-73.1048965454102,7.21269989013683 
-73.1048965454102,7.20340108871466 
-73.1031036376953,7.19760084152222 
-73.0973968505859,7.1911988258363 
-73.0915985107421,7.18540000915522 
-73.0864028930664,7.18370008468634 
-73.077796936035,7.18019914627087`;

var BucaramangaDelimiters = buildCoordinatesArrayFromString(kmlAreaData);

// Construye el polígono.
var BucaramangaPolygon = new google.maps.Polygon({
    paths: BucaramangaDelimiters,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});

// Dibuja el polígono en la instancia de mapa deseada
BucaramangaPolygon.setMap(map);

Sin embargo, tenga en cuenta que este es un enfoque lento y se ve mejor si crea la matriz manualmente. También puede usar JSON.stringify (finalData) y luego copiar la matriz creada y pegarla en su código, por lo que la función puede ser una ayuda útil.

B. Dibujar una capa KML

Si en lugar de dibujar a través de coordenadas usando JavaScript en el mapa, puede usar el formato KML así como dibujar sus datos con la API KmlLayer de Google Maps. La forma en que funciona esta API es la siguiente, puede dibujar directamente una capa sobre el mapa usando la siguiente sintaxis:

var ctaLayer = new google.maps.KmlLayer({
    url: 'http://some-public-domain.com/my-kmlfile.kml',
    map: map
});

Por ejemplo, en nuestro caso la estructura KML para nuestra ciudad Bucaramanga se puede dibujar en el mapa con el siguiente bucaramanga.kmlarchivo:

Nota IMPORTANTE

El método KmlLayer es un servicio público de Google que trabaja en su servidor, esto significa que el archivo debe estar expuesto en la web y debe ser accedido sin ningún tipo de autenticación (sus servidores deben poder realizar una solicitud a archivo y obtenga su contenido sin ningún problema), de lo contrario no se dibujará la capa Kml.

El archivo también debe ser compatible con KML, esto significa que la raíz del documento debe tener un esquema, una carpeta y finalmente el contenedor MultiGeometry con las coordenadas. Puede ver un ejemplo a continuación, tenga en cuenta que puede extraer dicha información de los archivos GADM de cualquiera de sus niveles y luego crear su propio archivo con los datos que necesita .

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
    <Document id="root_doc">
            <Schema name="gadm36_COL_2" id="gadm36_COL_2">
                <SimpleField name="NAME_0" type="string"></SimpleField>
                <SimpleField name="NAME_1" type="string"></SimpleField>
                <SimpleField name="NAME_2" type="string"></SimpleField>
            </Schema>
            <Folder>
                    <name>gadm36_COL_2</name>
                    <Placemark>
                    <Style><LineStyle><color>ff0000ff</color></LineStyle><PolyStyle><fill>0</fill></PolyStyle></Style>
                    <ExtendedData><SchemaData schemaUrl="#gadm36_COL_2">
                                    <SimpleData name="NAME_0">Colombia</SimpleData>
                                    <SimpleData name="NAME_1">Santander</SimpleData>
                                    <SimpleData name="NAME_2">Bucaramanga</SimpleData>
                    </SchemaData></ExtendedData>
                        <MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>-73.077796936035,7.18019914627087 -73.0765991210938,7.17500114440924 -73.0805969238281,7.16109991073608 -73.081199645996,7.14789915084839 -73.0748977661132,7.13860082626343 -73.0655975341797,7.13280010223394 -73.0626983642578,7.12929916381836 -73.0673980712889,7.1263999938966 -73.0759963989258,7.10970115661621 -73.084098815918,7.10449981689459 -73.0943984985352,7.09769916534424 -73.1088027954102,7.08269977569586 -73.1156997680664,7.07289981842052 -73.1231994628906,7.07060003280645 -73.1300964355469,7.05680179595953 -73.1393966674804,7.05340003967291 -73.1473999023437,7.05050086975098 -73.152099609375,7.05919981002808 -73.1601028442383,7.06330013275158 -73.1688003540039,7.06389999389648 -73.1802978515624,7.06629991531383 -73.1843032836913,7.07320117950451 -73.1860961914062,7.08760023117071 -73.1884002685546,7.1096010208131 -73.1815032958984,7.12750101089489 -73.1780014038085,7.15230083465588 -73.1781005859374,7.17660093307501 -73.1763000488281,7.18930006027233 -73.1770782470703,7.19456291198725 -73.1682968139647,7.19389915466314 -73.1636962890624,7.1995987892152 -73.1591033935547,7.20250082016003 -73.1452026367187,7.211100101471 -73.1360015869141,7.21739912033081 -73.1261978149414,7.22079992294312 -73.1199035644531,7.22370100021362 -73.1118011474609,7.2241997718811 -73.1078033447265,7.22540187835699 -73.1054992675781,7.22540187835699 -73.1054992675781,7.22129917144787 -73.1048965454102,7.21269989013683 -73.1048965454102,7.20340108871466 -73.1031036376953,7.19760084152222 -73.0973968505859,7.1911988258363 -73.0915985107421,7.18540000915522 -73.0864028930664,7.18370008468634 -73.077796936035,7.18019914627087</coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>
                    </Placemark>
            </Folder>
    </Document>
</kml>

Ahora, asumiendo que hemos alojado el archivo anterior con las coordenadas de Bucaramanga alojado en un servidor público accesible por Google o cualquier persona en http://mydomain.com/bucaramanga.kml , podríamos dibujar la capa en el mapa con el siguiente código :

// Inicializar algún mapa con centro en Bucaramanga
var map = new google.maps.Map(document.getElementById('marker-map'), {
    center: {
        lat: 7.119082288502541,
        lng: -73.120029012106
    },
    zoom: 13,
    mapTypeId: 'roadmap'
});

// Dibuja un archivo KML para resaltar el área de Bucaramanga
var ctaLayer = new google.maps.KmlLayer({
    url: 'http://mydomain.com/bucaramanga.kml',
    map: map
});

Esto generaría un mapa como el siguiente:

KML Layer Google Maps

Resaltando paises

Siga el mismo proceso, sin embargo, puede saber que los países tendrán más coordenadas (muchas de ellas, por lo que será bastante doloroso construir las coordenadas como objetos, sin embargo, es la única forma), por ejemplo con Mónaco (un pequeño país con solo 158 coordenadas para dibujar):

Nota

Estamos usando el método auxiliar  buildCoordinatesArrayFromStringya que somos bastante perezosos para hacer una matriz de coordenadas en JavaScript, por lo que solo proporcionamos la cadena de coordenadas y eso es todo.

// Inicializar un mapa con el centro en Mónaco
var map = new google.maps.Map(document.getElementById('marker-map'), {
    center: {
        lat: 43.73841760000001,
        lng: 7.42461579999997
    },
    zoom: 13,
    mapTypeId: 'roadmap'
});

let kmlAreaData = `7.41338348388666,43.734588623047 
7.43630027771002,43.750888824463 
7.43923950195318,43.7490272521972 
7.43958282470709,43.7492141723633 
7.43958187103277,43.7481956481934 
7.43985986709589,43.7481956481934 
7.43985986709589,43.747917175293 
7.43958187103277,43.747917175293 
7.43958187103277,43.7459716796876 
7.43763780593878,43.7459716796876 
7.43763780593878,43.7462501525879 
7.43625020980835,43.7462501525879 
7.43625020980835,43.7459716796876 
7.43569421768188,43.7459716796876 
7.43569421768188,43.7462501525879 
7.43541622161871,43.7462501525879 
7.43541622161871,43.7459716796876 
7.43513822555542,43.7459716796876 
7.43513822555542,43.7456932067872 
7.43486213684088,43.7456932067872 
7.43486213684088,43.745418548584 
7.43430614471436,43.745418548584 
7.43430614471436,43.7451400756836 
7.43402814865124,43.7451400756836 
7.43402814865124,43.7445831298828 
7.43347215652477,43.7445831298828 
7.43347215652477,43.7443046569824 
7.43319416046143,43.7443046569824 
7.43319416046143,43.743751525879 
7.43291616439831,43.743751525879 
7.43291616439831,43.7431945800782 
7.43264007568354,43.7431945800782 
7.43263816833496,43.7429161071778 
7.43208408355707,43.7429161071778 
7.43208408355707,43.7423629760743 
7.43152809143078,43.7423629760743 
7.43152809143078,43.7418060302735 
7.43125009536749,43.7418060302735 
7.43125009536749,43.7415275573731 
7.43097209930431,43.7415275573731 
7.43097209930431,43.7412490844728 
7.43125009536749,43.7412490844728 
7.43125009536749,43.7409706115724 
7.43097209930431,43.7409706115724 
7.43097209930431,43.7406959533691 
7.43069410324097,43.7406959533691 
7.43069410324097,43.7390289306641 
7.43041610717785,43.7390289306641 
7.43041610717785,43.7379150390625 
7.43014001846313,43.7379150390625 
7.43014001846313,43.7376403808595 
7.42902803421015,43.7376403808595 
7.42902803421015,43.7373619079591 
7.4279150962829,43.7373619079591 
7.4279150962829,43.7370834350587 
7.42763996124268,43.7370834350587 
7.42763996124268,43.7365264892579 
7.4273619651795,43.7365264892579 
7.4273619651795,43.7362518310547 
7.42676019668579,43.7362518310547 
7.42374897003185,43.7362518310547 
7.42374897003185,43.7359733581544 
7.42347288131708,43.7359733581544 
7.42347288131708,43.735694885254 
7.42374897003185,43.735694885254 
7.42374897003185,43.7345848083496 
7.42558193206787,43.7345848083496 
7.42708396911621,43.7345848083496 
7.42708396911621,43.7343063354492 
7.4273619651795,43.7343063354492 
7.4273619651795,43.7340278625488 
7.42763996124268,43.7340278625488 
7.42763996124268,43.7334709167481 
7.4279150962829,43.7334709167481 
7.4279150962829,43.7329177856445 
7.42819309234625,43.7329177856445 
7.42819309234625,43.7326393127441 
7.42847204208368,43.7326393127441 
7.42847204208368,43.7312507629396 
7.42763996124268,43.7312507629396 
7.42763996124268,43.7304153442384 
7.42652702331543,43.7304153442384 
7.42652702331543,43.7301406860352 
7.42624902725225,43.7301406860352 
7.42624902725225,43.7298622131348 
7.42569589614868,43.7298622131348 
7.42569589614868,43.7295837402344 
7.4251389503479,43.7295837402344 
7.4251389503479,43.729305267334 
7.42458295822144,43.729305267334 
7.42458295822144,43.7290267944337 
7.42430496215832,43.7290267944337 
7.42430496215832,43.7287483215333 
7.42402696609497,43.7287483215333 
7.42402696609497,43.7284736633301 
7.42430496215832,43.7284736633301 
7.42430496215832,43.7279167175293 
7.42458295822144,43.7279167175293 
7.42458295822144,43.7276382446289 
7.42430496215832,43.7276382446289 
7.42430496215832,43.7273597717286 
7.42374897003185,43.7273597717286 
7.42374897003185,43.7270851135255 
7.4226388931275,43.7270851135255 
7.4226388931275,43.7268066406249 
7.42208290100103,43.7268066406249 
7.42208290100103,43.7265281677246 
7.42180490493786,43.7265281677246 
7.42180490493786,43.7262496948242 
7.42152690887451,43.7262496948242 
7.42152690887451,43.7259712219238 
7.42124891281139,43.7259712219238 
7.42124891281139,43.7254180908204 
7.42097282409668,43.7254180908204 
7.42097282409668,43.72513961792 
7.42041683197016,43.72513961792 
7.42041683197016,43.7248611450196 
7.42013883590704,43.7248611450196 
7.42013883590704,43.7245826721193 
7.41986083984369,43.7245826721193 
7.41986083984369,43.7243041992189 
7.41958284378057,43.7243041992189 
7.41958284378057,43.7240295410157 
7.41902685165411,43.7240295410157 
7.41902685165411,43.7237510681153 
7.41874885559093,43.7237510681153 
7.41874885559093,43.7234725952149 
7.41847276687622,43.7234725952149 
7.41847276687622,43.7231941223145 
7.41819477081305,43.7231941223145 
7.41819477081305,43.7229156494141 
7.41791677474976,43.7229156494141 
7.41791677474976,43.7226371765137 
7.41763877868658,43.7226371765137 
7.41763877868658,43.7229156494141 
7.41486120224005,43.7229156494141 
7.41486120224005,43.7237510681153 
7.4145817756654,43.7237510681153 
7.4145817756654,43.7240295410157 
7.41430711746216,43.7240295410157 
7.41430711746216,43.7243041992189 
7.41365289688116,43.7243041992189 
7.41562128067011,43.7257347106935 
7.40952730178844,43.729866027832 
7.4128274917602,43.7317237854004 
7.41338348388666,43.734588623047`;

var MonacoDelimiters = buildCoordinatesArrayFromString(kmlAreaData);

// Construye el polígono.
var MonacoPolygon = new google.maps.Polygon({
    paths: BucaramangaDelimiters,
    strokeColor: '#0037FF',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#0037FF',
    fillOpacity: 0.35
});

// Dibuja el polígono en la instancia de mapa deseada
MonacoPolygon.setMap(map);

Esto mostrará un mapa como:

Monaco Highlight Country Google Maps

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores