show JSON parsed data in javascript loop for maps markers

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

<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":"25.363882","1":"131.044922","lon":"131.044922"}]

What does your addMarker function look like? Add it to your question please. — duncan
– duncan, Commented Dec 14, 2014 at 12:16

duncan · Accepted Answer · 2014-12-14 12:18:54Z

1

Your problem is that the lat and lon values from your PHP are strings. I'm assuming (because your question doesn't include it at this stage) your addMarker function isn't converting those strings to the numeric objects that the google Maps expects for lat/lng values.

Try simply wrapping those in parseFloat() before passing them to the Maps API, e.g.

addMarker(parseFloat(item.lat), parseFloat(item.lon));

Alternatively you could do this in the addMarker function itself (which is probably better).

answered Dec 14, 2014 at 12:18

duncan

32k15 gold badges84 silver badges103 bronze badges

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

Comments

geocodezip · Accepted Answer · 2014-12-14 16:26:03Z

You need to add the marker to the map. The way your code is currently structured the map is local to the initialize function and there is no way to pass that value to the addMarker function.

You have two options:

pass the "map" variable into the addMarker function

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, map);
            })(items[i]);
        }
    });
}

proof of concept fiddle

working code snippet:

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) {
  var items = [{
    "0": "33.880561",
    "lat": "33.880561",
    "1": "35.542831",
    "lon": "35.542831"
  }, {
    "0": "-25.363882",
    "lat": "25.363882",
    "1": "131.044922",
    "lon": "131.044922"
  }];
  for (var i = 0; i < items.length; i++) {
    (function(item) {
      addMarker(item.lat, item.lon, map);
    })(items[i]);
  }
  // });
}
var bounds = new google.maps.LatLngBounds();

function addMarker(lat, lng, map) {
  var latlng = new google.maps.LatLng(lat, lng);
  bounds.extend(latlng);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
  map.fitBounds(bounds);
  return marker;
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

make the "map" variable global.

var map; // global variable, outside of any function definition
function initialize() {
    var mapOptions = {
        center: {
            lat: -25.363882,
            lng: 131.044922
        },
        zoom: 14
    };

    // initialize the global variable (no "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]);
        }
    });
}

working code snippet:

var map;
function initialize() {
  var mapOptions = {
    center: {
      lat: -25.363882,
      lng: 131.044922
    },
    zoom: 14
  };

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

  // $.getJSON('parser.php', function (items) {
  var items = [{
    "0": "33.880561",
    "lat": "33.880561",
    "1": "35.542831",
    "lon": "35.542831"
  }, {
    "0": "-25.363882",
    "lat": "25.363882",
    "1": "131.044922",
    "lon": "131.044922"
  }];
  for (var i = 0; i < items.length; i++) {
    (function(item) {
      addMarker(item.lat, item.lon);
    })(items[i]);
  }
  // });
}
var bounds = new google.maps.LatLngBounds();

function addMarker(lat, lng) {
  var latlng = new google.maps.LatLng(lat, lng);
  bounds.extend(latlng);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
  map.fitBounds(bounds);
  return marker;
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

Collectives™ on Stack Overflow

show JSON parsed data in javascript loop for maps markers

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related