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
    });
}

Answer 1

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"
]);