-2

I using a Google Maps Complex Markers example to put markers in some places from a Json request. But I received this message:

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'beaches.length')

Isn't clear for me why the JSON not load. I am newbie in Javascript/JQuery, so I need help.

Originally, the variable beaches is feeded inside of initMap():

var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
  ];

I change to get these data using a loadJSON call outside of the iniMap() function.

  var beaches;

  function setup() {
    loadJSON("getData.php", gotData, 'jsonp');
  }

  function gotData(data) {
    beaches = data;
  }

As you can see I used "jsonp" for security reasons. I try to clear it, but the issue continues.

To present data, this call is executed. The issue occurs in "beaches.lenght":

 for (var i = 0; i < beaches.length; i++) {
      var beach = beaches[i];
      var marker = new google.maps.Marker({
        position: {lat: beach[1], lng: beach[2]},
        map: map,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
      });
    }

I will gratefull for any help...

Eduardo H. Bortolotti
  • 11
  • 1
  • 1
    Everything points to the marker for loop running *before* `beaches` is populated with data. Also, `loadJSON` seems to be a Processing function...? Are you using that? –  Nov 13 '18 at 14:48
  • `loadJSON` is most likely asynchronous. Possible duplciate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) – geocodezip Nov 13 '18 at 16:00
  • Thanks... I'll read about it and I'll do some feedback to you... thanks!! – Eduardo H. Bortolotti Nov 13 '18 at 16:19

1 Answers1

-1

EDITED

You must use JSON format for variable beaches. read this

convert the beaches to this:

var beaches = 
    [{
      "title" : "Bondi Beach",
      "lat" : -33.890542,
      "lng" : 151.274856,
      "zindex" : 4
    },...]

also: You must use google.maps.LatLng object for value of position index in marker object

var pos = new google.maps.LatLng(beach.lat, beach.lng);
var marker = new google.maps.Marker({
    position : pos ,
    map: map,
    shape: shape,
    title: beach.title,
    zIndex: beach.zindex
})
Sepehr Amirkiaee
  • 134
  • 5
  • A [LatLngLiteral](https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLngLiteral) should work. – geocodezip Nov 13 '18 at 15:57
  • Thanks for your answer... I'll test this abordage and I will send a feedback to you soon. – Eduardo H. Bortolotti Nov 13 '18 at 16:30
  • Sepehr, the issue had continue here... The error is in "beaches.length" from for (var i = 0; i < beaches.length; i++) { ... }. But I don't know why my JSON doesn't result some data... Consulting the json link directly, the data is ok. But when loadJSON try to load, these data don't fill the variable "beaches". Do you have some idea? – Eduardo H. Bortolotti Nov 13 '18 at 16:34