Google Earth Development 1

by Behseini

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="container">
<div class="well">
    <div id="map3d"></div></div>
    <p><input type="button" value="Show balloon" onClick="showBalloon()" /></p>
</div>

CSS

@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css');
#map3d{
height: 400px;
width: 100%;
    
}


div < div.well {background-color: red !important; }

JavaScript

var ge;
      var placemark;

      google.load("earth", "1", {"other_params":"sensor=false"});

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

      function initCB(instance) {

         ge = instance;
         ge.getWindow().setVisibility(true);
         ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);

         // Create the placemark and add it to Earth.
         placemark = ge.createPlacemark('');
         placemark.setDescription(
            '<div class="well shell"><img src="http://www.candentecopper.com/i/common/cdt-logo.png" height="125px" width="175px">' +
            '<h5>Feature balloons accept most HTML.</h5>' +
            '<table border="1px"><tr><th>Allowed</th><th>Not allowed</th></tr>' +
            '<tr><td>Tables</td><td>IFRAMEs</td></tr>' +
				// Using &#60; and &#62; instead of &lt; and &gt;
				// A Google Earth Plugin bug prevents rendering of the latter character entities
            '<tr><td>Font styles</td><td>&#60;embed&#62; and &#60;object&#62; tags</td></tr>' +
            '<tr><td>etc...</td><td>&nbsp;</td></tr></table>' +
            '<p>CSS and JavaScript are not supported.</p></div>');

         // Set the placemark's location.
         var point = ge.createPoint('');
         point.setLatitude(12.345);
         point.setLongitude(54.321);
         point.setAltitudeMode(ge.ALTITUDE_CLAMP_TO_GROUND);
         placemark.setGeometry(point);

         // Add the placemark to Earth.
         ge.getFeatures().appendChild(placemark);

         // Move the camera.
         var la = ge.createLookAt('');
         la.set(12.345, 54.321, 0, ge.ALTITUDE_RELATIVE_TO_GROUND, -8.541, 66.213, 1000);
         ge.getView().setAbstractView(la);
      }

      function failureCB(errorCode) {
      }


function showBalloon() {
         var balloon = ge.createFeatureBalloon('div');
         balloon.setFeature(placemark);
       //  balloon.setAttribute("class", "myStyle");
        ...