×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Static GoogleMaps API in JavaScript

From Nokia Developer Wiki
Jump to: navigation, search
croozeus (Talk | contribs)
m (Formatting article)
croozeus (Talk | contribs)
m (Examples)
Line 9: Line 9:
 
==Examples==
 
==Examples==
  
Now, I'll show you some examples of how to use the Map API.
+
Now, we'll see some examples illustrating the use of the Map API.
  
First example (showing the map automatically):
+
'''Showing Maps Automatically'''
  
 
One way to retrieve the map is using the &lt;div&gt; tag. Put all the values you want to your map and use the <em>showMap()</em> tag. It's really necessary that you set the map id with the same value of the div.
 
One way to retrieve the map is using the &lt;div&gt; tag. Put all the values you want to your map and use the <em>showMap()</em> tag. It's really necessary that you set the map id with the same value of the div.
Line 38: Line 38:
 
[[Image:Staticmap-1.gif]]
 
[[Image:Staticmap-1.gif]]
  
Second example (retrieving the map's source):
+
'''Retrieving the map's source'''
  
 
Other way to retrieve the map is using the &lt;img&gt; tag. You set the parameters and using the method <em>getSource()</em> you can define the <em>src</em> value.
 
Other way to retrieve the map is using the &lt;img&gt; tag. You set the parameters and using the method <em>getSource()</em> you can define the <em>src</em> value.
Line 66: Line 66:
 
[[Image:Staticmap-2.gif]]
 
[[Image:Staticmap-2.gif]]
  
Third example (using external data source, like GPS):
+
'''Using external data source, like GPS'''
  
 
First, getting the GPS information. You define the device operations:
 
First, getting the GPS information. You define the device operations:
Line 133: Line 133:
  
 
If you like it and want to see these examples, click [http://embedded.ufcg.edu.br/~artur/Maps/Maps-Examples.zip here] to get the first two examples and [http://embedded.ufcg.edu.br/~artur/Maps/MapsGPS.wgz here] to get the GPS example.
 
If you like it and want to see these examples, click [http://embedded.ufcg.edu.br/~artur/Maps/Maps-Examples.zip here] to get the first two examples and [http://embedded.ufcg.edu.br/~artur/Maps/MapsGPS.wgz here] to get the GPS example.
 
  
 
== Created by ==
 
== Created by ==

Revision as of 12:03, 31 January 2010

{{{width}}}

Overview

Thinking about making the work of the programmers easier? In this article, we create an API to retrieve static maps using the GoogleMaps® system. So, in this way, your work can be so much easier using this API made for JavaScript.

To get this API click here and to see the API documentation click here.

Examples

Now, we'll see some examples illustrating the use of the Map API.

Showing Maps 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.

<body onload="init();">
<div id=map></div>
</body>
/**
* 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();
}

Staticmap-1.gif

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.

<body onload="init();">
<img src="" id=map>
</body>
/**
* 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,

Staticmap-2.gif

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();
}
}

Staticmap-3.gif

If you like it and want to see these examples, click here to get the first two examples and here to get the GPS example.

Created by

  • Artur Farias (artur [at] embedded [dot] ufcg [dot] edu [br])
126 page views in the last 30 days.
×