Create polygon layer in google maps api js

Question

Create polygon layer in google maps api js

Navigation

#1 by (2 votes)

2

Good morning, I have the following coordinates:

-90.833910,13.994037 -90.833918,13.994095 -90.833924,13.994152 -90.833930,13.994207 -90.833936,13.994263 -90.833943,13.994322 -90.833951,13.994382 -90.833959,13.994440 -90.833965,13.994494 -90.833971,13.994548 -90.833978,13.994608 -90.833984, 13.994671 -90.833993,13.994741 -90.834001,13.994811 -90.834010,13.994877 -90.834019,13.994940 -90.834028,13.995003 -90.834036,13.995060 -90.834044,13.995110 -90.834052,13.995162 -90.834061,13.995222 -90.834067,13.995281 -90.834074,13.995336 -90.834080,13.995390 - 90.834086,13.995442 -90.834092,13.995495 -90.834100,13.995553 -90.834105,13.995610 -90.834110,13.995665 -90.834116,13.995718 -90.834122,13.995769 -90.834127,13.995820 -90.834134,13.995871 -90.834141,13.995924 -90.834146,13.995974 -90.834149,13.996008 -90.834192, 13.996161 -90.834732,13.996091 -90.835519,13.995989 -90.836038,13.995931 -90.836696,13.995846 -90.836677,13.995819 -90.836660,13.995674 -90.836610,13.995123 -90.836480,13.994146 -90.836461,13.994126 -90.836370,13.994036 -90.836287 , 13.994044 -90.836194,13.994035 -90.836012,13.993789 -90.836003,13.993753 -90.835995,13.993581 -90.836245,13.993529 -90.836375,13.993521 -90.836386,13.993516 -90.836394,13.992635 -90.836266,13.992318 -90.836394,13.993503 -90.836395,13.993404 -90.836309,13.992635 -90.836266,13.992318 -90.836207,13.991926 -90.836192,13.991927 -90.836170,13.991932 -90.836125,13.991938 -90.836074,13.991943 -90.836010,13.991951 -90.835936,13.991961 -90.835862,13.991968 -90.835791,13.991976 -90.835722,13.991980 -90.835658,13.991985 -90.835597,13.991994 -90.835533 , 13.992003 -90.835471,13.992011 -90.835408,13.992018 -90.835346,13.992025 -90.835285,13.992033 -90.835228,13.992040 -90.835173,13.992045 -90.835118,13.992051 -90.835062,13.992057 -90.835002,13.992063 -90.834936,13.992071 -90.834868,13.992078 -90.834800,13.992086 -90.834733,13.992094 -90.834663,13.992102 -90.834588,13.992111 -90.834523,13.992120 -90.834474,13.992123 -90.834421,13.992129 -90.834361,13.992133 -90.834298,13.992140 -90.834229,13.992149 -90.834160,13.992161 -9 0.834092,13.992171 -90.834022,13.992180 -90.833954,13.992185 -90.833889,13.992191 -90.833824,13.992198 -90.833761,13.992205 -90.833709,13.992212 -90.833680,13.992216 -90.833683,13.992242 -90.833693,13.992300 -90.833704,13.992370 -90.833712,13.992445 -90.833720, 13.992518 -90.833727,13.992591 -90.833736,13.992661 -90.833745,13.992730 -90.833755,13.992795 -90.833764,13.992855 -90.833772,13.992913 -90.833779,13.992971 -90.833786,13.993202 -90.833815,13.993251 -90.833745,13.993092 -90.833799,13.993149 -90.833807,13.993202 -90.833815,13.993251 90.833823,13.993302 -90.833830,13.993358 -90.833837,13.993410 -90.833843,13.993462 -90.833849,13.993518 -90.833857,13.993579 -90.833864,13.993641 -90.833870,13.993700 -90.833876,13.993760 -90.833881,13.993817 -90.833887,13.993871 -90.833894,13.993927 -90.833902, 13.993982 -90.833910,13.994037

These coordinates come from a kml and I am interested to know if with them I can draw on the map a polygon keeping the current format of the coordinates, since otherwise you would have to separate thousands of coordinates to use the following format:

var triangleCoords = [
          {lat: 25.774, lng: -80.190},
          {lat: 18.466, lng: -66.118},
          {lat: 32.321, lng: -64.757}
        ];

Also if possible, how can I get a central coordinate based on that group of coordinates?

For your help, thank you very much.

With the help of Marcos I was able to create polygons. XD

