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?

When you want to load 1 image, it must be loaded(via HTTP). When you want to load 100 images, 100 images must be loaded via HTTP. Trust in the browsers caching-mechanism, that's all you can do. — Dr.Molle
Unless you find a way to save the icon marker locally, that is the URL path to the marker icon. And yes, it is called/fetched each time you draw a marker on your map. — Andrew - OpenGeoCode
Good point from Dr. Molle. The icon will likely be cached and the URL only called once in a browser session. — Andrew - OpenGeoCode
Well, worst case scenario I will have 2000 balloon markers. So I dont really want to have it make an HTTP call 2000 times. I feel as if this may invoke some type of bottle neck. Similar to web page that reuses images on a single page, I would imagine they would only be downloaded to the client one time if everything was referenced correctly. — user2524908

Jason Nichols Jason Nichols · Accepted Answer · 2013-11-14T17:03:15

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.

Google maps marker icon as variable

1 Answers