HOW TO: Use Google Earth inside Facebook ?

Post Views: 80

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.

Requirements 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.

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).

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

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

Screenshot 2

Sample 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>