Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Google Earth plugin

Posted on 2010-09-22
4
Medium Priority
?
1,069 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 4

Accepted Solution

by:
heppa earned 2000 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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Suggested Courses

636 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