KML and custom icons being resized

894 views
Skip to first unread message

PaulG

unread,
Jun 17, 2010, 12:02:28 PM6/17/10
to Google Maps JavaScript API v3
My own small icons are being resized after they are defined in a kml
file.

There is an issue open which is very similar to my point:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=2444

I while I get them to load as part of my kml style rules, Gmaps is
somehow resizing them.

There exists a kml >> iconStyle >> scale which is not supported in
maps v3 according to this table:

http://code.google.com/apis/kml/documentation/kmlelementsinmaps.html

a) Does anyone know of a possible work-round for this? Can I have my
13x14 and 14x22 icons showing at the correct size?

b) Should I mention on that issue that it is seemingly the non-support
of "scale" which is causing the problem?

Heres some links:

http://www.councilsites.co.uk/_kml.htm
http://www.councilsites.co.uk/_carparks.kml

Nathan Raley

unread,
Jun 17, 2010, 12:10:38 PM6/17/10
to google-map...@googlegroups.com
I'm not 100% sure if I am on the right track with you on this as I'm not sure how your creating your different markers with the different images/image sizes.

Are you using the same marker and just different images with different image sizes for the marker or are they different markers entirely?  I say this b/c when you create a marker and set its image size property, the image size for that marker is set, this has been like this since api v2.  

There was another post earlier with a similar situation to yours.  After setting his other marker's image to that of the smaller image it would crop and adjust it to the size of the original marker image size.  He had to refresh the map and it showed the uncropped/unresized images he wanted.

If your simply having problems defining a marker's image size the icon properties have more or less been replaced in version 3 of the api.  You no longer user setImage but instead use setIcon and you can pass the setIcon either a string for an image location or a MarkerImage.  If you create a MarkerImage you can define the image, size, and everything else you had defined in v2 of the api in the Icon properties.


--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


PaulG

unread,
Jun 17, 2010, 12:43:05 PM6/17/10
to Google Maps JavaScript API v3
> Are you using the same marker and just different images with different image
> sizes for the marker or are they different markers entirely?  I say this b/c
> when you create a marker and set its image size property, the image size for
> that marker is set, this has been like this since api v2.

Thanks for replying, I am defining the icon in the kml file.

I find this a very clean way of packaging and managing several layers
of data along with their associated icons and descriptive data - and
is the avenue I would prefer to go down.

I am sorry but I am not following your other comments because - In my
head - I am setting some "style rules" for my icons which look for all
the world like css styles, but in fact are just packaged instructions
which are zipped off to Google to make sense of, cache for a while and
to send back along with the tiles.

My understanding it that those icons are no longer available for me to
intercept or fiddle around with in JS in the way I would do in v2, and
I understand that is one of the prices to pay for all the other
simplicity and goodness that Gmaps V3 + kml can bring.

Is my perception wrong?

Nathan Raley

unread,
Jun 17, 2010, 1:04:00 PM6/17/10
to google-map...@googlegroups.com
You are right.  They replaced Icon more or less with MarkerImage.  MarkerImages give us a lot more control than we simply had with Icons, but it does require us to change things up quite a bit as the changes can be rather different between setting the old Icon display properties and that of the MarkerImage.

What I was trying to get at is if you create a marker myMarker and set its properties and then later use myMarker again, it is going to retain the size properties that you had defined earlier, so you need to ensure you are in fact creating unique markers when you create them.  I like to read my markers from some sort of data, I'm using a database that I am reading from my c++ code but xml is great as well, and then push those markers into an array that I can then keep tabs of them on and make adjustments, etc.

What you should do is read your xml style information for the markers that you are wanting to create and create individual MarkerImages based on the different types of images/styles you will be wanting to use.  Then create a marker and set its Icon to the MarkerImage you had defined, and you should be up and going.  As I've said MarkerImage and Icon are different but they are similar enough that if you read through the documentation you should pick up on it rather quickly.


--

PaulG

unread,
Jun 17, 2010, 1:22:02 PM6/17/10
to Google Maps JavaScript API v3
Thanks for your courtesy in explaining all of that to me.

I do admit I am struggling to grapple with some kind of ball I have
dropped between V2 and V3, likely much to do with terminology as
anything else.

I'll read again with your comments in mind.

Thanks

Nathan Raley

unread,
Jun 17, 2010, 1:38:36 PM6/17/10
to google-map...@googlegroups.com
Yea, I was in the same boat last week and early into this week.  I migrated a huge project of mine for v2 to v3 of the api and it was giving me some headaches until I started really diving into it and getting more used to it.

Just do some reading on Markers and MarkerImages and you'll catch up on most of the new stuff that you may have missed with regards to manipulating the images and sizes of the markers and just think of it in terms that MarkerImage is just a beefed up version of Icons and is used now in place of them.


