×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Static GoogleMaps API in JavaScript

From Nokia Developer Wiki
Jump to: navigation, search
Ar.tur (Talk | contribs)
(Google Maps static javascript api)
 
Ar.tur (Talk | contribs)
Line 3: Line 3:
 
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.
 
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>.
+
To get this API click [http://embedded.ufcg.edu.br/~artur/Maps/Map.zip here] and to see the API documentation click [http://embedded.ufcg.edu.br/~artur/Maps/docs/index.html here].
  
 
Now, I'll show you some examples of how to use the Map API.
 
Now, I'll show you some examples of how to use the Map API.
Line 11: Line 11:
 
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.
  
<code>&lt;body onload="init();"&gt;
+
<code lang="html4strict"><body onload="init();">
&lt;div id=map&gt;&lt;/div&gt;
+
  <div id=map></div>
&lt;/body&gt;</code>
+
</body></code>
  
<pre lang="javascript">/**
+
<code lang="javascript">/**
 
  * Embedded Systems and Pervasive Computing Lab
 
  * Embedded Systems and Pervasive Computing Lab
 
  * WRT Effort - http://efforts.embedded.ufcg.edu.br/wrt  
 
  * WRT Effort - http://efforts.embedded.ufcg.edu.br/wrt  
Line 30: Line 30:
 
map.showMap();
 
map.showMap();
 
}
 
}
</pre>
+
</code>
  
<img src="http://embedded.ufcg.edu.br/~artur/Maps/staticmap-1.gif" alt="Example 1" />
+
[[Image:Staticmap-1.gif]]
  
 
Second example (retrieving the map's source):
 
Second example (retrieving the map's source):
Line 38: Line 38:
 
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.
  
<code>&lt;body onload="init();"&gt;
+
<code lang="html4strict"><body onload="init();">
&lt;img src="" id=map&gt;
+
  <img src="" id=map>
&lt;/body&gt;</code>
+
</body></code>
  
<pre lang="javascript">/**
+
<code lang="javascript">/**
 
  * Embedded Systems and Pervasive Computing Lab
 
  * Embedded Systems and Pervasive Computing Lab
 
  * WRT Effort - http://efforts.embedded.ufcg.edu.br/wrt  
 
  * WRT Effort - http://efforts.embedded.ufcg.edu.br/wrt  
Line 56: Line 56:
 
document.getElementById("map").src = map.getSource();
 
document.getElementById("map").src = map.getSource();
 
}
 
}
</pre>
+
</code>
  
 
So,
 
So,
  
<img src="http://embedded.ufcg.edu.br/~artur/Maps/staticmap-2.gif" alt="Example 2" />
+
[[Image:Staticmap-2.gif]]
  
 
Third example (using external data source, like GPS):
 
Third example (using external data source, like GPS):
Line 66: Line 66:
 
First, getting the GPS information. You define the device operations:
 
First, getting the GPS information. You define the device operations:
  
<pre lang="javascript">/**
+
<code lang="javascript">/**
 
  * Embedded Systems and Pervasive Computing Lab
 
  * Embedded Systems and Pervasive Computing Lab
 
  * WRT Effort - http://efforts.embedded.ufcg.edu.br/wrt  
 
  * WRT Effort - http://efforts.embedded.ufcg.edu.br/wrt  
Line 82: Line 82:
 
   }
 
   }
 
}
 
}
</pre>
+
</code>
  
 
After that, the get location method:
 
After that, the get location method:
  
<pre lang="javascript">function getLocation() {
+
<code lang="javascript">function getLocation() {
 
try {
 
try {
 
var updateoptions = new Object();
 
var updateoptions = new Object();
Line 104: Line 104:
 
}
 
}
 
}
 
}
</pre>
+
</code>
  
 
Finally, the call back function:
 
Finally, the call back function:
  
<pre lang="javascript">function result(transId, eventCode, result)
+
<code lang="javascript">function result(transId, eventCode, result)
 
{
 
{
 
     var errCode = result.ErrorCode;
 
     var errCode = result.ErrorCode;
Line 125: Line 125:
 
     }
 
     }
 
}
 
}
</pre>
+
</code>
 +
[[Image:Staticmap-3.gif]]
  
<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 [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 <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.
+
 
 +
== Created by ==
 +
 
 +
* Artur Farias (artur [at] embedded [dot] ufcg [dot] edu [br])
 +
 
 +
[http://efforts.embedded.ufcg.edu.br WRT Effort]
  
 
[[Category:Web Runtime (WRT)]][[Category:Widget for S60]]
 
[[Category:Web Runtime (WRT)]][[Category:Widget for S60]]

Revision as of 01:23, 4 September 2009

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 here and to see the API documentation click here.

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.

<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

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.

<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

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

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

WRT Effort

122 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×