Google Maps API 3 - Type error: a is undefined - google-maps-api-3

Question

I'm attempting to dynamically load geocodes from a json file here http://debug-gotfed.admin.zope.net/bataviaeats/at/dev_remote_content
I'm getting a "Type Error: a is undefined." What am I missing?
<script type="text/javascript">
// Global
var infowindow;
var markers_img = 'http://gotfed.in/!/assets/global_images/got-fed-in-marker.png';
var infoCloseIcon = 'images/close.png';
var infoCloseMargin = '4px 4px 2px 2px';
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(58, 16),
scrollwheel: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
$.each(locations, function(i, data) {
console.log(data.geocode);
var position = new google.maps.LatLng(data.geocode);
var marker = new google.maps.Marker({
position: position,
map: map,
icon: markers_img
});
console.log(marker);
// marker.setMap(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

You are either having the firebug console open when loading the page or one of firefox extension clogging the downloading, making the browser can not get full script from google.
Solution: turn of firebug console, if that's not the case, then try disable the extensions individually see what conflict.

Answer 2

Just add the v3 for example as release version ,and it will work with firebug and any other extension
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
all credits goes here :
Google Maps API: TypeError: a is undefined

Answer 3

The google.maps.LatLng constructor takes two arguments. This is wrong:
var position = new google.maps.LatLng(data.geocode);
If data.geocode is already a google.maps.LatLng object, just use it. If it is a JSON object with lat and lng properties, then you have to pass those separately into the constructor:
var position = new google.maps.LatLng(data.geocode.lat, data.geocode.lng);
code for your specific data:
var geocode=data.geocode.split(',');
var position = new google.maps.LatLng(geocode[0],geocode[1]);

Answer 4

Thank you to all who answered. This is the final working code with additions for Infoboxes. I did have to turn the split geocode data into numbers. You can view this in real-time # http://gotfed.in/fredericksburg-va
<script type="text/javascript">
// Global
var map;
var infowindow;
var markers_img = 'http://gotfed.in/!/assets/global_images/got-fed-in-marker.png';
var infoCloseIcon = 'http://gotfed.in/!/assets/global_images/close.png';
var infoCloseMargin = '4px 4px 2px 2px';
bounds = new google.maps.LatLngBounds();
function initialize() {
var mapOptions = {
scrollwheel: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// create markers
$.each(locations, function(i, data) {
var geocode = data.geocode.split(',');
var geo1 = parseFloat(geocode[0]);
var geo2 = parseFloat(geocode[1]);
var position = new google.maps.LatLng(geo1,geo2);
var marker = new google.maps.Marker({
position: position,
map: map,
icon: markers_img,
title: data.business_name
});
bounds.extend(position);
var id = "info" + i;
console.log(id);
var infobox = new InfoBox({
content: document.getElementById(id),
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {width: "280px"},
closeBoxMargin: infoCloseMargin,
closeBoxURL: infoCloseIcon,
infoBoxClearance: new google.maps.Size(1, 1)
});
google.maps.event.addListener(marker, 'click', function() {
infobox.open(map, this);
map.panTo(position);
});
});
// set Bounds
map.fitBounds(bounds);
// Keep map centered
var center;
function calculateCenter() {
center = map.getCenter()
}
google.maps.event.addDomListener(map, 'idle', function() {
calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>