×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Static GoogleMaps API in JavaScript

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Automated change of category from Widget for S60 to Web Runtime (WRT). (New ontology category))
hamishwillee (Talk | contribs)
m (Hamishwillee - Adding missing translation link)
 
(7 intermediate revisions by one user not shown)
Line 1: Line 1:
{{FeaturedArticle}}
+
{{Archived|timestamp=20110805014432|user=[[User:Hamishwillee|<br />----]]|The links to the API provided no longer work, and have been disabled. This may be fixed in future, but for the moment, this article should be considered of little or no use}}
{{ReviewerApproved}}
+
[[Category:Symbian Web Runtime]][[Category:Location]]
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090903
 +
|author= [[User:Ar.tur]]
 +
}}
 +
{{FeaturedArticle|timestamp=20100131}}
  
 
==Overview==
 
==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.
+
{{Abstract|Archived: 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 [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].
+
To get this API click: <nowiki>http://embedded.ufcg.edu.br/~artur/Maps/Map.zip</nowiki> and to see the API documentation click <nowiki>http://embedded.ufcg.edu.br/~artur/Maps/docs/index.html</nowiki>.
  
 
==Examples==
 
==Examples==
Line 12: Line 35:
 
Now, we'll see some examples illustrating the use of the Map API.
 
Now, we'll see some examples illustrating the use of the Map API.
  
'''<h3>Showing Maps Automatically</h3>'''
+
=== 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.
  
<code lang="html4strict"><body onload="init();">
+
<code html4strict><body onload="init();">
 
   <div id=map></div>
 
   <div id=map></div>
 
</body></code>
 
</body></code>
  
<code lang="javascript">/**
+
<code 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/
 
  *
 
  *
 
  * @author Artur
 
  * @author Artur
Line 37: Line 60:
 
</code>
 
</code>
  
[[Image:Staticmap-1.gif]]
+
[[File:Staticmap-1.gif]]
  
'''<h3>Retrieving the map's source</h3>'''
+
=== 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.
  
<code lang="html4strict"><body onload="init();">
+
<code html4strict><body onload="init();">
 
   <img src="" id=map>
 
   <img src="" id=map>
 
</body></code>
 
</body></code>
  
<code lang="javascript">/**
+
<code 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/
 
  *
 
  *
 
  * @author Artur
 
  * @author Artur
Line 65: Line 88:
 
So,
 
So,
  
[[Image:Staticmap-2.gif]]
+
[[File:Staticmap-2.gif]]
  
'''<h3>Using external data source, like GPS</h3>'''
+
===  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:
  
<code lang="javascript">/**
+
<code 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/
 
  *
 
  *
 
  * @author Artur
 
  * @author Artur
Line 91: Line 114:
 
After that, the get location method:
 
After that, the get location method:
  
<code lang="javascript">function getLocation() {
+
<code javascript>function getLocation() {
 
try {
 
try {
 
var updateoptions = new Object();
 
var updateoptions = new Object();
Line 113: Line 136:
 
Finally, the call back function:
 
Finally, the call back function:
  
<code lang="javascript">function result(transId, eventCode, result)
+
<code javascript>function result(transId, eventCode, result)
 
{
 
{
 
     var errCode = result.ErrorCode;
 
     var errCode = result.ErrorCode;
Line 131: Line 154:
 
}
 
}
 
</code>
 
</code>
[[Image:Staticmap-3.gif]]
+
[[File:Staticmap-3.gif]]
  
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 <nowiki>http://embedded.ufcg.edu.br/~artur/Maps/Maps-Examples.zip</nowiki> to get the first two examples and <nowiki>http://embedded.ufcg.edu.br/~artur/Maps/MapsGPS.wgz</nowiki> to get the GPS example.
  
 
== Footnote==
 
== Footnote==
  
 
* This article is authored by Artur Farias (artur [at] embedded [dot] ufcg [dot] edu [br])
 
* This article is authored by Artur Farias (artur [at] embedded [dot] ufcg [dot] edu [br])
 
+
* More information at <nowiki>http://efforts.embedded.ufcg.edu.br/wrt/</nowiki>
* More information at [http://efforts.embedded.ufcg.edu.br/wrt WRT Effort]
+
<!-- Translation --> [[pt:Archived:API para acesso à mapas estáticos usando GoogleMaps para JavaScript]]
 
+
[[Category:Web Runtime (WRT)]][[Category:Web Runtime (WRT)]]
+

Latest revision as of 03:22, 14 September 2012

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

The links to the API provided no longer work, and have been disabled. This may be fixed in future, but for the moment, this article should be considered of little or no use

Article Metadata
Article
Created: User:Ar.tur (03 Sep 2009)
Last edited: hamishwillee (14 Sep 2012)
Featured Article
31 Jan
2010

Contents

[edit] Overview

Archived: 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: http://embedded.ufcg.edu.br/~artur/Maps/Map.zip and to see the API documentation click http://embedded.ufcg.edu.br/~artur/Maps/docs/index.html.

[edit] Examples

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

[edit] 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

[edit] 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

[edit] 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 http://embedded.ufcg.edu.br/~artur/Maps/Maps-Examples.zip to get the first two examples and http://embedded.ufcg.edu.br/~artur/Maps/MapsGPS.wgz to get the GPS example.

[edit] Footnote

  • This article is authored by Artur Farias (artur [at] embedded [dot] ufcg [dot] edu [br])
  • More information at http://efforts.embedded.ufcg.edu.br/wrt/
This page was last modified on 14 September 2012, at 03:22.
79 page views in the last 30 days.
×