Cannot load KML file - google-maps-api-3

Question

Good Day,
Why I cannot load KML file made in My maps to my site ?
here is the code i'm using
map = new google.maps.Map(document.getElementById("mapa"), mapOptions),
json = JSON.parse($.trim($('#json .content').html())).nodes,
markers = [],
centerControlDiv = document.createElement('div'),
centerControl = new ControlesMapa(centerControlDiv, map);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.santos.sp.gov.br/mapadeobras/sites/all/themes/mapadeobras/kml/bairros.kml',
map: map
});
when i tried with the file from example. It worked fine
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
I have tested the kml file on google validator and it's ok. The kml file is public as I've read here in another post.
Please Help

Answer 1

This works. Try specifying the center of the area of interest if it does not auto-jump to the region as defined in KML.
code snippet:
function initialize() {
var location = new google.maps.LatLng(-23.954785,-46.348161);
var mapOptions = {
zoom: 11,
center: location
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.santos.sp.gov.br/mapadeobras/sites/all/themes/mapadeobras/kml/bairros.kml',
map: map
});
}
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"></script>
<div id="map-canvas"></div>