KMZ custom placemark icons not showing up

Question

I am trying to make a KMZ file with a bunch of placemarks, it wasn't working with multiple place marks so I thought I would test it with just one and try to figure that out first, simple file, this is all it is:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>

<Style id="My_Style">
<IconStyle> <Icon> <href>square.png</href> </Icon></IconStyle>
</Style> 

  <Placemark>
    <name>Brandonville_Horvath_Twr : Brandonville_Horvath Twr</name>
    <styleUrl> #My_Style</styleUrl>
    <Point>
      <coordinates>-76.21347,40.82783,0</coordinates>
    </Point>
  </Placemark>


</Document>
</kml>

I then throw this kml file in a folder with this 64x64 pixel red square png file and zip the folder up, name it test.kmz, and import it into google earth. For some reason, it is showing the red x's, and I haven't been able to find an answer online as to some common mistakes for this.

geocodezip · Answer 1 · 2020-09-02T22:57:01.557

Per the documentation, put the embedded images for icons in a directory in the KML, then reference them including that directory name:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>

<Style id="My_Style">
<IconStyle> <Icon> <href>files/square.png</href> </Icon></IconStyle>
</Style> 

  <Placemark>
    <name>Brandonville_Horvath_Twr : Brandonville_Horvath Twr</name>
    <styleUrl>#My_Style</styleUrl>
    <Point>
      <coordinates>-76.21347,40.82783,0</coordinates>
    </Point>
  </Placemark>


</Document>
</kml>

The zip file structure looks like this:

live example

code snippet:

"use strict";

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: {
      lat: 41.876,
      lng: -87.624
    }
  });
  const ctaLayer = new google.maps.KmlLayer({
    url: "http://www.geocodezip.com/geoxml3_test/kmz/SO_20200902_embeddedImage_filesB.kmz",
    map: map
  });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>KML Layers</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

KMZ custom placemark icons not showing up

1 Answers1