Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 82

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

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

636 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