Solved

Google Earth plugin

Posted on 2010-09-22
4
1,047 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 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