Google Maps API v3 Icon Sizing & Placement

Posted on 2011-09-13
Medium Priority
Last Modified: 2012-05-12
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...
Question by:saunaG
  • 2
LVL 83

Accepted Solution

leakim971 earned 2000 total points
ID: 36533503
>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 :

Author Comment

ID: 36536035
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.

Author Comment

ID: 36536244
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)

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question