Google Earth Integration with Google Maps and Places APIs

Question

I am using a combination of the new Google Earth integration code http://code.google.com/p/smap-suite/source/browse/fieldAnalysis2/trunk/WebContent/js/libs/google_earth_integration.js?r=1442 and the Google Places Api with Maps V3. With the current results being output to a table the user can click the table and the corressponding marker and infowindow will open. Well currently this is working perfectly in Maps V3 but cannot get the anchor for the infowindow to locate at the correct spot.

function addResult(result, i) {
var results = document.getElementById("results");
var tr = document.createElement('tr');
tr.style.backgroundColor = (i% 2 == 0 ? '#F0F0F0' : '#FFFFFF');
tr.onclick = function() {
  google.maps.event.trigger(markers[i], 'click'); //end add marker listener

        }  

google.maps.event.addListener(this.map_,
                            GoogleEarth.INFO_WINDOW_OPENED_EVENT_,
                            function(infowindow) {
//If Earth is open, create balloon
if (!that.earthVisible_) {
  return;
}
    var balloon = that.instance_.createHtmlStringBalloon('');
    //TODO assuming anchor == marker == lastclicked

    var placemark = that.lastClickedPlacemark_;
    balloon.setFeature(placemark);
    balloon.setContentString(infowindow.getContent());
    that.instance_.setBalloon(balloon);
 });

 // On click of a placemark we want to trigger the map click event.
google.earth.addEventListener(ge.getGlobe(), 'click', function(event) {
var target = event.getTarget();
var overlay = that.placemarks_[target.getId()];
if (overlay) {
  event.preventDefault();
  // Close any currently opened map info windows.
  var infoWindows = that.getOverlaysForType_('InfoWindow');
  for (var i = 0, infoWindow; infoWindow = infoWindows[i]; i++) {
    infoWindow.close();
  }
  that.lastClickedPlacemark_ = target;
  google.maps.event.trigger(overlay, 'click');
}
});

I need to create a function that will locate the Lat and Long of the result clicked in the table and set the anchor of the window for google earth while also working for placemarks clicked on the map and addresses entered in the search bar.

See example here : http://go3dexpansion.com/attempt101.html

EDIT

Alright so I'm trying to make it so that when you click on the results table it will open the correct balloon and connect it to the correct placemark. You have been a tremendous help in helping me understand more of what I am really doing. Please take a look at this code and let me know what I can do. There is also another portion of the code on the jsfiddle that controls when and where the balloons appear and is based on the lastClickPlacemark_ variable.

///My Attempt at the code
var getPosition = function(marker) {
var lat = marker.position.$a;
var lng = marker.position.ab;
var myLatlng = new google.maps.LatLng(lat, lng);


    TODO assuming anchor == marker == lastclicked
var marker = new google.maps.Marker({
  position: myLatlng,
  map: map
});
var balloon = googleEarth.instance_.createHtmlStringBalloon('');
    var placemark = marker;
    balloon.setFeature(placemark);
    balloon.setContentString(infowindow.getContent());
    googleEarth.instance_.setBalloon(balloon);

   // alert(lat + ',' + lng); // do something with it...
 }



 // The code that currently controls the window open and is based on the lastClickPlacemark_ variable


 GoogleEarth.prototype.addEarthEvents_ = function() {
 var ge = this.instance_;
 ge.getWindow().setVisibility(true);

 // add a navigation control
 var navControl = ge.getNavigationControl();
 navControl.setVisibility(ge.VISIBILITY_AUTO);

 var screen = navControl.getScreenXY(); 
 screen.setYUnits(ge.UNITS_INSET_PIXELS);
 screen.setXUnits(ge.UNITS_PIXELS);

 // add some layers
 var layerRoot = ge.getLayerRoot();
 layerRoot.enableLayerById(ge.LAYER_BORDERS, true);
 layerRoot.enableLayerById(ge.LAYER_ROADS, true);

 var that = this;
 google.maps.event.addListener(this.map_,
                            GoogleEarth.INFO_WINDOW_OPENED_EVENT_,
                            function(infowindow) {
//If Earth is open, create balloon
if (!that.earthVisible_) {
  return;
}
    var balloon = that.instance_.createHtmlStringBalloon('');
    //TODO assuming anchor == marker == lastclicked

    var placemark = that.lastClickedPlacemark_;
    balloon.setFeature(placemark);
    balloon.setContentString(infowindow.getContent());
    that.instance_.setBalloon(balloon);
});

// On click of a placemark we want to trigger the map click event.
google.earth.addEventListener(ge.getGlobe(), 'click', function(event) {
var target = event.getTarget();
var overlay = that.placemarks_[target.getId()];
if (overlay) {
  event.preventDefault();
  // Close any currently opened map info windows.
  var infoWindows = that.getOverlaysForType_('InfoWindow');
  for (var i = 0, infoWindow; infoWindow = infoWindows[i]; i++) {
    infoWindow.close();
  }
  that.lastClickedPlacemark_ = target;
  google.maps.event.trigger(overlay, 'click');
}
 });

};








//SOMETHING LIKE THIS?????


var getPosition = function(marker) {
            ge = googleEarth.instance_; 

var lat = marker.position.$a;
var lng = marker.position.ab;
 // var myLatlng = new google.maps.LatLng(lat, lng);
 var placemark = ge.getElementById(marker);   
    var balloon = ge.createHtmlStringBalloon(''); 
      balloon.setFeature(placemark); 
      ge.setBalloon(balloon); 


   // alert(lat + ',' + lng); // do something with it...
}

Answer 1

A function...

"that will locate the Lat and Long of the result clicked in the table"

could be something like this...

var getPosition = function(marker) {
    var lat = marker.position.$a;
    var lng = marker.position.ab;
    alert(lat + ',' + lng); // do something with it...
}

You could call it here so that you get the position of the feature corresponding to the item in your table...

tr.onclick = function() {
  google.maps.event.trigger(markers[i], 'click'); //end add marker listener
  getPosition(markers[i]); // get the position
}  

The second part isn't so clear...

while also working for placemarks clicked on the map...

If I understand you, then you could amend your marker event listener to call the same function when a marker is clicked on the map.

google.maps.event.addListener(markers[i], 'click', function() {
  getDetails(results[i], i);
  getPosition(markers[i]); // get the position
});

Finally...

and addresses entered in the search bar.

Doesn't make any sense - addresses don't have a position unless you geocode them - and besides I can't see any search bar in you page!

EDIT

"I just need to figure out how to apply those separate lat and lng values and set them as the placemark"

Again, not 100% sure I understand, but if you want to actually create a new marker with your data, you could amend the function easily...

var createMarker = function(marker) {
    var lat = marker.position.$a;
    var lng = marker.position.ab;
    var myLatlng = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map
    });
}