Solved

Google Earth plugin

Posted on 2010-09-22
4
1,048 Views
Last Modified: 2012-08-13
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
Comment
Question by:motokent
  • 2
4 Comments
 
LVL 4

Accepted Solution

by:
heppa earned 500 total points
ID: 33741682
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
 
LVL 4

Expert Comment

by:heppa
ID: 33741690
oh, and of course, you would put '0001', if the button shows it! ;)
0
 

Author Closing Comment

by:motokent
ID: 33743377
Thank you.  Good advice!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now