Modifying Balloon in API

[theCrimsonEK]

I am loading an instance of Google Earth in my browser and am running
into an issue. I am trying to set the pop up balloon so when you click
on the placemark, it pops up with the custom balloon.

right now, the custom balloon loads when the API is initialized before
it zooms into the location. i need to anchor the new balloon to the
placemark. from what i have in my code, the logic behind it seems to
be correct, but its not working.

Any ideas?

Here is my code: I have a changeBalloon() function that creates the
balloon and assigns it to the original object.


<script>
google.load("earth", "1");
google.load("maps", "2.99"); // For JS geocoder

var ge = null;
var geocoder;
var address = "<%= strAddressQuery %>";
var lat

var bubble = "bubble content";

function init() {

if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
google.earth.createInstance("map3d", initCallback,
failureCallback);

}

}

function initCallback(object) {

ge = object;
ge.getWindow().setVisibility(true);

// if the address is populated, the lat and long need found

if (address != "") {
geocoder.getLatLng(
address,
function(point) {
if (point && ge != null) {
var la = ge.createLookAt('');
la.set(point.y, point.x, 100,
ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 400);
ge.getView().setAbstractView(la);
}
}
);

} else {
// look up by lat, long
var la = ge.createLookAt('');
la.set(<%= dGeoLatitude %>, <%= dGeoLongitude %>, 100,
ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 400);

ge.getView().setAbstractView(la);

}

// create instance of pointer
createPlacemark();

}

function failureCallback(object) {
// error loading plugin

}

function changeBalloon() {
// create instance of bubble
var feature = null;
if (window.placemark) {
feature = window.placemark;
}
var b = ge.createHtmlStringBalloon('');
b.setMaxWidth(300);
b.setFeature(feature);
b.setContentString(bubble);
ge.setBalloon(null);
ge.setBalloon(b);

}