The code is in this way:

    function errores(msg) {
        alert('Error: ' + msg.responseText);
    }

    var bmap;
    function initMaps(flag) {
        if (flag == 1) {
            var myLatLng = { lat: 13.84392970, lng: -90.25855230 };
            var bmap = new google.maps.Map(document.getElementById('bmap'), {
                zoom: 14,
                center: myLatLng,
                mapTypeId: 'satellite'
            });

            var bounds = new google.maps.LatLngBounds();

            function addMarker(feature, finca, coordenadas) {
                //inicia crear poligono
                var coords = coordenadas.split(' ') // Separamos por espacio
                        .map(function (data) {
                            var info = data.split(','), // Separamos por coma
                        coord = { // Creamos el obj de coordenada
                            lat: parseFloat(info[1]),
                            lng: parseFloat(info[0])
                        };
                            // Agregamos la coordenada al bounds
                            bounds.extend(coord);
                            return coord;
                        });

                var area = new google.maps.Polygon({
                    paths: coords,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 3,
                    fillColor: '#BBDEFB',
                    fillOpacity: 0.35
                });

                area.setMap(bmap); // agrega el poligono al mapa
                // finaliza crear poligono

                var markers = new google.maps.Marker({
                    position: bounds.getCenter(),
                    map: bmap,
                    title: 'Finca: ' + finca
                });

                //inicia infowindow
                // Add a listener for the click event.
                area.addListener('click', showArrays);
                var infoWindow = new google.maps.InfoWindow;
                // finaliza infowindow
                //------------------------------------
                function showArrays(event) {
                    // Since this polygon has only one path, we can call getPath() to return the
                    // MVCArray of LatLngs.
                    var vertices = this.getPath();

                    var contentString = '<b>Bermuda Triangle polygon</b><br>' +
                      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
                      '<br>';

                    // Iterate over the vertices.
                    for (var i = 0; i < vertices.getLength(); i++) {
                        var xy = vertices.getAt(i);
                        contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
                        xy.lng();
                    }

                    // Replace the info window's content and position.
                    infoWindow.setContent(contentString);
                    infoWindow.setPosition(event.latLng);

                    infoWindow.open(bmap);
                }
                //------------------------------------


                bmap.fitBounds(bounds); // ajusta el mapa a la cantidad de marcadores
                //                    //finaliza crear marcador

            } // finaliza addMarker

            var FechaInicial = $('#<%= txtFechaInicial.ClientID %>').val();
            var FechaFinal = $('#<%= txtFechaFinal.ClientID %>').val();
            var Finca = $('#<%= CboFincass.ClientID %>').val();

            $.ajax({
                type: "POST",
                url: "FrmKmlFincas.aspx\/FillMapas",
                data: '{FechaInicial: "' + FechaInicial + '", FechaFinal: "' + FechaFinal + '", Finca: "' + Finca + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    var data = JSON.parse(msg.d);
                    marcadores = [];
                    finca = [];
                    coordenadas = [];
                    $.each(data, function (i, item) {
                        marcadores[i] = new google.maps.LatLng(item.Latitud, item.Longitud);
                        finca[i] = item.Finca;
                        coordenadas[i] = item.Coordenadas;
                        addMarker(marcadores[i], finca[i], coordenadas[i]); //enviar finca,descricion, etc
                    });
                },
                error: errores
            });
        } else {
            // alert("1");
            var myLatLng = { lat: 14.151171, lng: -90.841083 };
            var bmap = new google.maps.Map(document.getElementById('bmap'), {
                zoom: 14,
                center: myLatLng,
                mapTypeId: 'satellite'
            });

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: bmap,
                title: 'Hello World!'
            });
        }
    }

The problem that I have, is that the first marker that is created if it comes out centered with respect to the polygon, instead starting from the second no longer. I do not know if I should clean some variable. Thank you very much for your help.

javascript google-maps

asked by raintrooper 07.09.2017 в 19:34

source

1 answer

Subtract two sql columns Unify 2 functions to read files with python

score 2 · Accepted Answer

I am interested to know if with them I can draw on the map a polygon keeping the current format of the coordinates

The answer is NO . It is necessary to process them and convert them to the format LatLngLiteral or in a LatLng . Which is quite simple to perform, we should only:

Separate the cadena for a space:
```
var params = cadena.split(' ');
```

For each value obtained, separate by comma and create the LatLngLiteral

var coords = params.map(function(data){
  var info = data.split(','),
    coord = {
      lat: parseFloat(info[1]),
      lng: parseFloat(info[0])
    };
  return coord;
});

And you're done, we already have the coordinate list processed.

How can I get a central coordinate based on that group of coordinates?

What we can do is create a LatLngBounds and as we process the coordinates and add them to it.

var bounds = new google.maps.LatLngBounds();

var coords = params.map(function(data){
  var info = data.split(','),
    coord = {
      lat: parseFloat(info[1]),
      lng: parseFloat(info[0])
    };
  // Agregamos la coordenada al bounds
  bounds.extend(coord);
  return coord;
});

Then we indicate to the map that we want to center it to the central coordinates of bounds

