Google Maps API Custom Markers

Question

I am trying to create a map using custom marker icons of various shapes and colors. I have the code working such that I can use any single marker for all locations, but not different markers for different locations. I am currently programming this into a FileMaker Pro solution however I'm writing the code in Javascript. I am new to Javascript and I'm picking things up as I go, but below is the code I have so far:

var concus = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/red_customer.png';
var rencus = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/purple_customer.png';
var sercus = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/green_customer.png';
var connon = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/red_noncustomer.png';
var rennon = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/purple_noncustomer.png';
var sernon = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/green_noncustomer.png';

var imagenum;

var markers = [];
for (var i = 0; i < data.length; ++i) {
  var latlng = new google.maps.LatLng(data[i].latitude, data[i].longitude);
  var marker = new google.maps.Marker({position: latlng, map: map, icon: markerimage[i], title:data[i].label, info:data[i].info});

  markers.push(marker);
}

"markerimage" after "icon: " is the array which stores the values "concus, rencus, sercus...etc" from my database. If i replace "markerimage" with any of the specific ones the script works and shows me a map with all the locations on them. If I use markerimage I only get a map with nothing on it.

Any help would be greatly appreciated!

Zak

i'm trying to use different markers for different locations, not the same one for multiple locations. — ZSButcher
Did you look at that the answer to that example? Each marker has a different icon. Or do you mean something different by "different markers for different locations"? — geocodezip

Unknown Unknown · Accepted Answer · 2013-07-15T18:44:57

Try this:

var iconBase = 'Dropbox/FileMaker Pro Files/FileMaker Pro Contract Bid Files/Images/';

var icons = {
  concus: {
    icon: iconBase + 'red_customer.png'
  },
  rencus: {
    icon: iconBase + 'purple_customer.png'
  },
  sercus: {
    icon: iconBase + 'green_customer.png'
  },
  connon: {
    icon: iconBase + 'red_noncustomer.png'
  },
  rennon: {
    icon: iconBase + 'purple_noncustomer.png'
  },
  sernon: {
    icon: iconBase + 'green_noncustomer.png'
  }
};


function addMarker(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    icon: icons[feature.type].icon,
    map: map
  });
}

Google Maps API Custom Markers

1 Answers