• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1073
  • Last Modified:

Google Earth plugin

My Google Earth plugin shows multiple placemarks.  When the user clicks a button on the webpage, I want to change the color of a specific icon.  Code is below.  I've read enough of the GE documentation to know that it's possible.... but I am hoping that someone can give me an example.  Any help will be appreciated.
<html>
<head>
<title>TN_NVL Map</title>
  <script src="http://maps.google.com/jsapi?key=MyKeyXYZ"></script>
    <script type="text/javascript">
    var ge;
    google.load("earth", "1");
    function init() {google.earth.createInstance('map3d', initCallback, failureCallback);}
    function initCallback(instance) {
      ge = instance;
      ge.getWindow().setVisibility(true);
      ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
      ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
      ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
      var placemark = ge.createPlacemark('0003');
      placemark.setName('0003');
      var icon = ge.createIcon('');
      icon.setHref('http://maps.google.com/mapfiles/kml/paddle/ltblu-diamond.png');
      var style = ge.createStyle(''); //create a new style
      style.getIconStyle().setIcon(icon); //apply the icon to the style
      placemark.setStyleSelector(style); //apply the style to the placemark
      var point = ge.createPoint('');
      point.setLatitude(35.833225);
      point.setLongitude(-86.394501);
      placemark.setGeometry(point);
      ge.getFeatures().appendChild(placemark);
      var placemark = ge.createPlacemark('0001');
      placemark.setName('0001');
      var icon = ge.createIcon('');
      icon.setHref('http://maps.google.com/mapfiles/kml/paddle/ltblu-diamond.png');
      var style = ge.createStyle(''); //create a new style
      style.getIconStyle().setIcon(icon); //apply the icon to the style
      placemark.setStyleSelector(style); //apply the style to the placemark
      var point = ge.createPoint('');
      point.setLatitude(35.835754);
      point.setLongitude(-86.351913);
      placemark.setGeometry(point);
      ge.getFeatures().appendChild(placemark);
   
      var la = ge.createLookAt('');
      la.set(35.835754, -86.351913,
        0,
        ge.ALTITUDE_RELATIVE_TO_GROUND,
        0,
        0,
        40000
        );
      ge.getView().setAbstractView(la);
    }
	function failureCallback(errorCode) {}    
	
    function ColorMeRed() {
    alert('Now What???');
	}

	
	
    </script>
</head>
<body onLoad="init()" style="border: 0; border-width: 0; padding: 0;">
<div id="map3d" style="height: 80%; width: 100%; border: 0; border-width: 0; padding: 0;"></div>
<button onclick="ColorMeRed()">
    Turn 0001 RED
</button>

</body></html>

Open in new window

0
motokent
Asked:
motokent
  • 2
1 Solution
 
heppaCommented:
Hey there!

first of all, you should edit your post or ask a Mod to remove your Google API Key.. It is meant for your personal use, and shouldn't be reused by anyone...

then, you should refactor your code to put redundant code into a seperate function

Code 1

and in init call

 makePlacemark('http://maps.google.com/mapfiles/kml/paddle/ltblu-diamond.png', 35.833225, -86.394501, '0003');
        makePlacemark('http://maps.google.com/mapfiles/kml/paddle/ltblu-diamond.png', 35.835754, -86.351913, '0001');

Makes your code easier to read AND faster to load!

For your problem I think you should do

function ColorMeRed() {
            var changePlacemark = ge.getElementById('0003');      
            // Define a custom icon.
            var icon = ge.createIcon('');
            icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
            var style = ge.createStyle(''); //create a new style
            style.getIconStyle().setIcon(icon); //apply the icon to the style
            changePlacemark.setStyleSelector(style); //apply the style to the placemark
      }

Of course you can put any style, any icon, whatever. I think your problem was to retrieve the element itself.

GL
function makePlacemark(iconHref, latitude, longitude, placemarkName, styleName){
		var placemark = ge.createPlacemark(placemarkName);
		placemark.setName(placemarkName);
		var icon = ge.createIcon('');
		icon.setHref(iconHref);
		var style = ge.createStyle(''); //create a new style
		style.getIconStyle().setIcon(icon); //apply the icon to the style
		placemark.setStyleSelector(style); //apply the style to the placemark
		var point = ge.createPoint('');
		point.setLatitude(latitude);
		point.setLongitude(longitude);
		placemark.setGeometry(point);
		ge.getFeatures().appendChild(placemark);
	}

Open in new window

0
 
heppaCommented:
oh, and of course, you would put '0001', if the button shows it! ;)
0
 
motokentAuthor Commented:
Thank you.  Good advice!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now