Cropped Marker-Icons in Google-Map V3 (Sprite)

Question

I show on a Google map (V3) markers. So that the icons be loaded faster, all the icons are stored in one sprite. I notice that the icons are sometimes cropped (at the bottom or / and on the right edge is missing a 1 pixel wide border). Interestingly, you can zoom the map, and then the problem disappears. Is this a Google bug or am I doing something wrong. The problem occurs with Firefox, Chrome and IE.

Has anyone had a similar experience or a solution for the problem?

I made a reduced example of the problem. This example can also be accessed online: http://www.gps-tracks.com/MarkerIconSpriteProblem.aspx

var markerIcon = new google.maps.MarkerImage(
  "pictures/NetzCats/C03-MapSpritesS03.png",
  new google.maps.Size(20, 16),
  new google.maps.Point(140, 1600),
  new google.maps.Point(10, 8)
  //new google.maps.Size(20, 16)
);

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Hello World!',
  icon: markerIcon
});

score 2 · Accepted Answer · answered Dec 10 '12 at 20:30

2

You're using v3.10 http://jsfiddle.net/skdz6/

src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"

With version 3.9 everything is OK http://jsfiddle.net/skdz6/1/

src="https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"

Someone who knows to get it working in v3.10?

answered Dec 10 '12 at 20:30

jimmy

314
2
8

**PROBLEM SOLVED** Since today (11 dec 2013) it's working in both versions. So I think google fixed a bug in v3.10 – jimmy Dec 11 '12 at 11:57
That's right - Google seems to have recognized the problem and solved. Also in the "big" project now everything is working properly. Thanks for the support. – Christian Steiner Dec 12 '12 at 08:05

score 2 · Answer 2 · answered Jan 21 '14 at 20:40

since version 3.11 of the google maps API, the Icon object replaces MarkerImage. Icon supports the same parameters as MarkerImage.

The properties of the marker are a bit more clearly defined since version. For me this worked much better.

An example could look like this:

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

for further information check this site: https://developers.google.com/maps/documentation/javascript/markers

Marcelo · Answer 3 · 2012-12-09T16:07:17.337

0

You are scaling your icon down to half its size, so it will inevitably lose either one border or the other, and you're exchanging Size and Point, as well as the order of the properties.

Try this instead:

   var markerIcon = new google.maps.MarkerImage(
      new google.maps.Point(5, 8), // anchor (POINT)
      new google.maps.Point(140, 1600),//<====== origin (POINT)
      new google.maps.Size(10, 8), //<======scaledSize (SIZE)
      new google.maps.Size(20, 16), //<====== Size (SIZE)          
      "pictures/NetzCats/C03-MapSpritesS03.png" //URL
    );

Documentation here.

edited Dec 09 '12 at 16:07

answered Dec 09 '12 at 15:33

Marcelo

9,387
3
35
40

As a heads up, the [MarkerImage class](https://developers.google.com/maps/documentation/javascript/reference#MarkerImage) is depracated in favor of [Icon](https://developers.google.com/maps/documentation/javascript/reference#Icon) – geocodezip Dec 09 '12 at 22:14

Cropped Marker-Icons in Google-Map V3 (Sprite)

3 Answers3