Google KmlLayer not displaying custom marker

google-maps-api-3 kml

10,766

The KML you have posted doesn't work with either Google Maps or KmlLayer even after I make it validate

Your KML on Google Maps - Blue default marker
Your KML on Google Maps API v3 map - Blue default marker

For what it is worth, it does work with geoxml3

Your version does have an invalid schema (at least according to feedvalidator)

UPDATE: The problem is with the location of the definition of the shared styles.

This works and on Google Maps

The Style definition didn't work where you had it. Shared styles look like they have to be in a Document.

10,766

Author by

PeterJ

Director of Telemetry2U Pty Ltd a company specializing in LoRaWAN IoT solutions with a turnkey web based monitoring platform.

Updated on June 04, 2022

Comments

PeterJ almost 2 years

I've written an R script to create a KML file and the resultant KML below loads icon18.png fine when viewed in Google Earth:

   <kml xmlns:xsd="http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd" xmlns:xmlns="http://www.opengis.net/kml/2.2/" version="1.0">
      <Document>
        <name>Member locations</name>
    <open>1</open>
    <Folder>
      <name>SpatialPointsDataFrame</name>
      <Style id="pnt1">
        <IconStyle>
          <Icon>
            <href>http://maps.google.com/mapfiles/kml/pal2/icon18.png</href>
          </Icon>
        </IconStyle>
        <BalloonStyle>
          <text>$[description]</text>
        </BalloonStyle>
      </Style>
      <Placemark>
        <name>1</name>
        <styleUrl>#pnt1</styleUrl>
        <Point>
          <extrude>1</extrude>
          <altitudeMode>clampToGround</altitudeMode>
          <coordinates>151.26250,-33.89374,0</coordinates>
        </Point>
      </Placemark>
    </Folder>
  </Document>
</kml>

However when loaded into a KmlLayer using the maps API and the following code it displays as the default blue 'teardrop' marker:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
    var ctaLayer = new google.maps.KmlLayer('http://www.peter-johnson.com.au/test.kml');
    ctaLayer.setMap(map);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Looking at other questions here I could only see ones posted without code that went unanswered or some related to the web server not being publically available. A few indiciated there problem was now OK so I guess loading custom icons into a KmlLayer is supported but I have some problem with the KML format or the way I'm loading it?

As suggested in a comment I've just placed the KML in a publically available area here:

http://www.peter-johnson.com.au/test.kml

And here is the HTML:

http://www.peter-johnson.com.au/test.htm