0

I have a KML file containing placemarks with custom icons.

When viewed in Google Earth the anchor point is center of the icon. Like this ...

enter image description here

When the KML file is viewed in Google Maps on my website, the anchor point changes to be the bottom center of the icon. Like this ...

enter image description here

Why is this? And how do I change it so that when loaded by Google Maps API the anchor point is in the center of the icon?

Here is the styling in the KML file ...

<Style id="Parking">
    <IconStyle><Icon><href>http://www.virtualmountains.co.uk/shared/Parking.png</href></Icon></IconStyle>
    <BalloonStyle>
        <text>$[description]</text>
        <bgColor>white</bgColor>
        <text><![CDATA[
            <font color="#674A32" face="arial" align="justify">$[description]</font>
        ]]></text>
    </BalloonStyle>
    <LabelStyle>
        <color>FFFFFFFF</color>
        <scale>0.8</scale>
    </LabelStyle>
</Style>

Here's the placemark code ...

<Placemark>
    <name>A5 Parking, Tryfan</name>
     <description>        
        <![CDATA[
            <DIV style="max-width:400px; margin-right:10px; margin-bottom:10px; color:#674A32; font-family:Arial">
                <DIV style="font-size:11pt; font-weight:bold; text-align:left">A5 Parking, Tryfan<BR></DIV>
                <DIV style="font-size:10pt; text-align:justify"><BR>
                    There is a parking here alongside a great length of the A5.
                </DIV>
            </DIV>
        ]]>
    </description>
    <styleUrl>#Parking</styleUrl>  
    <Point><coordinates> -3.991196, 53.125136,0</coordinates></Point>
</Placemark>
geocodezip
  • 158,664
  • 13
  • 220
  • 245
Derek
  • 53
  • 8
  • Please provide a [mcve] that demonstrates the issue (complete KML). Have you tried defining the anchor in the KML? – geocodezip Oct 31 '21 at 17:26
  • Possible duplicate of [Google maps API V3 ignoring icon hotSpot tag in KML IconStyle](https://stackoverflow.com/questions/40415502/google-maps-api-v3-ignoring-icon-hotspot-tag-in-kml-iconstyle) – geocodezip Oct 31 '21 at 17:47
  • Thanks geocodezip, seems from following the above link to duplicate issue and on to https://issuetracker.google.com/issues/35830017?pli=1 this appears an on going bug. – Derek Nov 01 '21 at 20:28

1 Answers1

1

You can specify the anchor point or "hotspot" for a Placemark's icon in the KML as part of the <IconStyle>. The <hotspot> tag allows you to specify the anchor point on the icon either using fraction (0 to 1) or pixel dimensions, in the x (left/right) and y (up/down) directions.

For example, if you want to make your icons anchor in the center of each one, you would make your IconStyle look like this:

<IconStyle>
  <Icon>
    <href>http://www.virtualmountains.co.uk/shared/Parking.png</href>
  </Icon>
  <hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction">
</IconStyle>

That should work for KMLs both in Google Earth and in Google Maps.

You can find the documentation for the <hotspot> tag in the KML reference, here: https://developers.google.com/kml/documentation/kmlreference#hotspot

Christiaan Adams
  • 1,257
  • 1
  • 7
  • 13
  • Should work for Google Maps, but doesn't. See https://issuetracker.google.com/issues/35830017 – geocodezip Nov 02 '21 at 14:23
  • Thanks Christiaan, this is the code I was missing, but as geocodezip says, is not working for some reason, though I did try just in case it has been fixed. – Derek Nov 04 '21 at 12:23