Google Maps API v3 Icon Sizing & Placement

Posted on 2011-09-13
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 82

Accepted Solution

leakim971 earned 500 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 :
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now