Google Maps Polygon with Placemarks from .kml files (using geoxml3 & kmllayer)

Question

I am trying to incorporate Polygon layer and Placemarks layers into the same map.

However, after loading a Polygon layer from a .kml file using the geoxml3 parser.

I tried to load a few Placemarks layers and it was a success, however the Placemarks seems to be below the Polygons.

Tried searching online and tried the suggestion of loading layers only after parsing, but did not work. Also tried zIndex on kmllayer, but does not work as well.

What can I do to make the Placemarks appear on top of the Polygons?

A short portion of my code is shown below.

var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: center
});

var geocoder = new google.maps.Geocoder();
var geoXml = new geoXML3.parser({
    map: map,
    singleInfoWindow: true,
    zoom : false,
    afterParse: loadPlacemarks
});
geoXml.parse('Polygons.kml');

function loadPlacemarks() {
    var src = "http://xxx.xxx.xxx.xxx/Placemarks.kml";
    var kmlLayer = new google.maps.KmlLayer(src, {
        suppressInfoWindows: false,
        preserveViewport: true,
        map: map,
        zIndex: 999
    });
}

KmlLayer will always appear under the native Google Maps API objects created by geoxml3. One option would be to load your markers with geoxml3 as well as the polygons. — geocodezip, Oct 27 '16 at 19:04
[Two geoxml3 "layers", one with polygons, one with markers; markers on top](http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/tanagerproductions_locations_kml.xml,http://www.geocodezip.com/geoxml3_test/us_states.xml) — geocodezip, Oct 28 '16 at 00:42
@geocodezip I see, no wonder I couldn't get the placemarks on top no matter what. But problem is I only know how to load Polygons using geoxml3, and load Placemarks using kmlLayer. — Jeffrey, Oct 28 '16 at 01:14
If they are both KML files, you load them the same way. There are lots of examples of multiple KmlLayers, I have examples of loading multiple KML files with geoxml3 on my website. — geocodezip, Oct 28 '16 at 01:24

geocodezip · Accepted Answer · 2020-05-22T22:12:46.377

The simplest option is to load both KML files using the same technique (either KmlLayer or geoxml3).

To load both using KmlLayer (need to be publicly available URLs):

// Polygons
var kmlLayer1 = new google.maps.KmlLayer({
  map: map,
  preserveViewport: true,
  url: "http://www.geocodezip.com/geoxml3_test/us_states.xml"
});
// markers 
var kmlLayer2 = new google.maps.KmlLayer({
  map: map,
  preserveViewport: true,
  url: "http://www.geocodezip.com/geoxml3_test/tanagerproductions_locations_kml.xml"
});

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': "United States"
  }, function(results, status) {
    if (status === 'OK') {
      map.fitBounds(results[0].geometry.viewport);

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
  var kmlLayer1 = new google.maps.KmlLayer({
    map: map,
    preserveViewport: true,
    url: "http://www.geocodezip.com/geoxml3_test/us_states.xml"
  });
  var kmlLayer2 = new google.maps.KmlLayer({
    map: map,
    preserveViewport: true,
    url: "http://www.geocodezip.com/geoxml3_test/tanagerproductions_locations_kml.xml"
  });
  // http://www.geocodezip.com/geoxml3_test/tanagerproductions_locations_kml.xml,http://www.geocodezip.com/geoxml3_test/us_states.xml

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

To load them both by geoxml3 (example):

geoXml = new geoXML3.parser({
  map: map,
  infoWindow: infowindow,
  singleInfoWindow: true
});
geoXml.parse([
  "http://www.geocodezip.com/geoxml3_test//OrlandoNeighborhoods_boundaries_kml.xml",
  "http://www.geocodezip.com/geoxml3_test//OrlandoNeighborhoods_Points_kml.xml"
]);

Google Maps Polygon with Placemarks from .kml files (using geoxml3 & kmllayer)

1 Answers1