display data in a loop using javascript

Question

I'm trying to get the markers longitude and latitude and display them on the map but I'm not getting any result, my parser.php file is working and fetching the data from the database i just need to format it into javascript anyone ?

<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: { lat: -25.363882, lng: 131.044922},
      zoom: 14
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    $.getJSON('parser.php', function(items) {
        for (var i = 0; i < items.length; i++) {
            (function(item) {
                addMarker(item.lat, item.lon);
            })(items[i]);
        }
    });

    }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

parser.php output

[{"0":"33.880561","lat":"33.880561","1":"35.542831","lon":"35.542831"},{"0":"-25.363882","lat":"131.044922","1":"35.513477","lon":"35.513477"}]

It would help to see a sample of the JSON object returned by parser.php. — Alfonso
– Alfonso, Commented Dec 14, 2014 at 3:26
@Barmar sorry first time i use $.getJSON I'm not sure if I'm using it the correct way, though google maps documentation shows the following adding a marker snippet, var myLatlng = new google.maps.LatLng(33.890537,35.513477); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' }); — karma cat
– karma cat, Commented Dec 14, 2014 at 3:30
What @Barmar said, or define an addMarker() function with the code you quoted. — Alfonso
– Alfonso, Commented Dec 14, 2014 at 3:34

Barmar · Accepted Answer · 2014-12-14 03:36:45Z

1

addMarker needs to take map as an argument.

function addMarker(map, lat, long) {
    var latlong = google.maps.LatLng(lat, long);
    return new google.maps.Marker({
        position: latlong,
        map: map
    });
}

Then your loop should be:

for (var i = 0; i < items.length; i++) {
    item = items[i];
    addMarker(map, item.lat, item.lon);
}

You don't need to put the addMarker calls into a closure, because these aren't separate callbacks.

answered Dec 14, 2014 at 3:36

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

karma cat Over a year ago

can you tell me what I'm doing wrong cause i can't seem to make it work,

function addMarker(map, lat, long) { var latlong = google.maps.LatLng(lat, long); return new google.maps.Marker({ 	position: latlong, 	map: map }); }  $.getJSON('parser.php', function(items) { 	for (var i = 0; i < items.length; i++) { 		(function(item) { 			addMarker(map, item.lat, item.lon); 		})(items[i]); 	} });

Barmar Over a year ago

You didn't put map in the arguments to addMarker.

Barmar Over a year ago

Don't put long code blocks in comments, there's no formatting.

Barmar Over a year ago

I've never used the Google Maps API, so I was just going by what you wrote. If that was correct, then my code should work.

Barmar Over a year ago

Sorry, not interested in prolonging this.

|

Collectives™ on Stack Overflow

display data in a loop using javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related