Widget Examples‎ > ‎

Google Maps


The Google Maps API, Bondi Gelocation API used to create a sample map to display the current position.



Generate Key from Google Maps API 


Google Maps API Key can be generated from the following URL. 
Please use the server URL which you uploaded the your widget application and download.html as the URL of your Web site.




Create a new project

Choose File >>New>>Project under eclipse menu.
Then from the New Project Dialog, Select Droidget Wizard>>Project
Fill necessary fields including project name..etc..

In order to have the GPS functionalities in widget application, in the Feature section ,
Click on Add and select geolocation feature "http://bondi.omtp.org/api/gelocation".  

Also it is required to set the access permission for following URLs to access google maps from widget.
For this, Click on Add in the Access section in project creation wizard and add the URLs.
http://maps.google.com
http://maps.gstatic.com

and Click Finish

Project with the given name will appear in the Eclipse project explorer.







Now,require to access http://maps.google.com
。This time, subdomain also can work and write http://google.com/  as the name of the server.


Now, require to access http://maps.gstatic.com 。This time, subdomain can not work and write the URL with the name of server.



After finished creating project, Bondi Feature <feature name="http://bondi.omtp.org/api/gelocation" /> and access permission 
<access uri="http://google.com/" subdomains="true"/> ,<access uri="http://maps.gstatic.com"/>  wiill be appeared in the config.xml file as follows.

<?xml version="1.0" encoding="UTF-8"?>
<widget id="MapSample_1279460600275" version="1.0" width="300" height="300">
    <content src="index.html" type="text/html"/>
    <name>SampleMap</name>
    <description>The sample of Google Map</description>
    <author url="http://www.gclue.jp">GClue</author>
    <icon src="icon.png"/>
    <license></license>
    <feature name="http://bondi.omtp.org/api/geolocation" />
    <access uri="http://google.com/" subdomains="true"/>
    <access uri="http://maps.gstatic.com"/>
</widget>

Create JavaScript File

create a new folder called js and under that folder create a new file and name it as "script.js".
Then add the following functions.

js/script.js
function onLoad(){
    bondi.geolocation.getCurrentPosition(onPositionSuccess, onPositionError, {timeout:40000});
}

// this function will handle each position updates
function onPositionSuccess(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;

    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(lat, lon), 13);
    map.setUIToDefault();
}

// this function will handle each error in position updates
function onPositionError(error) {
    
}

Edit index.html

Edit the index html as follows. make sure that you change YourMapKey part of the code with your Google Maps API key that obtained, with the instruction here. 

index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>Google Map Sample</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=YourMapKey" type="text/javascript"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>

<body onload="onLoad()">
    <div id="map_canvas" style="width: 300px; height: 300px"></div>
</body>

</html>

Deploy the Widget

Now save and deploy the project
  • From the eclipse menu select Droidget --> packaging
  • Then Droidget-->install packaging
Or 
  • upload the Widget to web server and update the download.html file as follows. Then access the download.html from the smart phone and install the widget from URI.
Download.html
<html>
<head>
    <title>Download</title>
</head>
<body>
    <a href="droidget://www.example.com/MapSample.wgt">MapSample</a><br>
</body>
</html>

Preview


Comments