В настоящее время на многих сайтах используют спрайты. CSS-спрайт это одно объединенное изображение состоящие из множества мелких изображений. Спрайты нужны для того чтобы сократить количество обращений к серверу.

Для того чтобы потом показать одно изображение, используют контейнер нужного размера и background-position. В данном посте речь пойдет об использовании спрайтов в google картах. Достаточно часто встречаются сервисы основанные на google API с большим количеством разных маркеров, где просто напрашивается использование спрайтов.

Для создания простого маркера достаточно указать URL изображения которое будет использоваться в качестве маркера. Размер значка будет установлен автоматически. В нашем случае этого недостаточно. Для использования спрайта в маркерах мы будем использовать объект Icon. Для объекта Icon можно определить размер (size) значка, происхождение (origin) значка (например, если нужное изображение является частью более крупного изображения), а также точку привязки (anchor) значка (основанную на происхождении).

google.maps.Marker({
      position: {lat: ..., lng: ...},
      map: map,
      icon: image,
      title: square[0],
      zIndex: square[3]
    });

Где объект image:


var image = {
//картинка спрайта
    url: 'http://site-nsc.ru/wp-content/uploads/2016/03/map-pins.png',
// размер спрайта
    size: new google.maps.Size(xSize,ySize),
// смещение background-position
    origin: new google.maps.Point(xOrigin, yOrigin),
// Координаты якоря
    anchor: new google.maps.Point(0, 15)
  };

Ссылка на живой пример