function createPlacemark() {

// create the pointer
var placemark = ge.createPlacemark('');
placemark.setName("<%= strName %>");
ge.getFeatures().appendChild(placemark);

// Create style map for placemark
var normal = ge.createIcon('');
normal.setHref('http://maps.google.com/mapfiles/kml/paddle/red-
circle.png');
var iconNormal = ge.createStyle('');
iconNormal.getIconStyle().setIcon(normal);
var highlight = ge.createIcon('');
highlight.setHref('http://maps.google.com/mapfiles/kml/paddle/red-
circle.png');
var iconHighlight = ge.createStyle('');
iconHighlight.getIconStyle().setIcon(highlight);
var styleMap = ge.createStyleMap('');
styleMap.setNormalStyle(iconNormal);
styleMap.setHighlightStyle(iconHighlight);
placemark.setStyleSelector(styleMap);

// Create point
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_ GROUND);
var point = ge.createPoint('');
point.setLatitude(<%= dGeoLatitude %>);
point.setLongitude(<%= dGeoLongitude %>);

placemark.setGeometry(point);

changeBalloon(); // loads before startup

}

</script>

[theCrimsonEK]

anyone have any ideas?

[Appletom]

I'm guessing only a few members here at GEH would have the skillsets and knowledge needed to answer your question. Give it some time.

[SpiderX22]

I'm guessing only a few members here at GEH would have the skillsets and knowledge needed to answer your question. Give it some time.

Agreed. I can personally say when I read the first bits of your code, the words "wtf" were going through my head...

[theCrimsonEK]

lol yeah i figured it would be hard to find an answer. There arent too many places for code support with the new plugins.. It would help if google released some documentation on the plugin API

[fraser]

Hi,

First post! I too have been playing with the new API..
I'm not really sure what you mean as you say 'but its not working.'

Do you want to fly to the location of the custom balloon when changeBalloon() is called?

If so you need this...

function changeBalloon() {
// create instance of bubble
var feature = null;
if (window.placemark) {
feature = window.placemark;
}
ge.getView().setAbstractView(feature.getAbstractVi ew());
var b = ge.createHtmlStringBalloon('');
b.setMaxWidth(300);
b.setFeature(feature);
b.setContentString(bubble);
ge.setBalloon(null);
ge.setBalloon(b);
}

if you mean the balloon opens right away and looks messy whilst the globe moves then you need to just do somthing like...

function changeBalloon() {
// create instance of bubble
var feature = null;
if (window.placemark) {
feature = window.placemark;
}
ge.setBalloon(null);
setTimeout(function() {
var b = ge.createHtmlStringBalloon('');
b.setMaxWidth(300);
b.setFeature(feature);
b.setContentString(bubble);
ge.setBalloon(b);
},1700);
}
Otherwise you would really need to explain how your code fails, or post a link to an example.

Anyway, hope that helps...

Regards,

F.

[Forkboy2]

While we're on the subject of the GE API.....:)

I know absolutely nothing about java programming, etc. but am trying to piece together some code from examples I've been able to find online and use the trial and error style of programming :). All I'm trying to do is create a page with a map overlay and on/off toggle to turn the overlay on and off.

I've got it to work, but I want GE to zoom in to the map extents when the page first loads. I've figured out how to create a button that will zoom in to the map, but I want it to do it automatically. I'm guessing this is something very simple so maybe someone can help me out.

Also, any idea if there is there a way to get GE to zoom to the map extents automatically, without having to enter the actual coordinates?

http://www.gelib.com/maps/Topos2/Los_Angeles/6x6/Los_Angeles_1928b.html




<html>
<head>
<title>Google</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAoAD1No8pC5IbRILsboCKLxQ-ec-BNLcSX_ECjrykBYlLwdJnexST254wvXFyneo36bm7Ygu89FPIH w"></script>
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.99"); // For JS geocoder

var ge = null;
var fileOne = null;
var geocoder;


function init() {
google.earth.createInstance("map3d", initCB, failureCB);
}

function initCB(object) {
ge = object;
ge.getWindow().setVisibility(true);
fileOne = getNL('http://www.gelib.com/maps/Topos2/Los_Angeles/6x6/MAPNAME.kmz');
updateOptions();
}

function failureCB(object) {
}

function failureCB(object) {
alert('load failed');
}

function getNL(kmlURL){
var nl = ge.createNetworkLink("");
var link = ge.createLink("");
link.setHref(kmlURL);
nl.setLink(link);
ge.getGlobe().getFeatures().appendChild(nl);
return nl;
}

function updateOptions() {
var options = ge.getOptions();
var form = document.options;
fileOne.setVisibility(document.options.file1.check ed);
}

function submitLocation() {
var la = ge.createLookAt('');
la.set(34.45, -118.15, 80000, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 0);
ge.getView().setAbstractView(la);
}

</script>
</head>
<body onload='init()' id='body'>
<div id='map3d_container' style='border: 1px solid silver; height: 600px; width: 500px;'>
<div id='map3d' style='height: 600px; width: 500px;'></div>
</div>

<div id='options_container'>
<form name="options" action='javascript:updateOptions();'>
<input type="checkbox" onclick='updateOptions()' name="file1" checked />Toggle Map
</form>
</div>

<div>
<form name='searchform' id='searchform' action='javascript:submitLocation();void(0);'>
<input type=submit value='Zoom to Map'>
</form>
</div>
</body>
</html>

[fraser]

Hi Matt,

You're almost there! Just modify your initCB function to call your submitLocation() function.

function initCB(object) {
ge = object;
ge.getWindow().setVisibility(true);
fileOne = getNL('http://www.gelib.com/maps/Topos2/Los_Angeles/6x6/MAPNAME.kmz');
updateOptions();
submitLocation();
}

Alternativley if the kmz file contains a <Camera> or <LooAt> (which it probably does) you can just set nl.setFlyToView(true) in your getNL() function.

function getNL(kmlURL){
var nl = ge.createNetworkLink("");
var link = ge.createLink("");
link.setHref(kmlURL);
nl.setFlyToView(true)
nl.setLink(link);
ge.getGlobe().getFeatures().appendChild(nl);
return nl;
}

This second way is better because you don't have to hard-code any coordinates in your source code. If you loaded another kml/kmz file it would 'fly-to' that as well.

Hope this helps...

F.

[Forkboy2]

Thanks much Fraser, I'll give that a try. I sure which I understood all this better :)

Matt