Posts Tagged ‘Search Engines’

My this post is based on “How to Integrate printer in android app”. the best way of doing that Google cloud printing. Google provide us Print Dialog code, we can use it in our application. 1)Login with your gamil-id in your desktop and add your printers in your browser. 2)Create a demo app and put below code. 3)Add Internet permissions…

combine

Read More »

Customize Google Maps
Overview The Maps API allows you to Customize Google Maps look and feel of the map. Custom markers will help the user differentiate between different features of the campus (such as classrooms, bathrooms and studentfacilities). A custom legend will communicate these different types of map features, and a custom map style will help make the map overlays stand out….

Read More »

 

 

google-map-reverse-geocodingGoogle Map API has been a great way to show geographical information on web. A lot of mashup tools like this, have been created around Google Maps to show a wide variety of data. In my previous article about Introduction to Google Maps API, I had described basic APIs to integrate Google Map in your webpage. In this small article we will discuss a great feature of Google Maps API that can be used to locate any City/Country/Place on Map. This is called Geocoding.

Google Maps API provides a wonderful API called Geocoding API that enables you to fetch any location and pin point it on Google Map. GClientGeocoder is the class that we use to get the geocoder that get us the location. We will use getLatLng() method to get latitude/longitude of any location.
Check the following code.

var place =  "New York";
geocoder = new GClientGeocoder();
geocoder.getLatLng(place, function(point) {
    if (!point) {
        alert(place + " not found");
    } else {
        var info = "<h3>"+place+"</h3>Latitude: "+point.y+"  Longitude:"+point.x;
        var marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(info);
    }
});

In above code snippet we passed string “New York” and a handler function to getLatLng() method of GClientGeocoder. GClientGeocoder class will call google server for the location and when it gets the result, it pass the result to the handler function that we specified. Thus handler function will get point (GPoint) object from which we can get the latitude and longitude of location. In above code we have created a marker and placed it on the map.

Online Demo

Google Map Reverse Geocode Example

 

google-api-real-time-search
Google Custom Search API are wonderful tools to create some awesome search engine like tools. Also if you want to add a search option to your website and customize the look and feel of your search results, Google Custom Search API serve best to you.

I have created a Real Time Search engine (I call it real time as it search as you type). I am really impressed by the speed/response of Google Search API.

DEMO

google-search-technology

DEMO

The Code

I will show the code for one of the search api that I implemented in demo page. Let us see how to implement Web Search API.

Step 1: Generate Google Search API Key and Include JavaScript

In order to use Google Search API, you have to first generate a Key for you. Go to following page and signup your self for the Key.
Sign up for Google API Key

Next step is to include the Google Search API javascript. Don’t forget to mention your key in the below code.

// <!--[CDATA[
src=
// ]]>
"http://www.google.com/jsapi?key=YOURKEY" type="text/javascript"></script>
<script type="text/javascript">
    google.load('search', '1');
</script>

Step 2: Add HTML Container for Web Search

We will create a textbox and a button that will take input for search. And a DIV that will be populated by results:

<input type="text" title="Real Time Search" name="searchbox"/>
<input type="button" id="searchbtn" value="Search" onclick="search(searchbox.value)"/>
<div class="data" id="web-content"></div>

When user will write a query and push Search button, a request will be made to Google Search using Custom Search API and the results are fetched. These results are then copied into the DIV.

Step 3: JavaScript to call Google Search API

We will use following JavaScript to call the Google Search API and copy the results in our container DIV.
The code in plain english is:
1. Create an object to connect Google Web search using class google.search.WebSearch.
2. Set a callback function that will get call once the results for the search are fetched.
3. Call the execute() method with search query as argument.
4. In callback function, iterate through the results and copy it to container DIV.

webSearch = new google.search.WebSearch();
webSearch.setSearchCompleteCallback(this, webSearchComplete, [webSearch]);
function webSearchComplete (searcher, searchNum) {
    var contentDiv = document.getElementById('web-content');
    contentDiv.innerHTML = '';
    var results = searcher.results;
    var newResultsDiv = document.createElement('div');
    newResultsDiv.id = 'web-content';
    for (var i = 0; i < results.length; i++) {
      var result = results[i];
      var resultHTML = '<div>';
      resultHTML += '<a href="' + result.unescapedUrl + '" target="_blank"><b>' +
                        result.titleNoFormatting + '</b></a><br/>' +
                        result.content +
                        '<div/>';
      newResultsDiv.innerHTML += resultHTML;
    }
    contentDiv.appendChild(newResultsDiv);
}
function search(query) {
    webSearch.execute(query);
}

Click for Online Demo

English: Coogee Beach

Scroll down and copy/paste the last script in the head of your page. Add onLoad=”initializeMaps” to you body tag and put an element with id=”map_canvas” in your page. Be sure to give it dimensions and your ready to go! Oh, and don’t forget to include the Google Maps API..

Lets keep it simple. Take the base map script that we also used in our previous tutorials:

function initializeMaps() {
var latlng = new google.maps.LatLng(-33.92, 151.25);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById(“map_canvas”),myOptions);
}

Before we initialize this map you need an array (that’s a list) with locations and titles. That looks like this:

var markers = [
[‘Bondi Beach‘, -33.890542, 151.274856],
[‘Coogee Beach‘, -33.923036, 151.259052],
[‘Cronulla Beach‘, -34.028249, 151.157507],
[‘Manly Beach‘, -33.80010128657071, 151.28747820854187],
[‘Maroubra Beach‘, -33.950198, 151.259302]
];

This code is quite easy. Every line in this array stands for a marker. First value is the title of the marker and the second and last form the locational latitude and longitude.

Now lets add a few lines of code to out base script to loop through these marker list and place those markers on the map:

var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
google.maps.event.addListener(marker, ‘click’, (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

That’s all. It’s that easy!

The complete copy-and-paste script

var markers = [
[‘Bondi Beach’, -33.890542, 151.274856],
[‘Coogee Beach’, -33.923036, 151.259052],
[‘Cronulla Beach’, -34.028249, 151.157507],
[‘Manly Beach’, -33.80010128657071, 151.28747820854187],
[‘Maroubra Beach’, -33.950198, 151.259302]
];

function initializeMaps() {
var latlng = new google.maps.LatLng(-33.92, 151.25);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById(“map_canvas”),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
google.maps.event.addListener(marker, ‘click’, (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}

Auto-center map around markers

I changed the above script and added a few lines of code to automatically center and zoom the map around the markers. This can easilly be done with the LatLngBounds() function from the Google Maps API (v3):

var bounds = new google.maps.LatLngBounds();
// in the marker-drawing loop:
bounds.extend(pos);
// after the loop:
map.fitBounds(bounds);

If these lines are included in the script, it looks like this:

var markers = [
[‘Bondi Beach’, -33.890542, 151.274856],
[‘Coogee Beach’, -33.923036, 151.259052],
[‘Cronulla Beach’, -34.028249, 151.157507],
[‘Manly Beach’, -33.80010128657071, 151.28747820854187],
[‘Maroubra Beach’, -33.950198, 151.259302]
];

function initializeMaps() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById(“map_canvas”),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();

for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
google.maps.event.addListener(marker, ‘click’, (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
}
})(marker, i));
map.fitBounds(bounds);
}