Nearby Places Search
PUBLISHED
Introduction
In this document, demonstration is done on how to create a simple web application in Tizen using Google Maps Geolocation API & Google Places API. The Geolocation API provides scripted access to geographical location information associated with the hosting device, such as latitude and longitude. The functions in the Google Places JavaScript library provides the facility to search for places contained within a defined area, such as the bounds of a map, or around a fixed point.
Step-1: Getting API key
At first, you should create an API key for your application and enable API according to the requirement of the application. To create an API key follow the instructions in the link below:
https://developers.google.com/maps/documentation/javascript/get-api-key
Step-2: Loading the Places Library
To use the functionality contained within Places library, you must first load it using the libraries parameter in the Maps API bootstrap URL:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.exp&signed_in=true&libraries=places"></script>
Step-3: Initialization and Prerequisites
The following privileges are needed to use this application.
|
Privilege |
Description |
|
Allows the application to use the Internet connection. |
|
|
Allows the application to use the user location data. |
The following features are needed to be included.
The following accesses are needed to be allowed keeping the “Allow subdomain” option true.
<access origin="http://google.com" subdomains="true"/> <access origin="http://googleapis.com" subdomains="true"/> <access origin="http://gstatic.com" subdomains="true"/> <access origin="*" subdomains="true"/>
In summary, the code of config.xml needs to be modified for having the required privileges, features, policies as below:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/test" version="1.0.0" viewmodes="maximized">
<access origin="http://google.com" subdomains="true"/>
<access origin="*" subdomains="true"/>
<access origin="http://googleapis.com" subdomains="true"/>
<access origin="http://gstatic.com" subdomains="true"/>
<tizen:application id="KTCdhaSLPA.test" package="KTCdhaSLPA" required_version="2.4"/>
<content src="index.html"/>
<feature name="http://tizen.org/feature/screen.size.all"/>
<feature name="http://tizen.org/feature/location.gps"/>
<icon src="icon.png"/>
<name>test</name>
<tizen:privilege name="http://tizen.org/privilege/internet"/>
<tizen:privilege name="http://tizen.org/privilege/location"/>
<tizen:profile name="mobile"/>
<tizen:setting screen-orientation="portrait" context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/>
</widget>Step-4: Detecting the user’s current location
The Navigator.Geolocation read-only property returns a Geolocation object that gives Web content access to the location of the device. Using “getCurrentPosition” method of this property user can request for the device’s current location.
var watchId = navigator.geolocation.getCurrentPosition(function(position) {
pyrmont= new google.maps.LatLng(position.coords.latitude , posi-tion.coords.longitude);Step-5: Creating container of map
To show the user’s current location a container needs to be created.
<body>
<div id="map-canvas"></div>
</body>Step-6: Displaying user’s current location on the map
Initialization of the map is done with user’s current location using the code below:
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: pyrmont,
zoom: 17
});Step-7: Requesting for nearby search
Nearby search allows finding places within a specified area around a particular position using a keyword or type. In this sample app “hospital” is used as the keyword. The following code snippet shows how to specify the location, radius and type in the request.
var request = {
location: pyrmont,
radius: 500,
types: ['hospital']
};
To get the list of supported values for the types of property in the Google Places API follow the link below:
https://developers.google.com/places/supported_types
A Places Nearby search is initiated with a call to the PlacesService's nearbySearch() method, which will return an array of PlaceResult objects. A callback method must be passed to nearbySearch(), to handle the results object and google.maps.places.PlacesServiceStatus response.
placesList = document.getElementById('places');
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
});
function callback(results, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
return;
} else {
createMarkers(results);
}
}Step-8: Running the sample application
Now, the sample application is capable of showing nearby hospitals around user’s current position. Build and run the attached sample application.
Fig 1: Screenshot of user's nearby hospitals
