Google maps marker icon as variable

Question

Creating a google map visualization. Currently i am using an API to pull down colored markers using a URL from google; the base url is http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|

From here you can attach a color code to this URL like so; http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|008000

I would like to store these in some type of javascript variable so that I only have to call this URL 1 time instead of 100 times for each marker.

Current code which does not work.

 var highPin = http: //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|008000; 
  var lowPin = http: //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00; 
  var medPin = http: //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569;

  balloons[1] = {
      center: new google.maps.LatLng(67.1679, 18.3974),
      id: 1,
      pin: highPin,
      addr: '00602',
      txt: 'stuff'
  };

  var bInfo = new google.maps.InfoWindow();

  for (i in balloons) {
      var balloonOptions = {
          map: map,
          id: balloons[i].id,
          position: balloons[i].center,
          icon: balloons[i].pin,
          infoWindowIndex: i
      };

      bMarker = new google.maps.Marker(balloonOptions);
      google.maps.event.addListener(bMarker, 'click', (function (bMarker, i) {

          return function () {
              if (bInfo) {
                  infoWindow.close();
                  tInfo.close();
                  bInfo.close();
              }
              bInfo.setContent(balloons[i].txt);
              bInfo.setPosition(balloons[i].center);
              bInfo.open(map);
          }
      })(bMarker, i));
  }

This seems to kind of resolve the issue.

var highPin = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|008000'; 
var lowPin = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00'; 
var medPin = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569';

But I think the URL is still called for each pin. Is there a way I can perform this action and only have to call the URL 1 time?

Answer 1

This is not valid JavaScript:

var medPin = http: //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569;

You're commenting out everything after the colon ( : ).

var lowPin = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00'; 

is correct, and as pointed out in the comments, each unique image is fetched once and only once, and then cached by the browser to be reused.

That would be true no matter how you accessed it.

Also, the icon property only accepts a string, so even if you created a new JavaScript Image object properly, you couldn't pass it to the icon property anyway.

For the record, to create an Image Object, you would use the syntax:

var medPin = new Image();
medPin.src = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00';

See MDN for more info on images.