×
Namespaces

Variants
Actions
Revision as of 00:56, 4 September 2009 by Ar.tur (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Archived:Static GoogleMaps API in JavaScript

From Nokia Developer Wiki
Jump to: navigation, search

Hey,

thinking in make better the work of the programmers I create an API to retrieve static maps using the GoogleMaps® system. So, in this way, your work can be so much easy using this API made for JavaScript.

To get this API click <a href="http://embedded.ufcg.edu.br/~artur/Maps/Map.zip">here</a> and to see the API documentation click <a href="http://embedded.ufcg.edu.br/~artur/Maps/docs/index.html">here</a>.

Now, I'll show you some examples of how to use the Map API.

First example (showing the map automatically):

One way to retrieve the map is using the <div> tag. Put all the values you want to your map and use the showMap() tag. It's really necessary that you set the map id with the same value of the div.

&lt;body onload="init();"&gt;
&lt;div id=map&gt;&lt;/div&gt;
&lt;/body&gt;
/**
 * Embedded Systems and Pervasive Computing Lab
 * WRT Effort - http://efforts.embedded.ufcg.edu.br/wrt 
 *
 * @author Artur
 */
function init() {
	map = new Map(40.702147, -74.015794);
	map.id = "map";
	map.color = "green";
	map.name = "y";
	map.width = 400;
	map.height = 200;
	map.showMap();
}

<img src="http://embedded.ufcg.edu.br/~artur/Maps/staticmap-1.gif" alt="Example 1" />

Second example (retrieving the map's source):

Other way to retrieve the map is using the <img> tag. You set the parameters and using the method getSource() you can define the src value.

&lt;body onload="init();"&gt;
&lt;img src="" id=map&gt;
&lt;/body&gt;
/**
 * Embedded Systems and Pervasive Computing Lab
 * WRT Effort - http://efforts.embedded.ufcg.edu.br/wrt 
 *
 * @author Artur
 */
function init() {
		map = new Map(40.702147, -74.015794);
		map.color = "blue";
		map.name = "x";
		map.width = 300;
		map.height = 300;
		document.getElementById("map").src = map.getSource();
	}

So,

<img src="http://embedded.ufcg.edu.br/~artur/Maps/staticmap-2.gif" alt="Example 2" />

Third example (using external data source, like GPS):

First, getting the GPS information. You define the device operations:

/**
 * Embedded Systems and Pervasive Computing Lab
 * WRT Effort - http://efforts.embedded.ufcg.edu.br/wrt 
 *
 * @author Artur
 */
function setup()
{
  try {
    so = device.getServiceObject("Service.Location", "ILocation");
    getLocation();
  }
  catch (e) {   
      alert('(006) Error ::setup ' + e);
  }
}

After that, the get location method:

function getLocation() {
	try {
		var updateoptions = new Object();
		updateoptions.PartialUpdates = false;

		var criteria = new Object();
		criteria.LocationInformationClass = "GenericLocationInfo";
		criteria.Updateoptions = updateoptions;

		var result = so.ILocation.GetLocation(criteria, result);
		var errCode = result.ErrorCode;
		if (errCode) {
			alert("(005) GPS Error: " + errCode + " " + result.ErrorMessage);
		}
	} catch (e) {
		alert("(004) ::getLocation error: " + e);
	}
}

Finally, the call back function:

function result(transId, eventCode, result)
{
    var errCode = result.ErrorCode;
    if (errCode) {
        alert("(003) GPS Error: " + errCode + " " + result.ErrorMessage);
    }
    else {
        map = new Map(result.ReturnValue.Latitude,
                        result.ReturnValue.Longitude);
        map.id = "map";
        map.color = "yellow";
        map.name = "Artur";
        map.width = 500;
        map.height = 250;
        map.showMap();
    }
}

<img src="http://embedded.ufcg.edu.br/~artur/Maps/staticmap-3.gif" alt="Example 3" />

If you like it and want to see these examples, click <a href="http://embedded.ufcg.edu.br/~artur/Maps/Maps-Examples.zip">here </a>to get the first two examples and <a href="http://embedded.ufcg.edu.br/~artur/Maps/MapsGPS.wgz">here </a>to get the GPS example.

203 page views in the last 30 days.
×