Panotour Pro 2 - Adding KML in Google Maps API v3 - google-maps

Question

I have been working with the Google Maps API v3 in Panotour for a few days now and had been adding my own KML layers to my Panotour Maps. I had it working yesterday but today it seems to have been broken somehow.
To add my own KML layers I am basically just adding a piece of script to my project build under "\graphics\KolorMap\lib\mxn.googlev3.core".
This is the chunk of code I was piecing into the googlev3.core file. Its the KML sample from the developers website. I wanted to get it working before adding my own custom stuff.
var ctaLayer = new google.maps.KmlLayer({
url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'
});
ctaLayer.setMap(map);
I have added a link to the mxn.googlev3.core. If anyone knows where I need to put my code or if I need to add anything that would be much appreciated.
mxn.googlev3.core
Thanks in advance

Answer 1

There are still some bugs that I am sorting through and I may still need some help with them.
Below is the code excerpt from the mxn.googlev3.core file. The code is from Line 1 to about Line 140. I forget where exactly because I have added my own code.
mxn.register('googlev3', {
Mapstraction: {
init: function(element, api){
var me = this;
if (typeof google.maps.Map === 'undefined') {
throw new Error(api + ' map script not imported');
}
// by default add road map and no controls
var myOptions = {
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: null,
zoomControl: false,
zoomControlOptions: null,
panControl: false,
panControlOptions: null,
scaleControl: false,
scaleControlOptions: null,
scrollwheel: true,
draggable: false,
disableDoubleClickZoom: true
};
// Background color can only be set at construction
// To provide some control, adopt any explicit element style
var backgroundColor = null;
if ( element.currentStyle ) {
backgroundColor = element.currentStyle['background-color'];
}
else if ( window.getComputedStyle ) {
backgroundColor = document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color');
}
// Only set the background if a style has been explicitly set, ruling out the "transparent" default
if ( backgroundColor && 'transparent' !== backgroundColor ) {
myOptions.backgroundColor = backgroundColor;
}
// find controls
if (!this.addControlsArgs && loadoptions.addControlsArgs) {
this.addControlsArgs = loadoptions.addControlsArgs;
}
if (this.addControlsArgs) {
if (this.addControlsArgs.zoom) {
myOptions.zoomControl = true;
if (this.addControlsArgs.zoom == 'small') {
myOptions.zoomControlOptions = {style: google.maps.ZoomControlStyle.SMALL,position: google.maps.ControlPosition.TOP_LEFT};
}
if (this.addControlsArgs.zoom == 'large') {
myOptions.zoomControlOptions = {style: google.maps.ZoomControlStyle.LARGE,position: google.maps.ControlPosition.TOP_LEFT};
}
}
if (this.addControlsArgs.scale) {
myOptions.scaleControl = true;
myOptions.scaleControlOptions = {style:google.maps.ScaleControlStyle.DEFAULT,position: google.maps.ControlPosition.BOTTOM_LEFT};
}
if (this.addControlsArgs.pan) {
myOptions.panControl = true;
myOptions.panControlOptions = {position: google.maps.ControlPosition.TOP_LEFT};
}
if (this.addControlsArgs.map_type) {
myOptions.mapTypeControl = true;
myOptions.mapTypeControlOptions = {style: google.maps.MapTypeControlStyle.DEFAULT,position: google.maps.ControlPosition.TOP_RIGHT};
}
if (this.addControlsArgs.overview) {
myOptions.overviewMapControl = true;
myOptions.overviewMapControlOptions = {opened: true};
}
}
// Enable the visual refresh
google.maps.visualRefresh = true;
var map = new google.maps.Map(element, myOptions);
var fireOnNextIdle = [];
google.maps.event.addListener(map, 'idle', function() {
var fireListCount = fireOnNextIdle.length;
if (fireListCount > 0) {
var fireList = fireOnNextIdle.splice(0, fireListCount);
var handler;
while((handler = fireList.shift())){
handler();
}
}
});
// deal with click
google.maps.event.addListener(map, 'click', function(location){
me.click.fire({'location':
new mxn.LatLonPoint(location.latLng.lat(),location.latLng.lng())
});
});
// deal with zoom change
google.maps.event.addListener(map, 'zoom_changed', function(){
// zoom_changed fires before the zooming has finished so we
// wait for the next idle event before firing our changezoom
// so that method calls report the correct values
fireOnNextIdle.push(function() {
me.changeZoom.fire();
});
});
// deal with map movement
var is_dragging = false;
google.maps.event.addListener(map, 'dragstart', function() {
is_dragging = true;
});
google.maps.event.addListener(map, 'dragend', function(){
me.moveendHandler(me);
me.endPan.fire();
is_dragging = false;
});
google.maps.event.addListener(map, 'center_changed', function() {
me.endPan.fire();
});
// deal with initial tile loading
var loadListener = google.maps.event.addListener(map, 'tilesloaded', function(){
me.load.fire();
google.maps.event.removeListener( loadListener );
if (!is_dragging) {
fireOnNextIdle.push(function() {
me.endPan.fire();
});
}
});
this.maps[api] = map;
this.loaded[api] = true;
// THIS IS THE KML CODE THAT YOU NEED TO INSERT -START
var ctaLayer = new google.maps.KmlLayer({
url: 'Insert your kml here link here'
});
ctaLayer.setMap(map);
//END KML CODE SECTION
},
The "Insert your kml link here" is where you put your kml url link.
For some reason the attributes stop displaying at intermittent times. They will work and then I will go to click on a feature again to view the attributes and nothing. This is one of the bugs. I am also messing around with document links within the kml feature attribute tables. As I get deeper into this this Panoramic program is becoming more of a GIS program.
If anyone has any other ideas about this please feel free to make suggestions.