DailyTUT Wallpapers

HOW TO: Use Google Earth inside Facebook ?

Google Earth continues to mesmerize young people with its ability to put the world’s geographic information at their fingertips. Facebook is a social utility that connects people with friends and others who work, study and live around them. And this article is with intent to use Google Earth inside Facebook in the form of an application.

google earth on facebookRequirements to use Google Earth on Facebook

1. Facebook Account

2. Gmail Account

3. Web Hosting Account (cPanel)

Follow these steps

1. You can follow the basic steps mentioned in my previous article to create a simple Facebook application.

2. Next you can use the sample code given below, inside index.html file (which is in your hosting account).

3. This is the final step. Here, you are going to generate an API key which is unique to the user and Replace it inside the code instead of ABCD.

google earth facebook 2

  • Click, the check box which states “I have accepted all terms and conditions” and Enter your Domain name under which you have hosted your application code (i.e. index.html file).

google earth facebook 3

  • Now, hit the button “Generate API Key“. Your API Key will be generated and displayed as below:

google earth facebook 4

Now, you are done with creating a Facebook Application which uses Google API to display Google Earth. Run the Application from facebook to view one like this !

Screenshot 1

google earth facebook 5

Screenshot 2

google earth on facebookSample Code

Note: You have to replace ABCD with your API Key

<html>
<head>
<title>Google Map</title>
<script src=”https://www.google.com/jsapi?key=ABCD“> </script>
<script type=”text/javascript”>
var ge;
google.load(“earth”, “1”);

function init() {
google.earth.createInstance(‘map3d’, initCB, failureCB);
}

function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
}

function failureCB(errorCode) {
}

google.setOnLoadCallback(init);
</script>

</head>
<body>
<div id=”map3d” style=”height: 768px; width: 1024px;”></div>
</body>
</html>

Have fun 🙂 Coming up more for Facebook Enthusiasts !

You may follow DailyTUT on Twitter or like us at Facebook to get more Facebook Application, News and updates.

About the Author: Robin C

Security Consultant, Engineer, Technology Enthusiast and Blogger.

You May Also Like