Google Gears Geolocation API, example displays your location on Google Map

The Google Gears Geolocation API allows you to display your current position data by obtaining it from your WiFi antenna. The Google Gears Geolocation API is able to obtain the exact location of the user’s current location, in terms of latitude, longitude and even the address etc. User browsers such as Internet Explorer, Firefox must have Google Gears installed excepts Google Chrome, in order to have the Google Gears API to work on your browser.

In this example, I’m showing you here how a few simple JavaScript functions to display your own location on a Google Map. They’re as follows:

1. Initialize the Gears API, by including the gears_init.js, download the gears_init.js to your web server.

<script type=”text/javascript” src=”/ggear/gears_init.js”></script>

2. Include the Google Map API, (Obtain your own Google Map API key)

<script type=”text/javascript”
src=”http://www.google.com/jsapi?key=brabrabrabra”></script>

3. The JavaScript code to obtain the location (latitude, longitude and address) and store in global variables

<script type=”text/javascript”>
/** Code to detect if gear has been installed,
if NOT redirect to google gear page */

if (!window.google || !google.gears) {
    location.href = “http://gears.google.com/?action=install”+
    ”&message=Welcome to Google Gear Installation” +
    ”&return=http://www.ajaxapp.com”;
}

var geo = google.gears.factory.create(‘beta.geolocation’);
// The global variable latitude
var lat=0;
// The global variable longitude
var lon=0;
// The address name
var addr=”;

/**
The call-back function to get
latitude, longtitude and the address of the
location using Google Gear Geolocation API
*/

function updatePosition(position) {
    // store the latitude and longititude to the global variables
    lat=position.latitude;
    lon= position.longitude;
    // Get the address with all posible values, such as
    // street number, street, city, state, country etc, and
    // format them properly

    addr=”;
    if ( position.gearsAddress.streetNumber!=null )
        addr+=position.gearsAddress.streetNumber+’, ‘;
    if ( position.gearsAddress.street!=null )
        addr+=position.gearsAddress.street+’, ‘;
    if ( position.gearsAddress.city!=null )
        addr+=position.gearsAddress.city+’, ‘;
    if ( position.gearsAddress.region!=null ){
        if (addr!=” )addr+=’<br/>’;
        addr+=position.gearsAddress.region+’, ‘;
    }
    if ( position.gearsAddress.country!=null )
        addr+=position.gearsAddress.country+’, ‘;
    if ( position.gearsAddress.postalCode!=null )
        addr+=position.gearsAddress.postalCode;
}

/**
The call-back function to display error
while it’s unable to fetch the location of the
WiFi user. It’ll display the error message on
the div with ID “err_stat”
*/

function handleError(positionError) {
    var e=document.getElementById(‘err_stat’);
    if ( e!=null )
    {
        e.style.display=’block’;
        e.innerHTML=’<br/><br/>Oppps! Attempt’+
        ’ to get location failed: ‘ +
        positionError.message;
    }
}

// Get the location with high accuracy
geo.getCurrentPosition(updatePosition, handleError,
{ enableHighAccuracy: true,gearsRequestAddress: true });
</script>

4. The JavaScript code to initialize the Google Map, and add the red marker with mouse over event of your location, and when the user has the mouse over the red marker, it’ll show the location and
the address.

<script type=”text/javascript”>
google.load(“maps”, “2.x”);
google.setOnLoadCallback(initialize);
/**
The call-back function to initialize and display the map
*/

function initialize()
{

    var map = new GMap2(document.getElementById(“gmap_container”));
    typ_mapy = G_HYBRID_MAP;
    // set the map type and the control type
    map.addMapType(G_PHYSICAL_MAP);
    map.addControl(new GLargeMapControl());
    // Move the center of the map to where your location is
    var center = new GLatLng(lat,lon);
    // the zoom level
    var zoom = 7;
    map.setCenter(center, zoom, typ_mapy);
    // Create the point of your location
    var pnt= new GLatLng(lat,lon);
    // And insert the red marker on the map to indicate your position
    map.addOverlay(createMarker(pnt,1,map));
}

/**
The function to create a red marker on the Google Map
*/
function createMarker(point, number,map) {
    var marker = new GMarker(point);
    marker.value = number;
    /*Add a listener for mouseover event, when the user has the mouse
    over, it will have a little pop-up to show the user’s own location */

    GEvent.addListener(marker, ‘mouseover’, function() {
        var myHtml = ‘You are in ‘+addr+’<br/>’+
        +’(latitude :’+lat+’, longitude:’+lon+’)';
        map.openInfoWindowHtml(point, myHtml);});
    return marker;
}
</script>

5. And the two DIVs, with dom IDs, “err_stat” and “gmap_container” which are for showing the error message of Geolocation position and displaying the Google Map respectively.

<style>
#gmap_container { font-family:verdana,arial;
font-size:9pt;border:1px dotted #445588;
padding:3px;width:450px;height:450px;}
#err_stat { display:none;font-family:verdana,arial;
font-size:12pt;color:red;background:#FFFFF5;
border:1px dotted #990000;padding:3px;
width:450px;height:150px;}
</style>
<div id=”err_stat”></div>
<div id=”gmap_container”></div>

6. Voila! The working example is as follows: (Please note you must have Google Gears installed for browsers excepts Chrome)

Find out more about Google Gears Geolocation API here and Google Map API here

Enter your email address to subscribe our newsletter or feed for FREE:

Delivered by FeedBurner


Bookmark with:

[Delicious]    [Digg]    [Reddit]    [Facebook]    [StumbleUpon]

1 Response to “Google Gears Geolocation API, example displays your location on Google Map”


  1. 1 How to get the country of an IP address in PHP? | AjaxApp.com

Leave a Reply

You must login to post a comment.