--

William

unread,
Jun 17, 2010, 5:40:56 PM6/17/10
to Google Maps JavaScript API v3
On Jun 18, 2:02 am, PaulG <foofoo...@gmail.com> wrote:
> a) Does anyone know of a possible work-round for this? Can I have my
> 13x14 and 14x22 icons showing at the correct size?
>
a workaround is to create a 32x32 transparent icon in photoshop and
paste your smaller icon in the center. It will have a lot of
transparent area but will show at the correct size. For example the
14x22 would have an extra 9 transparent pixels on each side and 5
pixels top and bottom.

...

William

unread,
Jun 17, 2010, 6:33:56 PM6/17/10
to Google Maps JavaScript API v3
On Jun 18, 2:02 am, PaulG <foofoo...@gmail.com> wrote:
>
> There exists a kml >> iconStyle >> scale which is not supported in
> maps v3 according to this table:
>
> http://code.google.com/apis/kml/documentation/kmlelementsinmaps.html
>
<scale> doesn't work but I think you will have to use the <hotSpot> in
the <IconStyle> to position the icon, if you use the workaround of
making the icons 32x32 with transparent pixels surrounding the actual
icon.

http://code.google.com/apis/kml/documentation/kmlreference.html#iconstyle

...

James McGill

unread,
Jun 17, 2010, 10:17:27 PM6/17/10
to google-map...@googlegroups.com
As noted by William, only 32 x 32 pixel icons are supported in KmlLayer.

Regards,
James McGill
Google Employee

PaulG

unread,
Jun 18, 2010, 9:48:25 AM6/18/10
to Google Maps JavaScript API v3
William - thanks, I woke up thinking about that this morning and was
worried that the "live" are would extend around the icon, 32x32 -
ahah! hotSpot, great thanks for taking the time to point that out to
me.

James - thanks for the confirmation

Makes me wonder what will happen with the "new enhancement suggestion"
I mentioned earlier.

http://code.google.com/p/gmaps-api-issues/issues/detail?id=2444

PaulG

unread,
Jun 19, 2010, 8:16:22 PM6/19/10
to Google Maps JavaScript API v3
Just to update this thread with what I discovered after playing around
with the values;

The "hotSpot" tag withing IconStyle does not do what had I first
imagined, that is, work like a html hotspot on an old-fashioned image
map.

It contains settings which allow you to specify the position your icon
lines up against the lat, lng point on the map it is fixed to.

I had created quite small icons to compete for users attention roughly
at the same level as the Google bus stop icons on the map base, they
held information but it was more "supporting information", hence their
size of 12x20 pixels (with their shadow).

This worked very well in Gmaps V2, and I can simulate it in V3 as
William points out their live clickable area extends to 32x32 pixels.

So if you are in the same boat creating an icon less that 32x32, open
up your original image, put it onto a 32x32 transparent square, slide
the shadow under your icon (you might as well), save it and put it
online where Google can get to it. Manipulate the hotSpot values if
you need to nudge the icon in any particular direction otherwise it
fixes itself at bottom-left-corner.
http://code.google.com/apis/kml/documentation/kmlreference.html#iconstyle

Dizzy B High

unread,
Nov 12, 2010, 6:31:02 AM11/12/10
to google-map...@googlegroups.com
you can use a shape  parameter when building the marker which allows you to set up a clickable area for the marker:

is as an object {'type': 'square' or 'circle' } have not used these so i dont know if they take extra params for diameter size etc

you can also use 'poly' if you do the object is slightly diffirent:

var iconshape = { type : 'poly', coord: [0,2,1,2,1,1,18,0,18,1,19,2,20,19,19,19,18,21,14,21,10,26,5,21,1,21,1,20,0,20,0,2]}
where coord is the image map data


///SAMPLE CODE

var iconshape = {
            type: 'poly',
            coord: [0,2,1,2,1,1,18,0,18,1,19,2,20,19,19,19,18,21,14,21,10,26,5,21,1,21,1,20,0,20,0,2]
        }

        var iconimage = new google.maps.MarkerImage(
            'mymarkerimage.png', // The marker image
            new google.maps.Size(32, 37), // The Size of the image
            new google.maps.Point(0, 0), // The origin (used if using sprites) can be set to null
            new google.maps.Point(13, 29) // The anchor point for the icon
        );
        var iconshadow = new google.maps.MarkerImage(
           ' mymarkershadow.png', // The shadow image
            new google.maps.Size(42, 18), // The Size
            new google.maps.Point(0, 0), // The origin
            new google.maps.Point(13, 18) // The anchor
        );
       
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'custom marker',
            icon: iconimage,
            shadow: iconshadow,
            shape: iconshape
        });

hope thats of help
Reply all
Reply to author
Forward
0 new messages