Geek Answers Handbook

Cropped marker icons in Google-Map V3 (Sprite)

I am showing google tokens (V3). To make the icons load faster, all the icons are stored in one sprite. I notice that icons are sometimes cropped (there is no border 1 pixel wide at the bottom or / or right edge). Interestingly, you can scale 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 solution to a problem?

I made the given problem example. This example is also available 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 });
+4
source share
3 answers

You are 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 fine http://jsfiddle.net/skdz6/1/

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

Anyone who knows that it works in v3.10?

+2
source

starting with version 3.11 of the google maps API, the Icon object replaces MarkerImage . The icon supports the same options as MarkerImage.

Token properties are slightly more clearly defined with the version. It worked a lot better for me.

An example might 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) };

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

+2
source

You reduce your icon to half its size, so it will inevitably lose either one border or another, and you will change the 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 );

The documentation is here .

0
source

More articles:


All Articles