Google maps custom markers issues

Question

I am trying to visualize some fusion tables data on google maps. I have a number of records with addresses grouped by area number. Basically what I would want to happen is the following:

1. I pull data from ft
2. For each record, I geocode the address and assign a custom marker according to the area number
3. I visualize all the different records grouped by different markers

Here is what I've done so far:

This is the query to ft:

var query = "SELECT 'Full Address' , Territory FROM " + tableid;
          query = encodeURIComponent(query);
          var gvizQuery = new google.visualization.Query(
              'http://www.google.com/fusiontables/gvizdata?tq=' + query);

Now I want to elaborate the query data

gvizQuery.send(function(response) {
      var numRows = response.getDataTable().getNumberOfRows();
      // For each row in the table, create a marker
      for (var i = 0; i < numRows; i++) {
        var stringaddress = response.getDataTable().getValue(i, 0);
        var territory = response.getDataTable().getValue(i,1);
        **latlng**(stringaddress,
        function(data){
          console.log(data);
          **createMarker**(data,territory,stringaddress);//callback
        });
      }
    });

Here is the latlng function: that returns a google maps point from the string address

function latlng(address,callback){
        var latlng;
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
            "address": address
        }, function(results,status) {
           if ( status == google.maps.GeocoderStatus.OK ) { 
            latlng= new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
            callback(latlng);
           }
        });
    }

And finally here is the create marker function

var createMarker = function(coordinate, territory,address) {
        console.log("now drawing marker for " + coordinate + "found in territory number " + territory);
        var markerpath="images/icon"+territory+".png";
          var marker = new google.maps.Marker({   
            map: map,
            position: coordinate,
            icon: new google.maps.MarkerImage(markerpath)
          });
          google.maps.event.addListener(marker, 'click', function(event) {
            infoWindow.setPosition(coordinate);
            infoWindow.setContent('Address: ' + address + '<br>Territory = ' + territory);
            infoWindow.open(map);
          });
        };

The issue I am facing is that ,although I should be calling the createmarker function for each record of my ft, it is actually only being called a couple of times (out of 250) and only one territory is being represented (number 7). What am I mising? Thank you for your help!

Answer 1

The geocoder is subject to a rate limit and a quota, after about 10 geocode operations you will see the status returned of OVER_QUERY_LIMIT (which your code silently ignores). To see the issue, log the status returned:

function latlng(address,callback){
    var latlng;
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        "address": address
    }, function(results,status) {
       if ( status == google.maps.GeocoderStatus.OK ) { 
        latlng= new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
        callback(latlng);
       } else {
         console.log("geocode failed: "+status);
       }
    });
}

(or you could add an alert, which would be really annoying for 200 markers)

You need to handle the OVERY_QUERY_LIMIT appropriately (throttle your requests), but that will probably make your map load too slow.

Best option: geocode the addresses offline and store the coordinates in the FusionTable, return them in your query and use those to display the markers.