CODEWITHSUNDEEP
google-maps-api-3kml
PeterJ
PeterJ

Reputation: 3788

Google KmlLayer not displaying custom marker

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

Upvotes: 1

Views: 10830

Answers (1)

geocodezip
geocodezip

Reputation: 161404

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

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.

Upvotes: 2

Related Questions