Question

I’m using javascript and v3 of the maps API to pull some data from a Fusion Table. I’ve successfully added some custom markers to certain points but am now trying to get the markers I create to ‘default’ to the icon specified from a column in my tabled called ‘Icon’. I’m NOT using a fusion tables layer but rather creating markers in a for loop from the data. The Icon column in my table has entries like: ‘poi’, ‘star’, etc…

Is there any way to use a name string to somehow get those ‘default’ icons like the fusion table layer would? Alternatively, does anyone know where I could find the absolute locations of the default fusion table icons (such as POI, and Star) so I could define the path to them in my script?

Here is some example code. If anyone knows the absolute URL’s for the icons on google I could just write a function to input that based on the string from the ‘Icon’ column.

      //if there's an image, use it as marker, else use default      
  if(row[3] != ''){
      // Create the marker
      var marker = new google.maps.Marker({
        map: map, 
        position: coordinate,
        icon: new google.maps.MarkerImage(row[3])
      });      
  } else {
      // Create the marker
      var marker = new google.maps.Marker({
        map: map, 
        position: coordinate

        //icon: row[2] (row[2] is the Icon column. 
        // I'm assuming I'll just need a conditional to check
        // for the name (such as 'poi') and then to put in the absolute URL for each respectively
        // the problem is I don't know the absolute URL's for these icons. Thanks.
      });
        }

Answer 1

I was looking to do almost this same exact process. Though, what I did was simply have my column in the Fusion Table describe the marker, so, in your case, that would be “Poi,” “Star,” etc. Mine were “photo,” “video,” “song.” Then, code as follows:

  var image = new google.maps.MarkerImage('img/CF_Orange.png',
  new google.maps.Size(25, 25),
  new google.maps.Point(0,0),
  new google.maps.Point(12.5,12.5));

  var image2 = new google.maps.MarkerImage('img/CF_Purple.png',
  new google.maps.Size(25, 25),
  new google.maps.Point(0,0),
  new google.maps.Point(12.5,12.5));

  var image3 = new google.maps.MarkerImage('img/CF_Green.png',
  new google.maps.Size(25, 25),
  new google.maps.Point(0,0),
  new google.maps.Point(12.5,12.5));

if(row[5] == 'photo'){
  var marker = new google.maps.Marker({
    map: map, 
    position: coordinate,
    icon: image
  });      
} else if(row[5] == 'video'){
  var marker = new google.maps.Marker({
    map: map, 
    position: coordinate,
    icon: image2
  });
} else {
  var marker = new google.maps.Marker({
    map: map, 
    position: coordinate,
    icon: image3
  });
    }