KML markers missing on Google Maps API v3: What

问题:

I'm new to the Google Maps API v3 and have been closely reading the documentation.

My map loads fine, but it's not displaying the Placemarks I've set up in my KML file (http://hepac.ca/wp-content/mapping/wellnessnetworks.kml). The KML validates fine at FeedValidator and displays without issue in Google Earth, so I'm assuming it's a problem with my code below.

The placemarks were appearing at one point, but I must have accidentally deleted some crucial code. Thanks in advance for helping!

  function initialize() {

var mapcenter = new google.maps.LatLng(46.36209, -64.73145);
var mapOptions = { 
    zoom: 7,
    center: mapcenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
   };                

google.maps.visualRefresh = true;  

var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);

var ctaLayer = new google.maps.KmlLayer({
    url: 'http://hepac.ca/wp-content/mapping/wellnessnetworks.kml',
    preserveViewport: true,
});
ctaLayer.setMap(map);

}

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

回答1:

If you want to have more than one placemark in a KML file, they need to be in a Document or a Folder:

<kml> can only contain 0 or 1 Feature elements

<Document> can contain 0 or more Feature elements

<Folder> can contain 0 or more Feature elements

http://feedvalidator.org/check.cgi?url=http%3A%2F%2Fhepac.ca%2Fwp-content%2Fmapping%2Fwellnessnetworks.kml

working example

回答2:

This is the code I'm using and it's working for me. Let me know if this helps.

map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
  center: new google.maps.LatLng(50.022, -88.73),
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
    select: "[COLUMN_FROM_YOUR_TABLE]",
    from: "[YOUR_KML_ID]",
    where: ""
  },
  options: {
    styleId: 2,
    templateId: 2
  }
});

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