OpenLayers - displaying the markers on the map

StackOverflow https://stackoverflow.com/questions/20602580

  •  02-09-2022
  •  | 
  •  

Question

I can´t see the markers on the map. In the table i can see all the points but on the map it´s not displayed. I guess the problem is here:

markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(venues.location.lat,venues.location.lng),icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(venues.location.lat,venues.location.lng),icon.clone()));

when i put some coordinate instead venues.location.lat,venues.location.lng it display the marker.

...but have no idea how to solve it.

<script type="text/javascript">
$.getJSON('https://api.foursquare.com/v2/venues/search?ll=32.7153,-117.1564&limit=14&radius=1000&client_id=PKAHBB1OAX0B000CG5UUYO4BXV0LWQWKFB51EK3XVNFJ2ULS&client_secret=RDPX01C01RHCYASZIKVH5XXMPVFIPLFHFP1D53UR4GUWQD50&v=20120101',
function(data) {
console.log(data); 
    $.each(data.response.venues, function(i,venues){
        content = '<p>Name: ' + venues.name + 
            ' Address: ' + venues.location.address + 
            ' Lat/long: ' + venues.location.lat + ', ' + venues.location.lng + '</p>';
            $(content).appendTo("#venues");
        $('#table').append("<tr><td>" + venues.name + "</td><td>" + venues.location.address + "</td><td>" +venues.location.lat + "</td><td>" + venues.location.lng + "</td></tr >");

   });
});
</script>
Was it helpful?

Solution

First of the problems is that variable venues which is read via an AJAX request is not accessible from the OpenLayers block inside <body>. If you want to add each data point to the map you'll need to move the marker-adding code to the body of $.each callback. Another problem is that, as its name implies, OpenLayers.LonLat's constructor takes latitude as the first parameter, you're passing lat and lon in the wrong order, causing the markers to appear somewhere on Antarctica.

Here's a JSFiddle that fixes both these problems: http://jsfiddle.net/s9jGt/1/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top