Solved

Google Maps API v3 Icon Sizing & Placement

Posted on 2011-09-13
3
633 Views
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...
0
Comment
Question by:saunaG
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
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 : 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
 

Author Comment

by:saunaG
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.
0
 

Author Comment

by:saunaG
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)
      );
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Open dialog with server side controls in it 3 46
How to calculate height of a text using jquery 3 42
Clear input text 15 27
Glitching Slide Show 19 27
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
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.
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…

733 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