CSS Ballon google earth

765 Views Asked by At

How can I change the style of a placemark ballon in google earth? Isn't the kml data, is the ballon itself. For example, I would like to round the border. I do an example but always view a blank border around the style that I put.

Javascript code:

var ge=null;
var html="<div class='ews_infobox'> Prueba </div>";
var inicio={"latitud": 43.3667, "longitud": -5.8333,"zoom": 5000.0};


function initCB(pluginInstance) {
ge = pluginInstance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);

    //Crea un placemark.
    var placemark = ge.createPlacemark('');

    //Define icono.
    var icon = ge.createIcon('');
    icon.setHref('images/home2.png');

    // Placemark en Oviedo.  
    var point = ge.createPoint('');
    point.setLatitude(43.3667);
    point.setLongitude(-5.8333);
    placemark.setGeometry(point);

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

    //Crea la vista (LookAct).
    ge.getOptions().setFlyToSpeed(.2);
    var lookAt = ge.createLookAt('');

    // Pone las posiciones.
    lookAt.setLatitude(inicio.latitud);
    lookAt.setLongitude(inicio.longitud);
    lookAt.setRange(inicio.zoom);

    // Actualiza vista de google Earth.
    ge.getView().setAbstractView(lookAt);


    eventoMarca(placemark);
}

function eventoMarca(placemark){


google.earth.addEventListener(placemark, 'click', function(event) {


     var balloon = ge.createHtmlDivBalloon('');
      balloon.setFeature(placemark);
      var div = document.createElement('DIV');
      div.innerHTML = html;
      balloon.setContentDiv(div);
      ge.setBalloon(balloon);

    });

}

style css:

.ews_infobox
{
padding:15px;
color:#000;
background:#f3961c; 
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
width: 80px;
height: 40px;

}

And the ballon is:ballon

1

There are 1 best solutions below

0
On

AFAIK there is no way at all to do this. You can only change the style of the content, but not the balloon itself.

This is because the 'balloon frame' isn't actually part of the DOM - it is rendered natively by the plugin.