多边形未显示在Google地图中

Question

I obtain the polygon coordinates through an AJAX request and I pass all the coordinates to an associative array.

The problem is, when I create the Polygon this don't show, but if I create it with the coordinates example this show.

This is the code:

var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.7281512, lng: -58.262616},
            zoom: 10
        });

        var coords = new Array();

        $.ajax({
            type: 'GET',
            url: 'http://nominatim.openstreetmap.org/reverse?format=json&osm_type=R&osm_id=2532299&polygon_geojson=1',
            data: { get_param: 'value' },
            success: function (data) {

                $.each(data.geojson.coordinates[0], function( index, value ) {

                    if(typeof value[0] !== 'undefined' && typeof value[1] !== 'undefined') {
                        coords.push({lat: value[0], lng: value[1]});
                    }
                });
            }
        });

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

        zone.setMap(map);
    }

If I make the same, with the google example, this works fine. I don't know why my associative array don't work.

Code of the example:

var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.7281512, lng: -58.262616},
            zoom: 10
        });

        var triangleCoords = [
            {lat: -34.817177, lng: -58.500948},
            {lat: -34.688414, lng: -58.500948},
            {lat: -34.688414, lng: -58.336764},
            {lat: -34.817177, lng: -58.336764},
            {lat: -34.817177, lng: -58.500948}
        ];

        var zone = new google.maps.Polygon({
            paths: triangleCoords,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        });

        zone.setMap(map);
    }

Answer 1

You have two issues with the posted code.

1. Your $.ajax call is asynchronous, so the data isn't available when you try to populate the paths attribute of the polygon. You need to use the data in the callback function when/where it is available.

2. You have the latitude and longitude reversed in the path of the polygon.

$.ajax({
  type: 'GET',
  url: 'http://nominatim.openstreetmap.org/reverse?format=json&osm_type=R&osm_id=2532299&polygon_geojson=1',
  data: {
    get_param: 'value'
  },
  success: function(data) {
    var zone = new google.maps.Polygon({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map
    });
    $.each(data.geojson.coordinates[0], function(index, value) {
      if (typeof value[0] !== 'undefined' && typeof value[1] !== 'undefined') {
        coords.push({
          lat: value[1],
          lng: value[0]
        });
      }
      zone.setPath(coords);
    });
  }
})

proof of concept fiddle

code snippet:

 var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: -34.7281512, lng: -58.262616 }, zoom: 10 }); var coords = new Array(); $.ajax({ type: 'GET', url: 'https://nominatim.openstreetmap.org/reverse?format=json&osm_type=R&osm_id=2532299&polygon_geojson=1', data: { get_param: 'value' }, success: function(data) { var zone = new google.maps.Polygon({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map }); $.each(data.geojson.coordinates[0], function(index, value) { if (typeof value[0] !== 'undefined' && typeof value[1] !== 'undefined') { coords.push({ lat: value[1], lng: value[0] }); } zone.setPath(coords); }); } }) } google.maps.event.addDomListener(window, "load", initMap); 

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div>