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

Question

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.getElementById('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

I don't see any looping.

Steve Robbins
– Steve Robbins

2011-07-10 21:05:28 +00:00
Commented Jul 10, 2011 at 21:05 — Steve Robbins
– Steve Robbins, Commented Jul 10, 2011 at 21:05

Michal · Accepted Answer · 2011-07-10 21:40:12Z

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
        });

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related