Search code examples
google-maps-api-3google-fusion-tables

Populating google map with array of circle objects created from Fusion Table data


I know I am overlooking/not considering something elementary, but I don't know what I don't know...

Trying to use Fusion Tables to populate an array of Google Maps API circle objects and place them on a map.

Currently I am able to hard-code the array like so:

citymap['Dane'] = {
    center: new google.maps.LatLng(43.10599621690524, -89.38682556152344),
    population: 5000000
};

...and place them on a map.

And I am able to return JSON from the Fusion Tables, loop through and create what I think is an array and display it, but I can't make the circle objects appear.

Any advice on what I need to google/learn would be appreciated.


Solution

  • Here's an example using the new Trusted Tester API to generate Polygons to display on the map:

    https://developers.google.com/fusiontables/docs/samples/mouseover_map_styles

    The logic should be similar, but instead of a Polygon, you would create a Circle:

    new google.maps.Circle({
      center: new google.maps.LatLng(<lat>, <lng>),
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      radius: <radius>
    });