[visualization-api] Use of city level markers on geomap are causing 403 errors.

[kenja]

I've developed a drill-down geomap that starts at world level, drills
down to country level, and then drills down to city level within a
state/province.  It works fine until I get down to the city level
view.  With firebug I can see that calls are being made to google for
each city in my feed, but those calls are returning 403 errors saying
my client is not authorized to view those pages.

Is my API key not being recognized?  I'm using it on my localhost, but
I use the geocoder with my local key all the time without issues.

Here is how I pass my API key within the head section:

<script type='text/javascript' src='http://www.google.com/jsapi?
key=myapikeygoeshere'></script>
<script src='http://maps.google.com/maps?
file=api&v=2&key=myapikeygoeshere' type='text/javascript'></script>

And if it matters, here is the code:
<script type='text/javascript'>
    google.load('visualization', '1', {'packages': ['geomap']});
    google.setOnLoadCallback(OnLoad);
    function OnLoad() {
        $.ajax({
            type: "POST",
            url: 'chart_feeds/parcel/Population_map.php?
start='+from_date+'&end='+to_date,
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: DrawWorldMap
        });
    }
 </script>

 <script type='text/javascript'>
        var countryCode;
    function DrawWorldMap(response) {
        var data = new google.visualization.DataTable();
        data.addRows(response.d.length);
        data.addColumn('string', 'Country');
        data.addColumn('string', 'Population');
        for (var i = 0; i < response.d.length; i++) {
            data.setValue(i, 0, response.d[i].Country);
            data.setValue(i, 1, response.d[i].Population);
        }
        var options = {};
        options['width']='446px';
        options['height']='300px';
        options['dataMode'] = 'regions';

        var container = document.getElementById('map_canvas');
        var geomap = new google.visualization.GeoMap(container);
        geomap.draw(data, options);

        google.visualization.events.addListener(
                geomap, 'regionClick', function(e) {
                countryCode = e['region'];
                DrillDownCountry();
        });
    }
  </script>

<script type='text/javascript'>

        function DrillDownCountry() {
                $.ajax({
                        type: "POST",
                        url: 
"chart_feeds/parcel/Population_map.php?start='+from_date
+'&end='+to_date&cc="+countryCode,
                        data: '{CountryCode: "' + countryCode + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: CreateStateMap
                });
                }
</script>

 <script type='text/javascript'>
        var stateCode;
    function CreateStateMap(response) {
        var data = new google.visualization.DataTable();
        data.addRows(response.d.length);
        data.addColumn('string', 'State');
        data.addColumn('string', 'Population');
        for (var i = 0; i < response.d.length; i++) {
            data.setValue(i, 0, response.d[i].State);
            data.setValue(i, 1, response.d[i].Population);
        }
        var options = {};
        options['width']='446px';
        options['height']='300px';
        options['region']=countryCode
        options['dataMode'] = 'regions';
        options['showZoomOut'] = true;

        var container = document.getElementById('map_canvas');
        var geomap = new google.visualization.GeoMap(container);
        geomap.draw(data, options);

            google.visualization.events.addListener(
              geomap, 'zoomOut', function(e) {
              OnLoad();
              });

            google.visualization.events.addListener(
                geomap, 'regionClick', function(e) {
                stateCode = e['region'];
                DrillDownState();
        });
    }
  </script>

<script type='text/javascript'>
        function DrillDownState() {
                $.ajax({
                        type: "POST",
                        url: 
"chart_feeds/parcel/Population_map.php?start='+from_date
+'&end='+to_date&cc="+stateCode,
                        data: '{CountryCode: "' + countryCode + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: CreateCityMap
                });
                }
</script>

 <script type='text/javascript'>
    function CreateCityMap(response) {
        var data = new google.visualization.DataTable();
        data.addRows(response.d.length);
        data.addColumn('string', 'City');
        data.addColumn('string', 'Population');
        for (var i = 0; i < response.d.length; i++) {
            data.setValue(i, 0, "'" +response.d[i].City+"'");
            data.setValue(i, 1, response.d[i].Population);
        }
        var options = {};
        options['width']='446px';
        options['height']='300px';
        options['region']=stateCode;
        options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange
colors
        options['dataMode'] = 'markers';
        options['showZoomOut'] = true;

        var container = document.getElementById('map_canvas');
        var geomap = new google.visualization.GeoMap(container);
        geomap.draw(data, options);

            google.visualization.events.addListener(
              geomap, 'zoomOut', function(e) {
              OnLoad();
              });
    }
</script>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To post to this group, send email to google-visualization-...@googlegroups.com.
To unsubscribe from this group, send email to 
google-visualization-api+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-visualization-api?hl=en.