// Creamos el mapa
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: bounds.getCenter(), // Centramos el mapa al area
  mapTypeId: 'terrain'
});

Demo

function initMap() {
  // Creamos la instacia bounds
  var bounds = new google.maps.LatLngBounds();

  // Extraemos las coordenadas
  var coords = '-90.833910,13.994037 -90.833918,13.994095 -90.833924,13.994152 -90.833930,13.994207 -90.833936,13.994263 -90.833943,13.994322 -90.833951,13.994382 -90.833959,13.994440 -90.833965,13.994494 -90.833971,13.994548 -90.833978,13.994608 -90.833984,13.994671 -90.833993,13.994741 -90.834001,13.994811 -90.834010,13.994877 -90.834019,13.994940 -90.834028,13.995003 -90.834036,13.995060 -90.834044,13.995110 -90.834052,13.995162 -90.834061,13.995222 -90.834067,13.995281 -90.834074,13.995336 -90.834080,13.995390 -90.834086,13.995442 -90.834092,13.995495 -90.834100,13.995553 -90.834105,13.995610 -90.834110,13.995665 -90.834116,13.995718 -90.834122,13.995769 -90.834127,13.995820 -90.834134,13.995871 -90.834141,13.995924 -90.834146,13.995974 -90.834149,13.996008 -90.834192,13.996161 -90.834732,13.996091 -90.835519,13.995989 -90.836038,13.995931 -90.836696,13.995846 -90.836677,13.995819 -90.836660,13.995674 -90.836610,13.995123 -90.836480,13.994146 -90.836461,13.994126 -90.836370,13.994036 -90.836287,13.994044 -90.836194,13.994035 -90.836012,13.993789 -90.836003,13.993753 -90.835995,13.993581 -90.836245,13.993529 -90.836375,13.993521 -90.836386,13.993516 -90.836394,13.993512 -90.836394,13.993503 -90.836395,13.993404 -90.836309,13.992635 -90.836266,13.992318 -90.836207,13.991926 -90.836192,13.991927 -90.836170,13.991932 -90.836125,13.991938 -90.836074,13.991943 -90.836010,13.991951 -90.835936,13.991961 -90.835862,13.991968 -90.835791,13.991976 -90.835722,13.991980 -90.835658,13.991985 -90.835597,13.991994 -90.835533,13.992003 -90.835471,13.992011 -90.835408,13.992018 -90.835346,13.992025 -90.835285,13.992033 -90.835228,13.992040 -90.835173,13.992045 -90.835118,13.992051 -90.835062,13.992057 -90.835002,13.992063 -90.834936,13.992071 -90.834868,13.992078 -90.834800,13.992086 -90.834733,13.992094 -90.834663,13.992102 -90.834588,13.992111 -90.834523,13.992120 -90.834474,13.992123 -90.834421,13.992129 -90.834361,13.992133 -90.834298,13.992140 -90.834229,13.992149 -90.834160,13.992161 -90.834092,13.992171 -90.834022,13.992180 -90.833954,13.992185 -90.833889,13.992191 -90.833824,13.992198 -90.833761,13.992205 -90.833709,13.992212 -90.833680,13.992216 -90.833683,13.992242 -90.833693,13.992300 -90.833704,13.992370 -90.833712,13.992445 -90.833720,13.992518 -90.833727,13.992591 -90.833736,13.992661 -90.833745,13.992730 -90.833755,13.992795 -90.833764,13.992855 -90.833772,13.992913 -90.833779,13.992971 -90.833786,13.993033 -90.833792,13.993092 -90.833799,13.993149 -90.833807,13.993202 -90.833815,13.993251 -90.833823,13.993302 -90.833830,13.993358 -90.833837,13.993410 -90.833843,13.993462 -90.833849,13.993518 -90.833857,13.993579 -90.833864,13.993641 -90.833870,13.993700 -90.833876,13.993760 -90.833881,13.993817 -90.833887,13.993871 -90.833894,13.993927 -90.833902,13.993982 -90.833910,13.994037'
    .split(' ') // Separamos por espacio
    .map(function(data) {
      var info = data.split(','), // Separamos por coma
        coord = { // Creamos el obj de coordenada
          lat: parseFloat(info[1]),
          lng: parseFloat(info[0])
        };
      // Agregamos la coordenada al bounds
      bounds.extend(coord);
      return coord;
    });


  // Creamos el poligono
  var area = new google.maps.Polygon({
    paths: coords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  // Creamos el mapa
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: bounds.getCenter(), // Centramos el mapa al area
    mapTypeId: 'terrain'
  });

  // Agregamos el area al mapa
  area.setMap(map);
}

#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCK3ulYYM8GCwK-_HlZVNKvkgp-zvEebUM&callback=initMap"></script>