Google Maps API 3 - Type Error: a undefined

Question

I am trying to dynamically load geocodes from a json file here http://debug-gotfed.admin.zope.net/bataviaeats/at/dev_remote_content

I get "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

Thanks to all who responded. This is the final working code with add-ons for Infoboxes. I had to turn split geocode data into numbers. You can watch it 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> 

Answer 2

You either have a firebug open console when the page loads, or one of the firefox extensions that clogs the load, which makes the browser unable to get the full script from google.

Solution: enable the firebug console, if it is not, then try disabling the extensions to see what conflict

Answer 3

Just add v3, for example, as the 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 go here: Google Maps API: TypeError: a undefined

Answer 4

The google.maps.LatLng constructor takes two arguments. This is not true:

  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, you must pass them separately to the constructor:

  var position = new google.maps.LatLng(data.geocode.lat, data.geocode.lng); 

for your specific data:

  var geocode=data.geocode.split(','); var position = new google.maps.LatLng(geocode[0],geocode[1]);