Home/ Questions/Q 935193
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T21:07:09+00:00

I’m working on an advanced map application in Google Maps API V3. I’m using

  • 0

I’m working on an advanced map application in Google Maps API V3. I’m using an array of lettered markers for the pins on the map (A-J). I’ve written some jQuery to grab add a different class to each div that contains the marker as a background image so that I can animate the markers. Here’s the code I’m using to do this:

$('.markersHolder > div').each(function(){
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerA.png)'){
             $(this).addClass('marker0');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerB.png)'){
             $(this).addClass('marker1');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerC.png)'){
              $(this).addClass('marker2');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerD.png)'){
              $(this).addClass('marker3');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerE.png)'){
              $(this).addClass('marker4');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerF.png)'){
              $(this).addClass('marker5');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerG.png)'){
              $(this).addClass('marker6');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerH.png)'){
              $(this).addClass('marker7');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerI.png)'){
              $(this).addClass('marker8');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerJ.png)'){
              $(this).addClass('marker9');
              return false;
           }
         });

This works perfectly in Firefox but doesn’t work in other browsers. Anyone have any clue how to get this to work in other browsers? Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this. It should find the “MarkerA” (etc.) portion of the url of the background-image and if it finds it, add the class using the character code of the capital letter to calculate your 1, 2, 3, etc. on your “marker” class (I have not tested it):

    $('.markersHolder > div').each(function(){

   var mark = $(this).css('background-image').match(/Marker./);
   if(mark) {
     $(this).addClass("marker"+(mark[0].charCodeAt(mark[0].length-1)-65));
   }
});

    Added this on edit:

    If you match the class name to the image name as mcgrailm suggested in the comment to Pekka then it could be just:

    $('.markersHolder > div').each(function(){
   var mark = $(this).css('background-image').match(/Marker./);
   if(mark) {
     $(this).addClass(mark[0]);
   }
});
    • 0