CODEWITHSUNDEEP
google-maps-api-3kmlgoogle-earth
Derek
Derek

Reputation: 63

KML Placemark Icon has different anchor point in Google Earth than when loaded in Google Maps, Why?

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>

Upvotes: 0

Views: 837

Answers (1)

Christiaan Adams
Christiaan Adams

Reputation: 1385

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

Upvotes: 1

Related Questions