Getting error when trying to pass values from array to Google Maps Object

Im setting some json using wordpress post data on a page and then passing that json to some JS which loops through and adds markers to a map. I'm so close to getting it working, just need to figure out this last part.

My PHP code to create the json from an array:

<script type="text/javascript">
var markers = <?php echo json_encode($pageposts);?>  
</script>

Here is my JS code: var infowindow = null;

  $(document).ready(function(){
  initialize();
   });

function initialize() {

var centerMap = new google.maps.LatLng(41.141208, -73.263726);
var options = {
    zoom: 12,
    center: centerMap,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getEle开发者_C百科mentById('map'), options);    

setMarkers(map, markers);
  infowindow = new google.maps.InfoWindow({
    content: "loading..."
  });
}

function setMarkers(map, markers) {
  for (var i = 0; i < markers.length; i++) {
  var marker = new google.maps.Marker({
  position:  new google.maps.LatLng(markers[i].meta_value), 
  map: map
});

var contentString = "Some content";

google.maps.event.addListener(marker, "click", function () {
//infowindow.setContent(this.html);
//infowindow.open(map, this);
});

} }

If you want to see the page, with the json embedded - check out this link: http://www.fairfieldctguide.com/test-map view-source:http://www.fairfieldctguide.com/test-map

Any help would be greatly appreciated! Jake

google.maps.LatLng expects two numbers as an argument. Currently you are passing in a string which will result in an error. So you need to convert your markers[i].metavalue to two numbers like so:

function setMarkers(map, markers) {
    for (var i = 0; i < markers.length; i++) {
    latlng = markers[i].meta_value.split(",")
    lat = parseFloat(latlng[0])
    lng= parseFloat(latlng[1])
        var marker = new google.maps.Marker({
            position:  new google.maps.LatLng(lat, lng),
            map: map
        });

        var contentString = "Some content";

        google.maps.event.addListener(marker, "click", function () {
            //infowindow.setContent(this.html);
            //infowindow.open(map, this);
        });
    }
}

If you don't want to do a converson you could just store lat and lng values as numbers in separate properties. So your json would look like this:

  var markers = [{
            "ID":"883",
            "post_title":"Tucker's Cafe",
            "meta_key":"meta_geo",
            "lat":41.1674377,
"lng": -73.2236554
        }

and you would add a marker like so:

var marker = new google.maps.Marker({
            position:  new google.maps.LatLng(markers[i].lat, markers[i].lng),
            map: map
        });