Google Maps API v3 Icon Sizing & Placement

I am trying to create and display icons on a map within a loop using the code:

   var image = new google.maps.MarkerImage(iconfile,
   new google.maps.Size(myiconsize,myiconsize));

    var marker = new google.maps.Marker({
        position: point,
        map: map,
        title: html,
        icon: image
    });

Where iconfile contains a string pointing to the url of the icon file and myiconsize is a variable
that holds an integer value that relates to the size of the icon I want to display

What appears to happen is that the icon is positioned in such a way that only the upper left quadrant of the icon is displayed.

It is as if the icon is centered on intersecting vertical/horizontal lines and the only part displayed is that to the left of the vertical axis and above the horizontal axis.

I see some suggestions on how to use new google.maps.Point(number,number) but can't get it to work -
for example
var image = new google.maps.MarkerImage(iconfile, new google.maps.Size(myiconsize, myiconsize), new google.maps.Point(0,myiconsize));

It is not clear to me anyway what new google.maps.point() is supposed to do anyways...
saunaGAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
>It is not clear to me anyway what new google.maps.point() is supposed to do anyways...

Your image may contains multiple icons, for example check this one : http://www.benjaminkeen.com/images/googlemaps_markers.jpg
As you can see you've more than one icons. So with google.maps.point() you can specify the coordinates (origin x,y) of the one you want to pick, a sprite.

Some examples :
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26841371.html
http://www.experts-exchange.com/Microsoft/Development/MS_Access/Q_27217573.html
0
 
saunaGAuthor Commented:
Thanks for that - after more investigating it seems that when I try to size my icons using

new google.maps.Size(myiconsize,myiconsize)

rather than making the icon bigger or smaller, i am only showing the upper left part of the icon depending on the value of myiconsize

ALL my icons are 48x48 pixels, in the API V2 i could specify the size of the icon and it would shrink or grow proportionally using the number of pixels I wanted to use.

How do i get this to happen in API V3?  

So if i have  new google.maps.Size(12,12) rather than displaying my icon at one quarter the size, it displays only the part of the icon 12 pixels from the top and 12 pixels from the left.
0
 
saunaGAuthor Commented:
So this works:
  var image = new google.maps.MarkerImage(iconfile,
      // This icon is 48 pixels wide by 48 pixels tall.
      new google.maps.Size(48,48),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the bottom right
      new google.maps.Point(0, myiconsize),
      // The scaled size for this image
      new google.maps.Size(myiconsize,myiconsize)
      );
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.